zoukankan      html  css  js  c++  java
  • jquery validate验证插件

    $(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));
  • 相关阅读:
    源代码的下载和翻译
    Git使用入门
    搭建Andriod开发环境
    Andriod系统移植与驱动开发概述
    直观打印二叉树
    深度优先遍历图(DFS)
    《UNIX网络编程 卷1 套接字联网API》(第三版)阅读笔记----2018.5.22
    C/C++
    实现具有getMin功能的栈
    用两个栈来模拟一个队列
  • 原文地址:https://www.cnblogs.com/cindy-hmy/p/7463074.html
Copyright © 2011-2022 走看看