layui表单校验及监听复选框选中状态的坑

最新推荐文章于 2024-07-25 21:45:55 发布

amberom

最新推荐文章于 2024-07-25 21:45:55 发布

阅读量635

点赞数

分类专栏： layui 前端 js 文章标签： layui javascript 前端

原文链接：https://www.cnblogs.com/ejll/p/11471438.html

版权

layui JavaScript 表单验证复选框状态原生JS

关键词由CSDN通过智能技术生成

前端同时被 3 个专栏收录

28 篇文章 2 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

layui

8 篇文章 0 订阅

订阅专栏

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

<div class="myform layui-form">
                        <input type="text" name="use_type" id="person" value="个人" hidden>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b>*</b>姓名：</label>
                            <div class="layui-input-block  layui-col-md5 layui-col-sm6">
                                <input type="text" name="use_name" id="name" required  lay-verify="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b>*</b>身份证号：</label>
                            <div class="layui-input-block  layui-col-md5 layui-col-sm6">
                                <input type="text" name="use_card" id="card" required  lay-verify="Idcard|identity" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b>*</b>密码：</label>
                            <div class="layui-input-block  layui-col-md5 layui-col-sm6">
                                <input type="password" name="use_password"  id="password" required  lay-verify="password|passval" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b>*</b>确认密码：</label>
                            <div class="layui-input-block  layui-col-md5 layui-col-sm6">
                                <input type="password" name="use_repassword" id="repassword" required  lay-verify="rePass" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b>*</b>详细地址：</label>
                            <div class="layui-input-block layui-col-md5 layui-col-sm6">
                                <select name="use_address"  id="provice" lay-verify="address"   style="width: 49%;">
                                    <option value="">请选择所在省/市</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                    <option value="2">广州</option>
                                    <option value="3">深圳</option>
                                    <option value="4">杭州</option>
                                </select>
                                <select name="use_adddress"  id="city" lay-verify="address" >
                                    <option value="">请选择所在市/区</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                    <option value="2">广州</option>
                                    <option value="3">深圳</option>
                                    <option value="4">杭州</option>
                                </select>
                                <textarea name="use_address"  id="detailaddress" placeholder="请输入详细地址" lay-verify="address" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><b>*</b>手机号码：</label>
                            <div class="layui-input-block  layui-col-md5 layui-col-sm6">
                                <input type="text" name="use_telephone" id="telephone" required  lay-verify="telephone|phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item ">
                            <label class="layui-form-label"><b>*</b>验证码：</label>
                            <div class="layui-input-block  layui-col-md5 layui-col-sm6 ">
                                <input type="text" name="use_vcode" id="vcode" required  lay-verify="code" placeholder="请输入验证码" autocomplete="off" class="myInput" >
                              <a href="#">  <input type="button"  class="mybtn" value="获取手机验证码"/></a>
                            </div>
                        </div>
                        <div class="layui-form-item  layui-col-md5 layui-col-md-offset2  layui-col-sm-offset3">
                            <input type="checkbox"  name="protocol"  value="0" id="key_service" lay-skin="primary"  lay-verify="check" title="创建网站账号的同时，我同意遵守：">
                            <p style="padding-left:20px"><a href="#"><b>《服务条款》</b></a>及<a hrefe="#"><b>《隐私声明》</b></a></p>

                        </div>
                        <div class="layui-form-item  layui-col-md-offset2 layui-col-sm-offset3" >
                            <div class="layui-input-block layui-col-md5  layui-col-sm6">
                                <button class="layui-btn" lay-submit lay-filter="formDemo" style="background: #ff6666;width: 100%;">同意并注册</button>
                            </div>
                        </div>
                    </div>

layui.use(['layer','form','laydate'], function(){
    var form = layui.form,laydate=layui.laydate,layer=layui.layer;
    var $=layui.$;
    form.render();
/*对前台信息进行校验*/
    form.verify({
       username:function (value,item) {
           if(value==""){
               return "请输入真实姓名";
           }
       },
        Idcard:function (value,item) {
           if(value==""){
               return "请输入身份证号"
           }

        },
        password:function (value,item) {
           if(value==""){
               return "请输入密码"
           }
        },
        passval:[
            /^[\S]{6,12}$/
            ,'密码必须6到12位，且不能出现空格'
        ],
        rePass:function (value,item) {
           if(value!=$("#password").val()){
               return "两次输入的密码不一致"
           }
        },
        address:[
            /[\S]+/,
            '请选择并输入详细地址'
        ],
        telephone:[
            /[\S]+/,
            '请输入电话号码'
        ],
        code:[
            /[\S]+/,
            '请输入验证码'
        ],check:function () {
            var checked=document.getElementById("key_service");
            if(checked.checked==false){
                layer.msg("请勾选协议",{icon:5,time:2000,anim: 6})
            }
        }


    });
    //监听提交
    form.on('submit(formDemo)', function(data){

                $.ajax({
                    url:'test.html',
                    method:'post',
                    data:data.field,
                    dataType:'JSON',
                    success:function (res) {
                        if(res.code='0'){
                            parent.closeIframe(res.msg);
                        }else{
                            alert(res.msg);
                        }
                    },
                    error:function (data) {

                    }
                });
                //return false;

       // layer.msg(JSON.stringify(data.field));
        return false;
    });
});

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

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