Home  >  Article  >  Web Front-end  >  Example of form validation function implemented by layui.js

Example of form validation function implemented by layui.js

韦小宝
韦小宝Original
2018-01-13 11:44:191631browse

This article mainly introduces the form verification function implemented by layui.js, and analyzes related operation skills such as event monitoring, verification, and judgment based on layui.js in the form of examples. Those who are interested in layui Friends can refer to this article

The example in this article describes the form verification function implemented by layui.js. Share it with everyone for your reference, the details are as follows:

This example can be verified for text box, mobile phone, email, textarea and other formats

First introduce the following files:

<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" >

HTML code:

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

js verification code

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

The complete sample code is as follows:





www.php.cn layui 表单验证





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

The above is all the content of this article. I hope it will help everyone learn layui! !

Related recommendations:

layui file upload to implement code sharing

jquery implements secondary linkage drop-down selection based on layui

LayUI’s method sharing of implementing front-end paging function

The above is the detailed content of Example of form validation function implemented by layui.js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn