Comment utiliser Layui pour implémenter la fonction de vérification de formulaire frontal

Comment utiliser Layui pour implémenter la fonction de vérification de formulaire frontal

Introduction :
Dans le développement front-end, la vérification de formulaire est une fonction essentielle. En validant les données saisies par l'utilisateur, l'expérience utilisateur et l'exactitude des données peuvent être efficacement améliorées. Layui est un framework d'interface utilisateur frontal léger qui fournit des composants de validation de formulaire simples et faciles à utiliser, réduisant considérablement la charge de travail des développeurs. Cet article expliquera comment utiliser Layui pour implémenter des fonctions de validation de formulaire frontal et fournira des exemples de code spécifiques.

1. Utilisation de base de la vérification du formulaire Layui

1. Présentation de Layui :
   Introduisez d'abord les fichiers pertinents du framework Layui dans la page, y compris layui.css et layui.js.

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

2. Créez un formulaire :
   Créez un formulaire en HTML et ajoutez les classes correspondantes aux éléments du formulaire qui doivent être vérifiés, tels que lay-verify et lay-requried code> attendez. <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;
  });
});

Vérification de l'initialisation :

Une fois la page chargée, utilisez la méthode form.render() de Layui pour initialiser le formulaire, c'est-à-dire pour vérifier le formulaire.

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

2. Exemples courants de validation de formulaire

2. Validation des champs obligatoires :

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

3. Validation de la limite de longueur :

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

4. Règles de validation personnalisées :

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

Validation de mot de passe complexe :

.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. Personnaliser le style d'invite de vérification

En plus du style d'invite de vérification par défaut fourni par Layui, nous pouvons également personnaliser le style d'invite de vérification. En modifiant le style des noms de classe pertinents dans le fichier CSS de Layui, vous pouvez obtenir un effet d'invite de vérification personnalisé.

rrreee

Conclusion :

Avec le composant de validation de formulaire fourni par Layui, nous pouvons rapidement implémenter la fonction de validation de formulaire frontal et répondre aux besoins des différents projets en personnalisant les règles et les styles de validation. Le composant de validation de formulaire de Layui est simple à utiliser, présente une bonne évolutivité et compatibilité et constitue un élément indispensable du développement front-end.
1. Références :

Site officiel de Layui : https://www.layui.com/doc/modules/form.html🎜🎜Exemple de vérification du formulaire Layui : https://www.layui.com/demo/form/verify .html🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!