首页 > 技术文章 > layui表单校验及监听复选框选中状态的坑

ejll 2019-09-06 10:33 原文

试过所有的办法,都没有办法获取到复选框的选中状态,整了一早上,最后忽然想到,难道一定要用layui官方文档提供的方式监听吗,用原生js难道就不行了,最后一试竟然成功了,不得不说,js是最强大的。

 1 <div class="myform layui-form">
 2                         <input type="text" name="use_type" id="person" value="个人" hidden>
 3                         <div class="layui-form-item">
 4                             <label class="layui-form-label"><b>*</b>姓名:</label>
 5                             <div class="layui-input-block  layui-col-md5 layui-col-sm6">
 6                                 <input type="text" name="use_name" id="name" required  lay-verify="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
 7                             </div>
 8                         </div>
 9                         <div class="layui-form-item">
10                             <label class="layui-form-label"><b>*</b>身份证号:</label>
11                             <div class="layui-input-block  layui-col-md5 layui-col-sm6">
12                                 <input type="text" name="use_card" id="card" required  lay-verify="Idcard|identity" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
13                             </div>
14                         </div>
15                         <div class="layui-form-item">
16                             <label class="layui-form-label"><b>*</b>密码:</label>
17                             <div class="layui-input-block  layui-col-md5 layui-col-sm6">
18                                 <input type="password" name="use_password"  id="password" required  lay-verify="password|passval" placeholder="请输入密码" autocomplete="off" class="layui-input">
19                             </div>
20                         </div>
21                         <div class="layui-form-item">
22                             <label class="layui-form-label"><b>*</b>确认密码:</label>
23                             <div class="layui-input-block  layui-col-md5 layui-col-sm6">
24                                 <input type="password" name="use_repassword" id="repassword" required  lay-verify="rePass" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
25                             </div>
26                         </div>
27                         <div class="layui-form-item">
28                             <label class="layui-form-label"><b>*</b>详细地址:</label>
29                             <div class="layui-input-block layui-col-md5 layui-col-sm6">
30                                 <select name="use_address"  id="provice" lay-verify="address"   style="width: 49%;">
31                                     <option value="">请选择所在省/市</option>
32                                     <option value="0">北京</option>
33                                     <option value="1">上海</option>
34                                     <option value="2">广州</option>
35                                     <option value="3">深圳</option>
36                                     <option value="4">杭州</option>
37                                 </select>
38                                 <select name="use_adddress"  id="city" lay-verify="address" >
39                                     <option value="">请选择所在市/区</option>
40                                     <option value="0">北京</option>
41                                     <option value="1">上海</option>
42                                     <option value="2">广州</option>
43                                     <option value="3">深圳</option>
44                                     <option value="4">杭州</option>
45                                 </select>
46                                 <textarea name="use_address"  id="detailaddress" placeholder="请输入详细地址" lay-verify="address" class="layui-textarea"></textarea>
47                             </div>
48                         </div>
49                         <div class="layui-form-item">
50                             <label class="layui-form-label"><b>*</b>手机号码:</label>
51                             <div class="layui-input-block  layui-col-md5 layui-col-sm6">
52                                 <input type="text" name="use_telephone" id="telephone" required  lay-verify="telephone|phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
53                             </div>
54                         </div>
55                         <div class="layui-form-item ">
56                             <label class="layui-form-label"><b>*</b>验证码:</label>
57                             <div class="layui-input-block  layui-col-md5 layui-col-sm6 ">
58                                 <input type="text" name="use_vcode" id="vcode" required  lay-verify="code" placeholder="请输入验证码" autocomplete="off" class="myInput" >
59                               <a href="#">  <input type="button"  class="mybtn" value="获取手机验证码"/></a>
60                             </div>
61                         </div>
62                         <div class="layui-form-item  layui-col-md5 layui-col-md-offset2  layui-col-sm-offset3">
63                             <input type="checkbox"  name="protocol"  value="0" id="key_service" lay-skin="primary"  lay-verify="check" title="创建网站账号的同时,我同意遵守:">
64                             <p style="padding-left:20px"><a href="#"><b>《服务条款》</b></a><a hrefe="#"><b>《隐私声明》</b></a></p>
65 
66                         </div>
67                         <div class="layui-form-item  layui-col-md-offset2 layui-col-sm-offset3" >
68                             <div class="layui-input-block layui-col-md5  layui-col-sm6">
69                                 <button class="layui-btn" lay-submit lay-filter="formDemo" style="background: #ff6666;width: 100%;">同意并注册</button>
70                             </div>
71                         </div>
72                     </div>
 1 layui.use(['layer','form','laydate'], function(){
 2     var form = layui.form,laydate=layui.laydate,layer=layui.layer;
 3     var $=layui.$;
 4     form.render();
 5 /*对前台信息进行校验*/
 6     form.verify({
 7        username:function (value,item) {
 8            if(value==""){
 9                return "请输入真实姓名";
10            }
11        },
12         Idcard:function (value,item) {
13            if(value==""){
14                return "请输入身份证号"
15            }
16 
17         },
18         password:function (value,item) {
19            if(value==""){
20                return "请输入密码"
21            }
22         },
23         passval:[
24             /^[\S]{6,12}$/
25             ,'密码必须6到12位,且不能出现空格'
26         ],
27         rePass:function (value,item) {
28            if(value!=$("#password").val()){
29                return "两次输入的密码不一致"
30            }
31         },
32         address:[
33             /[\S]+/,
34             '请选择并输入详细地址'
35         ],
36         telephone:[
37             /[\S]+/,
38             '请输入电话号码'
39         ],
40         code:[
41             /[\S]+/,
42             '请输入验证码'
43         ],check:function () {
44             var checked=document.getElementById("key_service");
45             if(checked.checked==false){
46                 layer.msg("请勾选协议",{icon:5,time:2000,anim: 6})
47             }
48         }
49 
50 
51     });
52     //监听提交
53     form.on('submit(formDemo)', function(data){
54 
55                 $.ajax({
56                     url:'test.html',
57                     method:'post',
58                     data:data.field,
59                     dataType:'JSON',
60                     success:function (res) {
61                         if(res.code='0'){
62                             parent.closeIframe(res.msg);
63                         }else{
64                             alert(res.msg);
65                         }
66                     },
67                     error:function (data) {
68 
69                     }
70                 });
71                 //return false;
72 
73        // layer.msg(JSON.stringify(data.field));
74         return false;
75     });
76 });

 

 在form.verify中定义的规则,直接在表单中lay-filter中引用就可以了,例如:

<input type="password" name="use_password"  id="password" required  lay-verify="password|passval" placeholder="请输入密码" autocomplete="off" class="layui-input">

 

推荐阅读