jquery validate校验

1.引入validate

 <script src="~/Content/js/validateform/jquery.validate.min.js"></script>
    <script src="~/Content/js/validateform/messages_zh.js"></script>

2.提交前校验

function dangAnInfoFormSubmit() {
        if (validateForm1().form()) {
            editClickFun();
        }
    }

 

function validateForm1() {
        $.validator.addMethod("checkPhone", function (value, element, params) {
            return this.optional(element) || ((/0?(13|14|15|17|18|19)[0-9]{9}/).test(value));
        }, "请输入手机号码");
        $.validator.addMethod("checkusergrouplist", function (value, element, params) {
            return this.optional(element) || ((/[1-9]\d*/).test(value))
        }, "请选择住户组");
        $.validator.addMethod("checkDate", function (value, element, params) {
            return this.optional(element) || ((/\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/).test(value));
        }, "请输入日期格式");
        $.validator.addMethod("checkInt", function (value, element, params) {
            return this.optional(element) || ((/[1-9]\d*/).test(value));
        }, "请输入大于0的整数");
        $.validator.addMethod("checkSfz", function (value, element, params) {
            return this.optional(element) || ((/\d{17}[\d|x]|\d{15}/).test(value));
        }, "请输入身份证号");
        $.validator.addMethod("checkDesname", function (value, element, params) {
            return this.optional(element) || ((/^[\s\S]*.*[^\s][\s\S]*$/).test(value)); //非空/^[\s\S]*.*[^\s][\s\S]*$/
        }, "请输入名称");
        $.validator.addMethod("checkDesTime", function (value, element, params) {
            return this.optional(element) || ((/^[\s\S]*.*[^\s][\s\S]*$/).test(value)); //非空/^[\s\S]*.*[^\s][\s\S]*$/
        }, "请输入时间");
        $.validator.addMethod("checkDesHos", function (value, element, params) {
            return this.optional(element) || ((/^[\s\S]*.*[^\s][\s\S]*$/).test(value)); //非空/^[\s\S]*.*[^\s][\s\S]*$/
        }, "请输入医院");
        var rulesValue = {
            InputName: { required: true },
            sltsex: { required: true },
            inputiphone: { required: true, checkPhone: true },
            sfTypeInfos: { required: true },
            csTypeInfos: { required: true },
            selfloorInfos: { required: true },
            selroomInfos: { required: true },
            //inputaddress: { required: true },
            selTblSysDepts: { required: true },
            selhealthWorker: { required: true },
            inputbirthOfDate: { required: true, checkDate: true },
            sltdev: { required: true },
            usergrouplist: { required: true, checkusergrouplist: true },
            //输入校验sfz
            inputnationId: { required: true, checkSfz: true },
            familyPhone: { checkPhone: true },

        }
        var idList = ['isDisabledList', 'drugallergyList', 'familyhistoryList', 'olddiseasesList', 'inactivationtypeList', 'isBloodTransfusionList', 'isTraumaList', 'isSurgeryList']
        for (let j = 0; j < idList.length; j++) {
            let docid = document.getElementById(idList[j])
            if (docid.rows.length > 1) {
                for (let i = 1; i <= docid.rows.length; i++) {
                    rulesValue[idList[j] + '_desName_' + i] = { required: true, checkDesname: true }
                    rulesValue[idList[j] + '_desTime_' + i] = { required: true, checkDesTime: true }
                    rulesValue[idList[j] + '_desHos_' + i] = { required: true, checkDesHos: true }
                }
            }
        }
        var messagesValue = {
            InputName: { required: "请输入姓名" },
            sltsex: { required: "请选择性别" },
            inputiphone: { required: "请输入手机号码" },
            sfTypeInfos: { required: "请输入省份" },
            csTypeInfos: { required: "请输入城市" },
            selfloorInfos: { required: "请输入楼层" },
            selroomInfos: { required: "请输入房间" },
            //inputaddress: { required: "请输入住址" },
            selTblSysDepts: { required: "请选择护理组" },
            selhealthWorker: { required: "请选择保健员" },
            sltdev: { required: "请选择序列号" },
            usergrouplist: { required: "请选择住户组", },
            inputbirthOfDate: { required: "请输入出生日期" },
            //非必填项进行校验
            inputnationId: { required: "请输入身份证号" },
            InputAge: { required: "请输入年龄" },
        }
        for (let j = 0; j < idList.length; j++) {
            let docid = document.getElementById(idList[j])
            if (docid.rows.length > 1) {
                for (let i = 1; i <= docid.rows.length; i++) {
                    messagesValue[idList[j] + '_desName_' + i] = { required: "请输入名称" }
                    messagesValue[idList[j] + '_desTime_' + i] = { required: "请输入时间" }
                    messagesValue[idList[j] + '_desHos_' + i] = { required: "请输入医院" }
                }
            }
        }

        return $("#dangAnInfoForm").validate({
            rules: rulesValue,
            messages: messagesValue
        });
    }

 validate校验相同name时只校验第一个input的问题

修改源文件.js无效

 //  this.name in c || !b.objectLength(a(this).rules()) ? !1 : (c[this.name] = !0, !0)
                        (c[this.name] = !0, !0)

 

解决办法1：设置成不同name，分别校验

解决办法2：手写校验（样式形如validate）

<div class='form-group'>
                        <label for='stream_url'><i class='bitianxiang'>*</i>接入地址</label>
                        <input type='text' class='form-control' name='stream_url' placeholder='请输入接入地址'>
                        <label  class='error' style='display:none' >请输入rtsp://开头的接入地址</label>
                    </div>

 

 @*提交之前校验*@
        function btnSaveFall() {
            @*点击提交之前开始校验*@
            $("input[name='stream_url']").attr("oninput", "streamChange();");
            $("input[name='remark']").attr("oninput", "remarkChange();");
            var result1 = validate2Form()
            var result2 = validateForm().form()
            if (result1 && result2)
                editClickFun()
        }

 

 function streamChange() {
            let flag = false;
            $("input[name='stream_url']").each(function (index, item) {
                if (!$(this).is(':hidden') && !$(this).val()) { //true 隐藏
                    $(this).next()[0].innerHTML = '请输入rtsp://开头的接入地址'
                    $(this).next().show()
                    flag = false
                } else {
                    if (!$(this).is(':hidden') && !((/^rtsp:*/).test($(this).val()))) {
                        $(this).next()[0].innerHTML = '请输入rtsp://开头的接入地址'
                        $(this).next().show()
                        flag = false
                    } else {
                        $(this).next().hide()
                         flag = true
                    }
                }
            });
            if(flag) return true
            return false
        }