程序博客网 > 淘宝权重的因素

JQuery Validate学习笔记

来源：互联网 发布：淘宝权重的因素 编辑：程序博客网 时间：2024/06/06 03:57
在HTML中导入JQuery validate的插件包（官网：http://jqueryvalidation.org）。


<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>


一、validate（）方法

rules里的常用验证规则：

    1.required：输入字段是否为必须。

    2.remote（调用形式，remote：“check.php”）：以Ajax形式调用验证方法进行验证。

    3.email：输入字段是否为正确的电子邮件格式。

    4.url：输入字段是否为正确的网址格式。

    5.date：输入字段是否为正确日期格式。

    6.dateISO：输入字段是否为”2014-11-12“格式，但不验证日期是否有效。

    7.number：输入字段是否为合法数字。

    8.digits：输入字段是否为整数。

    9.creditcard：输入字段是否为合法信用卡号。

    10.equalTo（调用格式，equalTo：选择器）：输入字段是否与选择器的字段相等。

    11.accept：上传文件格式是否匹配，一般一后缀名作为判定标准。

    12.maxlength（调用格式，maxlength:数字）：输入字段最大长度是否为特定长度，汉字记为一个字符串。

    13.minlength（调用格式，minlength:数字）：输入字段最小长度是否为特定长度，汉字记为一个字符串。

    14.rangelength（调用格式，rangelength:[数字1,数字2]）：输入字段长度是否介于数字1和数字2之间，数字1小于数字2。

    15.range（调用格式，range:[数字1,数字2]）：输入值是否介于数字1和数字2之间，数字1小于数字2。

    16.max（调用格式，max:数字1）：输入值是否小于数字1（最大为数字1）。

    17.min（调用格式，min:数字1）：输入值是否大于数字1（最小为数字2）。

    18.extension（调用格式，extension: "文件拓展名|文件拓展名"）：上传元素是否符合相应后缀名，默认为，extension: "png|?jpeg|gif"。

    19.require_from_group（调用格式，require_from_group: [数字, 元素组群]）：验证一组元素是否添加够一定数量。

    20.phoneUS：验证是否是一个合法的美国电话号码。

    规则中冒号右边的true、false、数值等都可以换成拥有这样值的表达式或方法用来进行验证：

    required:"#aa:checked" 表达式的值为真，则需要验证。

    required:function(){} 返回为真，表示需要验证。

    案例（remote验证）：

remote: "check-email.php"

    案例（remote验证）：

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式  
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

    案例（accept文件类型验证）：

$( "#myform" ).validate({
rules: {
  field:{
    required: true,
    accept: "audio/*"
    }
  }
});

    案例（extension文件后缀名验证）：

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      extension: "xls|csv"
    }
  }
});
    案例（require_from_group验证至少填写一个）：

<body>
<formid="myform">
<labelfor="mobile_phone">Mobile phone:</label>
<inputclass="left phone-group"id="mobile_phone"name="mobile_phone">
<br/>
<labelfor="home_phone">Home phone:</label>
<inputclass="left phone-group"id="home_phone"name="home_phone">
<br/>
<labelfor="work_phone">Work phone:</label>
<inputclass="left phone-group"id="Work_phone"name="work_phone">
<br/>
<inputtype="submit"value="Validate!">
</form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
mobile_phone: {
require_from_group: [1,".phone-group"]
},
home_phone: {
require_from_group: [1,".phone-group"]
},
work_phone: {
require_from_group: [1,".phone-group"]
}
}
});
</script>
</body>



message规则：

相对于每一个rules的规则，都会有相应的message。默认的message：

    required: "This field is required.",

    remote: "Please fix this field.",

    email: "Please enter a valid email address.",

    url: "Please enter a valid URL.",

    date: "Please enter a valid date.",

    dateISO: "Please enter a valid date (ISO).",

    dateDE: "Bitte geben Sie ein gültiges Datum ein.",

    number: "Please enter a valid number.",

    numberDE: "Bitte geben Sie eine Nummer ein.",

    digits: "Please enter only digits",

    creditcard: "Please enter a valid credit card number.",

    equalTo: "Please enter the same value again.",

    accept: "Please enter a value with a valid extension.",

    maxlength: $.validator.format("Please enter no more than {0} characters."),

    minlength: $.validator.format("Please enter at least {0} characters."),

    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),

    range: $.validator.format("Please enter a value between {0} and {1}."),

    max: $.validator.format("Please enter a value less than or equal to {0}."),

    min: $.validator.format("Please enter a value greater than or equal to {0}.")

    如果页面没有为规则编写特定的message，则会返回默认。


