jquery validate验证插件

时间:2023-02-06 20:37:08
$(document).ready(function () {
            $.extend($.validator.messages, {
                required: "必填",
                remote: "请修正此字段",
                email: "请输入有效的电子邮件地址",
                url: "请输入有效的网址",
                date: "请输入有效的日期",
                dateISO: "请输入有效的日期 (YYYY-MM-DD)",
                number: "请输入有效的数字",
                digits: "只能输入数字",
                creditcard: "请输入有效的信用卡号码",
                equalTo: "你的输入不相同",
                extension: "请输入有效的后缀",
                maxlength: $.validator.format("最多可以输入 {0} 个字符"),
                minlength: $.validator.format("最少要输入 {0} 个字符"),
                rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
                range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
                max: $.validator.format("请输入不大于 {0} 的数值"),
                min: $.validator.format("请输入不小于 {0} 的数值")
            });//中文包
            $.validator.addMethod("compareDate", function (value, element) {//自定义方法
                var assigntime = $("#MSTARTTIME").val();
                var deadlinetime = value;
                var reg = new RegExp('-', 'g');
                assigntime = assigntime.replace(reg, '/');//正则替换
                deadlinetime = deadlinetime.replace(reg, '/');
                assigntime = new Date(parseInt(Date.parse(assigntime), 10));
                deadlinetime = new Date(parseInt(Date.parse(deadlinetime), 10));
                if (assigntime > deadlinetime) {
                    return false;
                } else {
                    return true;
                }
            }, "结束日期必须大于开始日期");//比较日期大小
            jQuery.validator.addMethod("minNumber", function (value, element) {
                var returnVal = true;
                inputZ = value;
                var ArrMen = inputZ.split(".");    //截取字符串
                if (ArrMen.length == 2) {
                    if (ArrMen[1].length > 2) {    //判断小数点后面的字符串长度
                        returnVal = false;
                        return false;
                    }
                }
                return returnVal;
            }, "小数点后最多为两位");//判断小数点
            jQuery.validator.addMethod("maxNumber", function (value, element) {
                var returnVal = true;
                inputZ = value;
                var ArrMen = inputZ.split(".");    //截取字符串
                if (ArrMen.length == 2) {
                    if (ArrMen[0].length > 2) {    //判断小数点后面的字符串长度
                        returnVal = false;
                        return false;
                    }
                }
                return returnVal;
            }, "整数不超过两位");//整数位数
            $("#form0").validate({
                rules: {
                    FFREQUENCY: {
                        required: true,
                        maxlength: 4,//最大长度
                        max: 3000,
                        number: true
                    },
                    FBANDWIDTH: {
                        required: true,
                        maxlength:3,
                        number: true
                    },
                    MENDTIME: {
                        compareDate: $("#MENDTIME").val(),
                    },
                    BANDOCCUPANCY: {
                        number: true,
                        maxlength: 5,
                        min: 0.01,
                        max: 100,
                        minNumber: $("#BANDOCCUPANCY").val(),
                    },
                    AZIMUTH: {
                        number: true,
                        maxlength: 6,
                        min: 0.01,
                        minNumber: $("#AZIMUTH").val(),
                    },
                    MAXAMPLITUDE: {
                        number: true,
                        maxlength: 5,
                        max: 100,
                        minNumber: $("#MAXAMPLITUDE").val(),
                        maxNumber: $("#MAXAMPLITUDE").val(),
                    },
                    MINAMPLITUDE: {
                        number: true,
                        maxlength: 5,
                        minNumber: $("#MAXAMPLITUDE").val(),
                        maxNumber: $("#MAXAMPLITUDE").val(),
                    },
                    AVEAMPLITUDE: {
                        number: true,
                        maxlength: 5,
                        minNumber: $("#AVEAMPLITUDE").val(),
                        maxNumber: $("#AVEAMPLITUDE").val(),
                    },
                    MAXSNR: {
                        number: true,
                        maxlength: 5,
                        minNumber: $("#MAXSNR").val(),
                        max: 100,
                    },
                    MINSNR: {
                        number: true,
                        maxlength: 5,
                        minNumber: $("#MINSNR").val(),
                        max: 100,
                    },
                    DEMODMODE: {
                        maxlength: 36,
                    }
                },
                errorElement:"label",//设置错误信息的标签
                errorPlacement: function (error, element) {
                    error.insertAfter(element.next());
                }//放置错误信息的位置
            });//验证事件      
        });

