6.8日音讯,Validation范例及详解。Validation在应用中还是非常好用的,目前来看,它的用法也是越来越普及,由于它的语法简单、操作效率高,现在已经延伸到网页制作的各个角落,在此
邯郸网站建设首创网络小编给大家说一下,它的用法和实际操作步骤,以供大家学习,查询。
1/**
2*@authorming
3*/
4$(document).ready(function(){
5
6/*设置默认属性*/
7$.validator.setDefaults({
8submitHandler:function(form){
9form.submit();
10}
11});
12
13//字符验证
14jQuery.validator.addMethod(“stringCheck“,function(value,element){
15returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value);
16},“只能包括中文字、英文字母、数字和下划线“);
17
18//中文字两个字节
19jQuery.validator.addMethod(“byteRangeLength“,function(value,element,param){
20varlength=value.length;
21for(vari=0;i<value.length;i++){
22if(value.charCodeAt(i)>127){
23length++;
24}
25}
26returnthis.optional(element)||(length>=param[0]&&length<=param[1]);
27},“请确保输入的值在3-15个字节之间(一个中文字算2个字节)“);
28
29//身份证号码验证
30jQuery.validator.addMethod(“isIdCardNo“,function(value,element){
31returnthis.optional(element)||isIdCardNo(value);
32},“请正确输入您的身份证号码“);
33
34//手机号码验证
35jQuery.validator.addMethod(“isMobile“,function(value,element){
36varlength=value.length;
37varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
38returnthis.optional(element)||(length==11&&mobile.test(value));
39},“请正确填写您的手机号码“);
40
41//电话号码验证
42jQuery.validator.addMethod(“isTel“,function(value,element){
43vartel=/^\d{3,4}-?\d{7,9}$/;//电话号码格式010-12345678
44returnthis.optional(element)||(tel.test(value));
45},“请正确填写您的电话号码“);
46
47//联系电话(手机/电话皆可)验证
48jQuery.validator.addMethod(“isPhone“,function(value,element){
49varlength=value.length;
50varmobile=/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
51vartel=/^\d{3,4}-?\d{7,9}$/;
52returnthis.optional(element)||(tel.test(value)||mobile.test(value));
53
54},“请正确填写您的联系电话“);
55
56//邮政编码验证
57jQuery.validator.addMethod(“isZipCode“,function(value,element){
58vartel=/^[0-9]{6}$/;
59returnthis.optional(element)||(tel.test(value));
60},“请正确填写您的邮政编码“);
61
62//开始验证
63$(‘#submitForm‘).validate({
64/*设置验证规则*/
65rules:{
66username:{
67required:true,
68stringCheck:true,
69byteRangeLength:[3,15]
70},
71email:{
72required:true,
73email:true
74},
75phone:{
76required:true,
77isPhone:true
78},
79address:{
80required:true,
81stringCheck:true,
82byteRangeLength:[3,100]
83}
84},
85
86/*设置错误信息*/
87messages:{
88username:{
89required:“请填写用户名“,
90stringCheck:“用户名只能包括中文字、英文字母、数字和下划线“,
91byteRangeLength:“用户名必须在3-15个字符之间(一个中文字算2个字符)“
92},
93email:{
94required:“请输入一个Email地址“,
95email:“请输入一个有效的Email地址“
96},
97phone:{
98required:“请输入您的联系电话“,
99isPhone:“请输入一个有效的联系电话“
100},
101address:{
102required:“请输入您的联系地址“,
103stringCheck:“请正确输入您的联系地址“,
104byteRangeLength:“请详实您的联系地址以便于我们联系您“
105}
106},
107
108/*设置验证触发事件*/
109focusInvalid:false,
110onkeyup:false,
111
112/*设置错误信息提示DOM*/
113errorPlacement:function(error,element){
114error.appendTo(element.parent());
115},
116
117});
118
119});
测试页index.html
7<scriptsrc=”lib/jquery/jquery-1.3.2.min.js”></script>
8<scripttype=”text/javascript”src=”lib/jquery/jquery.validate.js”mce_src=”lib/jquery/jquery.validate.js”></script>
9<scripttype=”text/javascript”src=”lib/jquery/messages_cn.js”></script>
10<scripttype=”text/javascript”src=”lib/jquery/formValidatorClass.js”></script>
11<styletype=”text/css”>
12
13*{
14font-family:Verdana;
15font-size:96%;
16}
17label{
18width:10em;
19float:left;
20}
21label.error{
22float:none;
23color:red;
24padding-left:.5em;
25vertical-align:top;
26}
27p{
28clear:both;
29}
30.submit{
31margin-left:12em;
32}
33em{
34font-weight:bold;
35padding-right:1em;
36vertical-align:top;
37}
38
39</style>
40</head>
41<body>
42<formclass=”submitForm”id=”submitForm”method=”get”action=”">
43<fieldset>
44<legend>表单验证</legend>
45<p>
46<labelfor=”username”>用户名</label>
47<em>*</em><inputid=”userName”name=”username”size=”25″/>
48</p>
49<p>
50<labelfor=”email”>E-Mail</label>
51<em>*</em><inputid=”email”name=”email”size=”25″/>
52</p>
53<p>
54<labelfor=”phone”>联系电话</label>
55<em>*</em><inputid=”phone”name=”phone”size=”25″value=”"/>
56</p>
57<p>
58<labelfor=”address”>地址</label>
59<em>*</em><inputid=”address”name=”address”size=”22″>
60</p>
61<inputclass=”submit”type=”submit”value=”提交”/>
62</p>
在实际的用法当中,可能会有各种更好的用法,只要大家不断的实践,勇于创新,把新的知识巩固和学习好,相信新的用法也是在不知不觉中得出来。