案例（validate的页面调用形式）：

$(document).ready(function() {
$("#signupForm").validate({                //要用JQuery的选择器来调用validate方法。
        rules: {                                         //编写过滤规则
   firstname: "required",                        //1.可以直接用字符串“required”，表示此字段为必须。
   email: {
    required: true,                                  //2.同样可以required:true，表示此字段为必须。
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {                                //
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});


案例（validate的js导入调用形式）：

<script src="../js/jquery.validatefunction.js" type="text/javascript"></script>

   首先导入js文件，然后调用validate的方法。

$().ready(function() {
$("#signupForm").validate();
});


submitHandler规则：

替换默认提交方式，进行自定义提交，加入提醒等。

    案例（代替原本submit）：

$().ready(function() {
$("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");  
            form.submit();
        }   
    });
});

    案例（Ajax提交）：

$(".selector").validate({    
submitHandler: function(form)
   {     
      $(form).ajaxSubmit();    
   } 
})

    案例（为提交添加提醒）：

$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});


invalidHandler规则：

无效表单被提交，回调方法。可以自定义回调信息。

    案例（event为自定义事件对象，validator为表单验证器）：

$(".selector").validate({
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors ==1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors +' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
}
});


debug规则：

当值为true时，只检验数据有效性，不进行提交。

    案例（表单验证）：

$().ready(function() {
$("#signupForm").validate({
debug:true
});
});

    案例（全页面验证）：

$.validator.setDefaults({
   debug: true
})


ignore规则，默认为”hidden“：

设定特定元素不需要验证。

    案例：

ignore: ".ignore"    //选择器内容不需要验证。


groups规则：

    案例：

$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") =="fname" || element.attr("name") =="lname" ) {
error.insertAfter("#lastname");
} else {
error.insertAfter(element);
}
}
});


errorPlacement规则：

指定验证信息显示的位置。默认的位置是在验证元素的后面。

    案例：

errorPlacement: function(error, element) { 
    error.appendTo(element.parent()); 
}


errorClass规则：

指定验证错误后，提示信息的class属性，用以自定义提示信息的样式。默认为”error“。

    案例：

$(".selector").validate({
errorClass:"invalid"
})


errorElement规则：

指定标记验证提示信息的标签，默认为”label‘，可以设为“em”。

    案例：

$(".selector").validate
errorElement:"em"
})


errorContainer规则：

根据验证结果显示或者隐藏错误提示容器元素。


errorLabelContainer规则：

指定验证失败提示信息的存放容器。

    案例：

$("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}
})


wrapper规则：

指定元素将上面errorElement规则指定的信息存放标签包起来。

    案例：

$(".selector").validate({
wrapper:"li"
})


success规则：

指定验证成功后的下一步操作。可以是函数，或者字符串（字符串被当做css类来处理）。


onsubmit规则：

默认为true，则在提交时验证，否则在另外的触发条件下验证。

    案例：

$(".selector").validate({
onsubmit:false
})


onfocusout规则：

默认为true，则在失去焦点时验证，否则在另外的触发条件下验证。

    案例：

$(".selector").validate({
onfocusout:false
})


onkeyup规则：

默认为true，则在按键按下时验证，否则在另外的触发条件下验证。

    案例：

$(".selector").validate({
onkeyup:false
})


onclick规则：

默认为true，则在点击事件中验证，否则在另外的触发条件下验证。

    案例：

$(".selector").validate({
onclick:false
})


focusInvalid规则：

默认为true，提交时验证未通过的第一个元素获得焦点。

    案例：

$(".selector").validate({
focusInvalid:false
})


focusCleanup规则：

默认为false，在验证未通过元素获得焦点时，隐藏错误信息提示。避免和focusInvalid一起使用。

    案例：

$(".selector").validate({
focusCleanup:true
})


showErrors规则：

跟一个函数，可以显示总共有多少个未通过验证的元素。

    案例：

