Exemple de fonction de validation de formulaire implémentée par layui.js

Cet article présente principalement la fonction vérification de formulaire implémentée par layui.js et analyse les compétences opérationnelles associées telles que la surveillance des événements, la vérification et le jugement basés sur layui.js sous forme d'exemples. sont intéressés par layui Les amis peuvent se référer à cet article

L'exemple de cet article décrit la fonction de vérification de formulaire implémentée par layui.js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Cet exemple peut être vérifié pour la zone de texte, le téléphone portable, l'e-mail, la zone de texte et d'autres formats

Introduisez d'abord les fichiers suivants :

<script src="layui/layui.js"></script>
<script src="layui/lay/dest/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >

Code HTML :

<form class="layui-form" action="">
 <p class="layui-form-item">
  <label class="layui-form-label">反馈主题</label>
  <p class="layui-input-block">
   <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">
  </p>
 </p>
 <p class="layui-form-item">
  <label class="layui-form-label">姓名</label>
  <p class="layui-input-block">
   <input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">
  </p>
 </p>
 <p class="layui-form-item">
  <label class="layui-form-label">手机</label>
  <p class="layui-input-block">
   <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone">
  </p>
 </p>
 <p class="layui-form-item">
  <label class="layui-form-label">邮箱</label>
  <p class="layui-input-block">
   <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">
  </p>
 </p>
 <p class="layui-form-item">
  <label class="layui-form-label">单选框</label>
  <p class="layui-input-block">
   <input name="sex" title="男" type="radio" checked="" value="男">
   <input name="sex" title="女" type="radio" value="女">
   <input name="sex" title="保密" type="radio" value="密">
  </p>
 </p>
 <!--<p class="layui-form-item layui-form-text">
  <label class="layui-form-label">普通文本域</label>
  <p class="layui-input-block">
   <textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea>
  </p>
 </p>-->
 <p class="layui-form-item layui-form-text">
  <label class="layui-form-label">内容</label>
  <p class="layui-input-block">
   <textarea class="layui-textarea layui-hide" name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>
  </p>
 </p>
 <p class="layui-form-item">
  <p class="layui-input-block">
   <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>
   <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
   <button class="layui-btn layui-btn-primary" type="reset">重置</button>
  </p>
 </p>
</form>

code de vérification js

<script>
layui.use([&#39;form&#39;, &#39;layedit&#39;, &#39;laydate&#39;], function(){
 var form = layui.form()
 ,layer = layui.layer
 ,layedit = layui.layedit
 ,laydate = layui.laydate;
 //自定义验证规则
 form.verify({
    title: function(value){
     if(value.length < 5){
      return &#39;标题至少得5个字符啊&#39;;
     }
    }, fname: function(value){
     if(value.length < 4){
      return &#39;请输入至少4位的用户名&#39;;
     }
    }, contact: function(value){
     if(value.length < 4){
      return &#39;内容请输入至少4个字符&#39;;
     }
    }
    ,phone: [/^1[3|4|5|7|8]\d{9}$/, &#39;手机必须11位，只能是数字！&#39;]
    ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, &#39;邮箱格式不对&#39;]
 });
 //创建一个编辑器
 layedit.build(&#39;LAY_demo_editor&#39;);
 //监听提交
 form.on(&#39;submit(demo1)&#39;, function(data){
  layer.alert(JSON.stringify(data.field), {
   title: &#39;最终的提交信息&#39;
  })
  return false;
 });
});
</script>

L'exemple de code complet est le suivant :

 

 反馈主题
 

  
 
 

 

 姓名
 

  
 
 

 

 手机
 

  
 
 

 

 邮箱
 

  
 
 

 

 单选框
 

  
  
  
 
 

 
 

 内容
 

  
 
 

 

 

  跳转式提交
  立即提交
  重置
 
 


<script>
layui.use([&#39;form&#39;, &#39;layedit&#39;, &#39;laydate&#39;], function(){
 var form = layui.form()
 ,layer = layui.layer
 ,layedit = layui.layedit
 ,laydate = layui.laydate;
 //自定义验证规则
 form.verify({
    title: function(value){
     if(value.length < 5){
      return &#39;标题至少得5个字符啊&#39;;
     }
    }, fname: function(value){
     if(value.length < 4){
      return &#39;请输入至少4位的用户名&#39;;
     }
    }, contact: function(value){
     if(value.length < 4){
      return &#39;内容请输入至少4个字符&#39;;
     }
    }
    ,phone: [/^1[3|4|5|7|8]\d{9}$/, &#39;手机必须11位，只能是数字！&#39;]
    ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, &#39;邮箱格式不对&#39;]
 });
 //创建一个编辑器
 layedit.build(&#39;LAY_demo_editor&#39;);
 //监听提交
 form.on(&#39;submit(demo1)&#39;, function(data){
  layer.alert(JSON.stringify(data.field), {
   title: &#39;最终的提交信息&#39;
  })
  return false;
 });
});
</script>

Ce qui précède est tout le contenu de cet article, j'espère apporter de l'aide à tous ceux qui apprennent le layui ! !

Recommandations associées :

Téléchargement de fichiers layui pour implémenter le partage de code

jquery implémente la sélection déroulante de liaison secondaire basée sur layui

Partagez comment LayUI implémente la fonction de pagination frontale

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!