jquery的验证

        $("#saveBtn").click(function () {
           var ok1 = false;
            var ok2 = false;
            var ok3 = false;
            var ok4 = false;
            if ($("#FREQUENCY").val().length <= 12 && $("#FREQUENCY").val() != '') {
              $("#FREQUENCY").next().next().text('');
               ok1 = true;
           }else {
              $("#FREQUENCY").next().next().text('长度不超过12位').addClass('state');
           }

            if ($("#BANDWIDTH").val().length <= 12 && $("#BANDWIDTH").val() != '') {
                $("#BANDWIDTH").next().next().text('');
                ok2 = true;
            } else {
                $("#BANDWIDTH").next().next().text('长度不超过12位').addClass('state');
           };

            if ($("#BANDWIDTH").val().length <= 12 && $("#BANDWIDTH").val() != '') {
               $("#BANDWIDTH").next().next().text('');
                ok3 = true;
            } else {
               $("#BANDWIDTH").next().next().text('长度不超过12位').addClass('state');
           };
           if (ok1 && ok2 && ok3) {
               $('#form0').submit();
            } else {
               return false;
            }
        });

关于自写jquery必填项

关于验证的逻辑:就是失去焦点也可以验证,点击也可以验证,但是在点击事件中不必和失去焦点一样验证一遍,因为失焦已经验证过一遍了,报错后不会提交,所以自写验证时先写失焦,最后做个必填验证就好(刷新就不会是这种情况);

第一种

            function validate() {
                if ($("#SelectCheck").val() == '') {
                    $("#SelectCheck").parent().siblings(".errormessage1").text('必填');
                }
                else {
                    $("#SelectCheck").parent().siblings(".errormessage1").text('');
                }
                if ($("#Start_Time").val() == '') {
                    $("#Start_Time").parent().siblings(".errormessage1").text('必填');
                }
                else {
                    $("#Start_Time").parent().siblings(".errormessage1").text('');
                }
                if ($(".startFrequency").val() == '') {
                    $(".startFrequency").parent().siblings(".errormessage1").text('必填');
                }
                else {
                    $(".startFrequency").parent().siblings(".errormessage1").text('');
                }
            };

太复杂了,改了一下

            $("#Searchs").click(function () {
                $(".errormark").css("display", "none");
                $("#SelectCheck,.startFrequency,#Start_Time").each(function () {
                    if ($(this).val() == '') {
                        $(this).parent().siblings(".errormessage1").text('必填');
                    }
                    else {
                        $(this).parent().siblings(".errormessage1").text('');
                    }
                });
                if ($("#Start_Time").val() == '' || $("#SelectCheck").val() == '' || $(".startFrequency").val() == '') {
                    return false;
                };
            });
            $("#SelectCheck,#Start_Time,.startFrequency").blur(function () {
                if ($(this).val() == '') {
                    $(this).parent().siblings(".errormessage1").text('必填');
                }
                else {
                    $(this).parent().siblings(".errormessage1").text('');
                }
                $(this).siblings(".errormark").css("display", "none");
            })

关于模态框问题,此插件表单验证按钮必须在form标签内,但是模态框中表单是在iframe中,按钮在公共的模态框中,所以可以在表单下添加一个按钮再隐藏,在给模态框的按钮添加点击事件触发。

第三种 时间验证(这是只比较大小的情况,不超过30分钟要转为数字)

    var starttime = $('#txtStorageTimeStart').val();  
    var endtime = $('#txtStorageTimeEnd').val();  
    var start = new Date(starttime.replace("-", "/").replace("-", "/"));  
    var end = new Date(endtime.replace("-", "/").replace("-", "/"));  
    if(end<start){    
        return false;    
    }
    var val=$('input:radio[name="sex"]:checked').val();
//判断是否radio点击 val == null

 第四种 时间相差

function diy_time(time1,time2){
    time1 = Date.parse(new Date(time1));
    time2 = Date.parse(new Date(time2));
    return time3 = '相差'+Math.abs(parseInt((time2 - time1)/1000))+'';
time4 = '相差'+Math.abs(parseInt((time2 - time1)/1000/3600/24))+'天'; }
var time1 = "2014-07-10 10:21:12"; var time2 = "2014-07-10 10:21:00"; alert(diy_time(time1,time2));