$(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
this.defaultShowErrors();
}
})


highlight规则：

可以给未通过验证的元素加效果、闪烁等。

    案例：

$(".selector").validate({
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id +"]")
.addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id +"]")
.removeClass(errorClass);
}
});


unhighlight规则：

从高亮状态恢复平常，参数与highlight相同。


ignoreTitle规则：

忽略message的标题栏。默认为false。

    案例：

$(".selector").validate({
ignoreTitle: true
});


addMethod规则（添加自定义验证）：

调用方式，addMethod：name, method, message。第一个参数为验证器名字，第二个为验证函数、第三个为验证返回信息。

    案例：

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );  
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

    案例：

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


二、rules组方法

.rules()：读取验证规则。

.rules("add",rules)：添加验证规则。

.rules("remove",rules)：移除验证规则，不指定rules，将移除所有规则。

    案例（添加规则，最小长度为2）：

$( "#myinput" ).rules("add", {
minlength: 2
});

    案例（添加规则，并自定义message）：

$( "#myinput" ).rules("add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});

    案例（删除所有验证规则）：

$( "#myinput" ).rules( "remove" );

    案例（删除指定验证规则，根据验证规则名指定）：

$( "#myinput" ).rules("remove","min max" );

   

rules规则指定形式：

    1.验证规则如果没有参数，可以直接写在验证元素的class属性中。

    2.带参数的验证规则，可以作为验证元素属性值来验证。

    3.都以metadata形式调用。

    4.都以validate的rules形式调用。


三、valid（）方法

验证元素中的所有需要验证子元素，是否合法有效。

    案例：

<body>
<formid="myform">
<formid="myform">
<inputtype="text"name="name"required>
<br>
<buttontype="button">Validate!</button>
</form>
</form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
var form = $("#myform" );
form.validate();
$( "button" ).click(function() {
alert( "Valid: " + form.valid() );
});
</script>
</body>


四、关于选择框的验证

redio、checkbox、select选择验证：

    1.radio 的 required 表示必须选中一个。

    案例（redio必须选一个）：

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

    2.checkbox 的 required 表示必须选中。

    案例（checkbox必须选中）：

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

    3.checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

    案例（checkbox限定选定个数）：

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

    4.select 的 required 表示选中的 value 不能为空。

    案例（select选择不为空）：

<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>
    5.select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。 

    案例（select多选限定）：

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>


validate包含的选择验证

1、:unchecked Selector

选择所有未被选中的元素。

    案例：

<body>
<formid="myform">
<form>
<inputtype="checkbox"name="newsletter"checked="checked"value="Hourly" />
<inputtype="checkbox"name="newsletter"value="Daily" />
<inputtype="checkbox"name="newsletter"value="Weekly" />
<inputtype="checkbox"name="newsletter"checked="checked"value="Monthly" />
<inputtype="checkbox"name="newsletter"value="Yearly" />
</form>
<div></div>
</form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
functioncountUnchecked() {
var n = $("input:unchecked" ).length;
$( "div" ).text(n + (n ==1 ?" is" :" are") +" unchecked!" );
}
countUnchecked();
$( ":checkbox" ).click( countUnchecked );
</script>
</body>

2、:filled Selector

选择所有被填充的元素。

    案例：

<body>
<formid="myform">
<div>Mouseover to see the value of each input</div>
<inputvalue=""title='""'>
<inputvalue=" "title='" "'>
<inputvalue="abc"title='"abc"'>
</form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "input:filled" ).css("background-color","#bbbbff" );
</script>
</body>

3、:blank Selector

选择空白的元素。

    案例：

<body>
<formid="myform">
<div>Mouseover to see the value of each input</div>
<inputvalue=""title='""'>
<inputvalue=" "title='" "'>
<inputvalue="abc"title='"abc"'>
</form>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<scriptsrc="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "input:blank" ).css("background-color","#bbbbff" );
</script>
</body>


五、validate方法会返回一个validator的对象，validator提供了一些方法供调用。

1.Validator.form()方法：验证form是否有效，有效返回true，否则为false。

    案例：

var validator = $("#myform" ).validate();
validator.form();

2.Validator.element()方法：验证一个元素是否有效，有效返回true，否则为false。

    案例：

