试过所有的办法,都没有办法获取到复选框的选中状态,整了一早上,最后忽然想到,难道一定要用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">