layui 表单验证案例文本框，手机，邮箱，textarea等格式的验证 <script src="layui/layui.js"></script> <script src="layui/lay

文本框，手机，邮箱，textarea等格式的验证

<script src="layui/layui.js"></script>

<script src="layui/lay/dest/layui.all.js"></script> 

<link rel="stylesheet" href="layui/css/layui.css"> 

HTML代码：

[html]  view plain  copy

1. <form class="layui-form" action="">  
2.                           <div class="layui-form-item">  
3.                             <label class="layui-form-label">反馈主题</label>  
4.                             <div class="layui-input-block">  
5.                               <input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title">  
6.                             </div>  
7.                           </div>  
8.                           <div class="layui-form-item">  
9.                             <label class="layui-form-label">姓名</label>  
10.                             <div class="layui-input-block">  
11.                               <input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname">  
12.                             </div>  
13.                           </div>  
14.                           <div class="layui-form-item">  
15.                             <label class="layui-form-label">手机</label>  
16.                             <div class="layui-input-block">  
17.                               <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone">  
18.                             </div>  
19.                           </div>  
20.                           <div class="layui-form-item">  
21.                             <label class="layui-form-label">邮箱</label>  
22.                             <div class="layui-input-block">  
23.                               <input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email">  
24.                             </div>  
25.                           </div>  
26.                           <div class="layui-form-item">  
27.                             <label class="layui-form-label">单选框</label>  
28.                             <div class="layui-input-block">  
29.                               <input name="sex" title="男" type="radio" checked="" value="男">  
30.                               <input name="sex" title="女" type="radio" value="女">  
31.                               <input name="sex" title="保密" type="radio" value="密">  
32.                             </div>  
33.                           </div>  
34.                           <!--<div class="layui-form-item layui-form-text">  
35.                             <label class="layui-form-label">普通文本域</label>  
36.                             <div class="layui-input-block">  
37.                               <textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea>  
38.                             </div>  
39.                           </div>-->  
40.                           <div class="layui-form-item layui-form-text">  
41.                             <label class="layui-form-label">内容</label>  
42.                             <div class="layui-input-block">  
43.                               <textarea class="layui-textarea layui-hide"  name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>  
44.                             </div>  
45.                           </div>  
46.                           <div class="layui-form-item">  
47.                             <div class="layui-input-block">  
48.                               <button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button>  
49.                               <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>  
50.                               <button class="layui-btn layui-btn-primary" type="reset">重置</button>  
51.                             </div>  
52.                           </div>  
53.                         </form>  

js验证代码

[html]  view plain  copy

1. <script>  
2. layui.use(['form', 'layedit', 'laydate'], function(){  
3.   var form = layui.form()  
4.   ,layer = layui.layer  
5.   ,layedit = layui.layedit  
6.   ,laydate = layui.laydate;  
7.    
8.   //自定义验证规则  
9.   form.verify({  
10.         title: function(value){  
11.           if(value.length < 5){  
12.             return '标题至少得5个字符啊';  
13.           }  
14.         }, fname: function(value){  
15.           if(value.length < 4){  
16.             return '请输入至少4位的用户名';  
17.           }  
18.         }, contact: function(value){  
19.           if(value.length < 4){  
20.             return '内容请输入至少4个字符';  
21.           }  
22.         }  
23.         ,phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']  
24.         ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']  
25.   });  
26.     
27.   //创建一个编辑器  
28.   layedit.build('LAY_demo_editor');  
29.     
30.   //监听提交  
31.   form.on('submit(demo1)', function(data){  
32.     layer.alert(JSON.stringify(data.field), {  
33.       title: '最终的提交信息'  
34.     })  
35.     return false;  
36.   });  
37.     
38.    
39. });  
40. </script>