var validator = $("#myform" ).validate();
validator.element( "#myselect" );

3.Validator.resetForm()方法：复位控制表单。

    案例：

var validator = $("#myform" ).validate();
validator.resetForm();

4.Validator.showErrors()：自定义验证错误信息。

    案例：

var validator = $("#myshowErrors" ).validate();
validator.showErrors({
"firstname":"I know that your firstname is Pete, Pete!"
});

5.Validator.numberOfInvalids()： 返回无效元素的数目。

    案例：

var validator = $( "#myform" ).validate({
invalidHandler: function() {
$( "#summary" ).text( validator.numberOfInvalids() + " field(s) are invalid" );
}
});

6.jQuery.validator.addMethod()：添加自定义的验证规则，调用模式，jQuery.validator.addMethod( name, method [, message ] )。

    name，为规则的调用名，必须定义。message，为自定义默认验证信息。

    method，验证具体实现，拥有三个参数：

        1.value：验证元素的值。

        2.element：需要验证的元素。

        3.params：为method指定参数。

    案例（验证给定值是否等于两参数之和）：

jQuery.validator.addMethod("math", function(value, element, params) {
    return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

7.jQuery.validator.format()：以定义形式替换占位符。调用形式，jQuery.validator.format( template, argument, argumentN… )。

    template：定义模板。

    argument：插入的第一个参数或字符串数组。

    argumentN：插入的第n个参数等等。

    案例（format中占位符由模板中“abc”来代替，然后结果为：“abc” is not a valid value。）：

var template = jQuery.validator.format("{0} is not a valid value");
// later, results in 'abc is not a valid value'
alert(template("abc"));

8.jQuery.validator.setDefaults()：为验证器设置默认值。

    案例（将validation的debug设置默认为true）：

jQuery.validator.setDefaults({
debug: true
});

9.jQuery.validator.addClassRules()：定义规则的集合类。

    案例（定义一个验证规则名字为“name”，包含rule原本的几条规则）：

jQuery.validator.addClassRules("name", {
required: true,
minlength: 2
});
    案例（定义一个规则集合，用来验证name和zip）：
jQuery.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
});

0 0
淘宝权重的因素 淘宝权重的因素
原创粉丝点击
热门IT博客
淘宝兼职客服工资淘宝兼职客服工资
大学生网络安全教育ppt大学生网络安全教育ppt
人工智能威胁论是什么
淘宝男装店铺名字
约瑟夫环 c语言链表
好看的网络武侠小说
苹果cms采集
linux mysql socket
维吉尼亚密码解密算法
中国结婚数据
百乐88g钢笔淘宝假货
古装app拍照软件
梦幻西游mac版下载
上瘾网络剧完整版资源
去哪里应聘淘宝客服
驾驶行为大数据分析
淘宝企业店铺保证金
张若昀长相知乎
python 多进程 oracle
mmd导入镜头数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 如果食物中毒怎么办 烟气中毒后怎么办 食物中毒呕吐后怎么办 金属中毒怎么办 化学物质过敏怎么办 闻了有毒气体怎么办 螺丝松了怎么办 手表螺丝拧不开怎么办 螺丝花掉拧不开怎么办 螺丝太紧不下来怎么办 螺丝头拧花了怎么办 自行车严重生锈怎么办 自行车齿轮生锈怎么办 自行车生锈了怎么办 psp变砖怎么办 网络直播冷场怎么办 楼房墙壁渗水怎么办 墙角渗水发霉怎么办 乳胶漆墙面发霉怎么办 没有签合同工伤怎么办 水管裂缝漏水怎么办 苏州休闲卡怎么办 打吊针手肿了怎么办 打吊针手青了怎么办 慢性疾病补助怎么办 吃甘蔗中毒怎么办 甘蔗中毒怎么办 老年人痴呆怎么办 老年痴呆症前兆怎么办 win7玩红警卡死怎么办 win10玩红警卡死怎么办 小米note3死机怎么办 高中生厌学家长怎么办 lsp修复不了怎么办 淘宝不同意退货怎么办 建筑图纸看不懂怎么办 没有业主委员会怎么办 业委会全体辞职怎么办 工程款不好要怎么办 右手股骨头坏死怎么办 买房月供断供怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里