文档章节

扩展jquery.validate自定义验证,自定义提示,本地化

深圳大道
 深圳大道
发布于 2016/12/29 15:40
字数 1876
阅读 48
收藏 0
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Css/css.css" rel="stylesheet" />
    <script src="~/Js/jquery.min.js"></script>
    <script src="~/Js/jquery.validate.min.js"></script>
    <script src="~/Js/jquery.validate.extend.js"></script>
    <script>
        $(document).ready(function () {
            $("#myform").validate({
                rules: {
                    username: { required: true, minlength: 2 },
                    password: { required: true, minlength: 6, maxlength: 16 },
                    repassword: { required: true, equalTo: "#password" },
                    amt: { required: true, isAmount: true },
                    idcard: { required: true, isIdCardNo: true }
                },
                messages: {
                    username: {
                        required: "用户名不能为空",
                        minlength: "用户名的最小长度为2"
                    },
                    password: {
                        required: "密码不能为空",
                        minlength: "密码长度不能少于6个字符",
                        maxlength: "密码长度不能超过16个字符"
                    },
                    repassword: {
                        required: "确认密码不能为空",
                        equalTo: "确认密码和密码不一致"
                    },
                    amt: {
                        required: "金额不能为空",
                        isAmount: "交易金额必须大于0,且最多有两位小数"
                    },
                    idcard: {
                        required: "身份证不能为空",
                        isIdCardNo: "身份证号码错误"
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div> 
        <form id="myform" method="post" action="">
            <fieldset>
                <legend>jquery-validate表单校验验证</legend>
                <div class="item">
                    <label for="username" class="item-label">用户名:</label>
                    <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名">
                </div>
                <div class="item">
                    <label for="password" class="item-label">密码:</label>
                    <input type="password" id="password" name="password" class="item-text" placeholder="设置密码">
                </div>
                <div class="item">
                    <label for="password" class="item-label">确认密码:</label>
                    <input type="password" name="repassword" class="item-text" placeholder="设置确认密码">
                </div>
                <div class="item">
                    <label for="amt" class="item-label">金额:</label>
                    <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额">
                </div>
                <div class="item">
                    <label for="idcard" class="item-label">身份证号码:</label>
                    <input type="text" id="idcard" name="idcard" class="item-text" placeholder="身份证号码">
                </div>
                <div class="item">
                    <input type="submit" value="提交" class="item-submit">
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

/// <reference path="jquery.js" />
// jquery.validate.extend.js
$.validator.setDefaults({
    onkeyup: null,
    success: function (label) {
        label.text('').addClass('valid');
    },
    onfocusin: function (element) {
        this.lastActive = element;
        $(element).addClass('highlight');
        if (this.settings.focusCleanup) {
            if (this.settings.unhighlight) {
                this.settings.unhighlight.call(this, element, this.settings.errorClass, this.settings.validClass);
            }
            this.hideThese(this.errorsFor(element));
        }
    },
    onfocusout: function (element) {
        $(element).parent().children(".tip").remove();
        $(element).removeClass('highlight');
        this.element(element);
    }
});

/*****************************************************************
                  jQuery Validate扩展验证方法       
*****************************************************************/
// 判断整数value是否等于0 
jQuery.validator.addMethod("isIntEqZero", function (value, element) {
    value = parseInt(value);
    return this.optional(element) || value == 0;
}, "整数必须为0");


// 判断整数value是否大于0
jQuery.validator.addMethod("isIntGtZero", function (value, element) {
    value = parseInt(value);
    return this.optional(element) || value > 0;
}, "整数必须大于0");


// 判断整数value是否大于或等于0
jQuery.validator.addMethod("isIntGteZero", function (value, element) {
    value = parseInt(value);
    return this.optional(element) || value >= 0;
}, "整数必须大于或等于0");


// 判断整数value是否不等于0 
jQuery.validator.addMethod("isIntNEqZero", function (value, element) {
    value = parseInt(value);
    return this.optional(element) || value != 0;
}, "整数必须不等于0");


// 判断整数value是否小于0 
jQuery.validator.addMethod("isIntLtZero", function (value, element) {
    value = parseInt(value);
    return this.optional(element) || value < 0;
}, "整数必须小于0");


// 判断整数value是否小于或等于0 
jQuery.validator.addMethod("isIntLteZero", function (value, element) {
    value = parseInt(value);
    return this.optional(element) || value <= 0;
}, "整数必须小于或等于0");


// 判断浮点数value是否等于0 
jQuery.validator.addMethod("isFloatEqZero", function (value, element) {
    value = parseFloat(value);
    return this.optional(element) || value == 0;
}, "浮点数必须为0");


// 判断浮点数value是否大于0
jQuery.validator.addMethod("isFloatGtZero", function (value, element) {
    value = parseFloat(value);
    return this.optional(element) || value > 0;
}, "浮点数必须大于0");


// 判断浮点数value是否大于或等于0
jQuery.validator.addMethod("isFloatGteZero", function (value, element) {
    value = parseFloat(value);
    return this.optional(element) || value >= 0;
}, "浮点数必须大于或等于0");


// 判断浮点数value是否不等于0 
jQuery.validator.addMethod("isFloatNEqZero", function (value, element) {
    value = parseFloat(value);
    return this.optional(element) || value != 0;
}, "浮点数必须不等于0");


// 判断浮点数value是否小于0 
jQuery.validator.addMethod("isFloatLtZero", function (value, element) {
    value = parseFloat(value);
    return this.optional(element) || value < 0;
}, "浮点数必须小于0");


// 判断浮点数value是否小于或等于0 
jQuery.validator.addMethod("isFloatLteZero", function (value, element) {
    value = parseFloat(value);
    return this.optional(element) || value <= 0;
}, "浮点数必须小于或等于0");


// 判断浮点型  
jQuery.validator.addMethod("isFloat", function (value, element) {
    return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "只能包含数字、小数点等字符");


// 匹配integer
jQuery.validator.addMethod("isInteger", function (value, element) {
    return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value) >= 0);
}, "匹配integer");


// 判断数值类型,包括整数和浮点数
jQuery.validator.addMethod("isNumber", function (value, element) {
    return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "匹配数值类型,包括整数和浮点数");


// 只能输入[0-9]数字
jQuery.validator.addMethod("isDigits", function (value, element) {
    return this.optional(element) || /^\d+$/.test(value);
}, "只能输入0-9数字");


// 判断中文字符 
jQuery.validator.addMethod("isChinese", function (value, element) {
    return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "只能包含中文字符。");


// 判断英文字符 
jQuery.validator.addMethod("isEnglish", function (value, element) {
    return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "只能包含英文字符。");


// 手机号码验证    
jQuery.validator.addMethod("isMobile", function (value, element) {
    var length = value.length;
    return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");


// 电话号码验证    
jQuery.validator.addMethod("isPhone", function (value, element) {
    var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码。");


// 联系电话(手机/电话皆可)验证   
jQuery.validator.addMethod("isTel", function (value, element) {
    var length = value.length;
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
    return this.optional(element) || tel.test(value) || (length == 11 && mobile.test(value));
}, "请正确填写您的联系方式");


// 匹配qq      
jQuery.validator.addMethod("isQq", function (value, element) {
    return this.optional(element) || /^[1-9]\d{4,12}$/;
}, "匹配QQ");


// 邮政编码验证    
jQuery.validator.addMethod("isZipCode", function (value, element) {
    var zip = /^[0-9]{6}$/;
    return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码。");


// 匹配密码,以字母开头,长度在6-12之间,只能包含字符、数字和下划线。      
jQuery.validator.addMethod("isPwd", function (value, element) {
    return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value);
}, "以字母开头,长度在6-12之间,只能包含字符、数字和下划线。");


// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function (value, element) {
    //var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;   
    return this.optional(element) || isIdCardNo(value);
}, "请输入正确的身份证号码。");


// IP地址验证   
jQuery.validator.addMethod("ip", function (value, element) {
    return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);
}, "请填写正确的IP地址。");


// 字符验证,只能包含中文、英文、数字、下划线等字符。    
jQuery.validator.addMethod("stringCheck", function (value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);
}, "只能包含中文、英文、数字、下划线等字符");


// 匹配english  
jQuery.validator.addMethod("isEnglish", function (value, element) {
    return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "匹配english");


// 匹配汉字  
jQuery.validator.addMethod("isChinese", function (value, element) {
    return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
}, "匹配汉字");


// 匹配中文(包括汉字和字符) 
jQuery.validator.addMethod("isChineseChar", function (value, element) {
    return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "匹配中文(包括汉字和字符) ");


// 判断是否为合法字符(a-zA-Z0-9-_)
jQuery.validator.addMethod("isRightfulString", function (value, element) {
    return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);
}, "判断是否为合法字符(a-zA-Z0-9-_)");


// 判断是否包含中英文特殊字符,除英文"-_"字符外
jQuery.validator.addMethod("isContainsSpecialChar", function (value, element) {
    var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\!)(\@)(\#)(\¥)(\%)(\…)(\&)(\*)(\()(\))(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\;)(\:)(\”)(\“)(\’)(\。)(\,)(\、)(\?)]+/);
    return this.optional(element) || !reg.test(value);
}, "含有中英文特殊字符");


// 判断是否金额 小数点后两位
jQuery.validator.addMethod(
    "isAmount",
    function (value, element) {
        return value && /^\d*\.?\d{0,2}$/.test(value);
    },
    "金额必须大于0且小数位数不超过2位"
);

//身份证号码的验证规则
function isIdCardNo(num) {
    //if (isNaN(num)) {alert("输入的不是数字!"); return false;} 
    var len = num.length, re;
    if (len == 15)
        re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/);
    else if (len == 18)
        re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/);
    else {
        //alert("输入的数字位数不对。"); 
        return false;
    }
    var a = num.match(re);
    if (a != null) {
        if (len == 15) {
            var D = new Date("19" + a[3] + "/" + a[4] + "/" + a[5]);
            var B = D.getYear() == a[3] && (D.getMonth() + 1) == a[4] && D.getDate() == a[5];
        }
        else {
            var D = new Date(a[3] + "/" + a[4] + "/" + a[5]);
            var B = D.getFullYear() == a[3] && (D.getMonth() + 1) == a[4] && D.getDate() == a[5];
        }
        if (!B) {
            //alert("输入的身份证号 "+ a[0] +" 里出生日期不对。"); 
            return false;
        }
    }
    if (!re.test(num)) {
        //alert("身份证最后一位只能是数字和字母。");
        return false;
    }
    return true;
}

body {
    font-family: Microsoft Yahei;
    font-size: 15px;
}

fieldset {
    width: 680px;
}

legend {
    margin-left: 8px;
}

.item {
    height: 56px;
    line-height: 36px;
    margin: 10px;
}

label {
    float: left;
}

.item .item-label {
    float: left;
    width: 80px;
    text-align: right;
}

.item-text {
    float: left;
    width: 244px;
    height: 16px;
    padding: 9px 25px 9px 5px;
    margin-left: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.item-submit {
    margin-left: 88px;
}

input.error {
    border: 1px solid #E6594E;
}

input.highlight {
    border: 1px solid #7abd54;
}

label.error, label.tip {
    float: left;
    font-size: 14px;
    text-align: left;
    margin-left: 5px;
    padding-left: 20px;
    color: red;
    background: url('/images/error.png') no-repeat left center;
}

label.valid {
    background: url('/images/right.png') no-repeat left center;
}

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/53407823

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jquery.validate中,未验证通过就提交请求

页面中使用jquery.validate验证框架。自定义一个验证方法,但是这个验证没有通过就提交了。 还有一点:虽然我自己的验证通过与否,原先其他输入框中设置的必须输入的规则都不起作用了。 请问...

阎王他爹
2011/02/23
3K
4
js插件 vaidate 验证用户登录信息

下面是默认校验规则,也可以自定义规则 (1)required:true 必输字段 (2)remote:"check.php" 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须...

浅夏
2013/07/12
883
0
jQuery.Validate客户端验证使用介绍

在日常项目中表单验证算是最常见的了,使用一个好的js库可以使我们的工作事半功倍。jQuery.Validate无疑就是一个不错的选择。 jQuery.Validate,这个验证库是属于jQuery的插件,是由bassist...

Edens_Song
2012/09/17
27
0
validate动态验证

使用jquery validate做动态添加多个验证是,其中第一个验证信息没有正确提示: 代码 效果

Fairy_Lyk
2016/09/21
246
1
使用JQuery.validate后的bootstrap风格校验提示‏

因为项目使用了bootstrap框架,在做form提交时需要进行验证。本来研究了一下午jqBootstrapValidator,可是不好用,最终还是想用JQuery validate。 其实最主要就是showErrors方法,自定义了b...

本人不在服务区
2015/05/29
11.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

Leetcode PHP题解--D118 350. Intersection of Two Arrays II

D118 350. Intersection of Two Arrays II 题目链接 350. Intersection of Two Arrays II 题目分析 返回给定两个数组的交集。 思路 从数量较多的那个数组开始去另一个数组寻找是否元素存在,...

skys215
19分钟前
3
0
从源码上分析Android View保存数据状态

在Android开发旅途中,经常会遇到系统控件无法满足我们的视觉,交互效果,这个时候我们常常需要自己自定义控件来满足我们的需求。在这个开发探索过程中,我们不可避免得遇到View要保存状态信...

shzwork
20分钟前
3
0
请问AD603AQ和AD603AR有什么区别?

  AD603AQ和AD603AR只是在封装上的区别,前者是双列直插式,后者是贴片式,AD603A系列的温度都是在—40摄氏度到+85摄氏度之间,AD603还有一个系列是AD603S,它的温度是在—55摄氏度到+125摄...

仙溪
21分钟前
4
0
Linux /etc/profile 配置文件修改

1. 执行命令: vi /etc/profile 去类似windows 配置环境变量, 2.修改完,立即生效命令: source /etc/profile

kuchawyz
22分钟前
4
0
对于小白来说素描怎么入门?怎么学习?

素描初学者怎样入门?初学者怎样才能画好素描绘画?画好素描绘画有哪些技巧?想必这些问题都是绘画初学者们比较伤脑筋的问题,那么初学者到底怎样才能画好素描绘画呢?今天收集整理了关于素描...

huihuajiaocheng
23分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部