jQuery

目录

jQuery Validator校验器

1.引入相关插件

2.绑定校验表单

3.内置校验规则

4.自定义校验规则

5.Ajax异步校验

6.表单重置

7.自定义样式

---

jQuery Validator校验器

1.引入相关插件

<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>

2.绑定校验表单

$('form:first').validate({
    //校验规则
    rules: {
        //表单中属性名称
        name: {
            //必填
            required: true,
            //最大长度
            maxlength: 5
        }
    },
    //校验信息
    messages: {
        //表单中属性名称
        name: {
            required: "姓名不能为空",
            maxlength: "姓名最多5位"
        }
    }
});

3.内置校验规则

* required:     "必选字段",
remote:     "请修正该字段",
* email:        "请输入正确格式的电子邮件",
url:        "请输入合法的网址",
* date:         "请输入合法的日期",
* number:   "请输入合法的数字",
* digits:   "只能输入整数",
creditcard:  "请输入合法的信用卡号",
* equalTo:  "请再次输入相同的值",
accept:     "请输入拥有合法后缀名的字符串",
​
* maxlength:    "请输入一个长度最多是 {0} 的字符串",
* minlength:    "请输入一个长度最少是 {0} 的字符串",
* rangelength: "请输入一个长度介于 {0} 和 {1} 之间的字符串",
​
* range:        "请输入一个介于 {0} 和 {1} 之间的值",
* max:      "请输入一个最大为 {0} 的值",
* min:      "请输入一个最小为 {0} 的值"

4.自定义校验规则

// 中文姓名
jQuery.validator.addMethod("chineseName", function(value, element) {
    let pattern = /^[\u4E00-\u9FA5]{1,5}$/;
    return this.optional(element) || (pattern.test(value));
}, "请正确填写您的名称");
​
// 字符验证
jQuery.validator.addMethod("stringCheck", fun ction(value, element) {
    return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
​
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    let length = value.length;
    for(let i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
    return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
​
// 身份证号码验证
$.validator.addMethod("isCard", function(value, element) {
                let isIdCardNo = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
                return this.optional(element) || (isIdCardNo.test(value));
            }, "请正确输入您的身份证号码");
​
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
    let length = value.length;
    let mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
​
// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
    let tel = /^d{3,4}-?d{7,9}$/;    //电话号码格式010-12345678
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
​
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
    let length = value.length;
    let mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
    let tel = /^d{3,4}-?d{7,9}$/;
    return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
​
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
    let tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

5.Ajax异步校验

remote: {
    url: "url",                 //后台处理程序
    type: "post",               //数据发送方式
    data: {                     //要传递的数据
       username: function() {
           return $("#username").val();
       }
    }
}
远程地址只能返回 "true" 或 "false"，不能有其它输出

6.表单重置

var validator = $("form:first").validate({
    submitHandler:function(form){
        alert("submitted");   
        form.submit();
    }    
});
$("#reset").click(function() {
    validator.resetForm();
});

7.自定义样式

<style>
input.error{
  border: 2px dashed red;
}
label.error {
  color: red;
}
</style>

//错误提示位置 errorPlacement:function (error,element){ error.appendTo(element.parent());