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;
  });
});

Initialisierungsüberprüfung:

Nachdem die Seite geladen wurde, verwenden Sie die form.render()-Methode von Layui, um das Formular zu initialisieren, d. h. um das Formular zu überprüfen.

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

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;
}

3. Passen Sie den Stil der Bestätigungsaufforderung an Zusätzlich zum von Layui bereitgestellten Standardstil für die Bestätigungsaufforderung können wir auch den Stil der Bestätigungsaufforderung anpassen. Durch Ändern des Stils der relevanten Klassennamen in der CSS-Datei von Layui können Sie einen benutzerdefinierten Überprüfungsaufforderungseffekt erzielen.

rrreee

Fazit:

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:

Offizielle Layui-Website: https://www.layui.com/doc/modules/form.html🎜🎜Beispiel zur Layui-Formularüberprüfung: https://www.layui.com/demo/form/verify .html🎜🎜

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!