So implementieren Sie mit Layui die Front-End-Formularüberprüfungsfunktion

So verwenden Sie Layui zur Implementierung der Front-End-Formularüberprüfungsfunktion

Einführung:
In der Front-End-Entwicklung ist die Formularüberprüfung eine wesentliche Funktion. Durch die Validierung der vom Benutzer eingegebenen Daten können das Benutzererlebnis und die Datengenauigkeit effektiv verbessert werden. Layui ist ein leichtes Front-End-UI-Framework, das einfache und benutzerfreundliche Formularvalidierungskomponenten bereitstellt und so die Arbeitsbelastung der Entwickler erheblich reduziert. In diesem Artikel wird erläutert, wie Sie mit Layui Front-End-Formularvalidierungsfunktionen implementieren und spezifische Codebeispiele bereitstellen.

1. Grundlegende Verwendung der Layui-Formularüberprüfung

1. Einführung in Layui:
   Führen Sie zunächst die relevanten Dateien des Layui-Frameworks in die Seite ein, einschließlichlayui.css undlayui.js.

<link rel="stylesheet" href="path/to/layui.css">
<script src="path/to/layui.js"></script>

2. Erstellen Sie ein Formular:
   Erstellen Sie ein Formular in HTML und fügen Sie entsprechende Klassen zu den Formularelementen hinzu, die überprüft werden müssen, wie z. B. lay-verify und lay-requried</ Code> warten. <code>lay-verify和lay-requried等。

<form class="layui-form" lay-filter="formDemo">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

3. 初始化验证：
   在页面加载完成后，使用Layui的form.render()

layui.use('form', function(){
  var form = layui.form;
  
  //自定义验证规则
  form.verify({
    username: function(value){
      if(value.length < 5){
        return '用户名长度不能少于5个字符';
      }
    },
    password: [/^[S]{6,12}$/,'密码必须6到12位，且不能出现空格']
  });
  
  //监听提交
  form.on('submit(demo)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
});

Nach dem Login kopieren

Initialisierungsüberprüfung:

1. <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">

   Nach dem Login kopieren
2. Häufige Formularvalidierungsbeispiele

2. Erforderliche Feldvalidierung:

<input type="text" name="username" lay-verify="minLength|maxLength" placeholder="请输入用户名" autocomplete="off" class="layui-input">

3. Längenbegrenzungsvalidierung:

layui.use('form', function(){
  var form = layui.form;
  
  form.verify({
    username: function(value){
      if(value.length < 5){
        return '用户名长度不能少于5个字符';
      }
    }
  });
});

4. Benutzerdefinierte Validierungsregeln:

layui.use('form', function(){
  var form = layui.form;
  
  form.verify({
    password: [/^[S]{6,12}$/,'密码必须6到12位，且不能出现空格']
  });
});

Komplex Passwortvalidierung:

.layui-form-item .layui-input-inline .layui-form-mid{
  height: 24px;
  line-height: 24px;
  padding-left: 4px;
  color: #393D49;
}

.layui-form-item .layui-input-inline .layui-form-label::before{
  width: 0;
}

rrreee

Mit der von Layui bereitgestellten Formularvalidierungskomponente können wir die Front-End-Formularvalidierungsfunktion schnell implementieren und die Anforderungen verschiedener Projekte erfüllen, indem wir Validierungsregeln und -stile anpassen. Die Formularvalidierungskomponente von Layui ist einfach zu verwenden, weist eine gute Skalierbarkeit und Kompatibilität auf und ist ein unverzichtbarer Bestandteil der Front-End-Entwicklung.
1. Referenzen:

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Layui die Front-End-Formularüberprüfungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!