jqueryvalidatejs的基本用法入门.docx
- 文档编号:9083399
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:15
- 大小:20.54KB
jqueryvalidatejs的基本用法入门.docx
《jqueryvalidatejs的基本用法入门.docx》由会员分享,可在线阅读,更多相关《jqueryvalidatejs的基本用法入门.docx(15页珍藏版)》请在冰豆网上搜索。
jqueryvalidatejs的基本用法入门
[转载]jQuery.Validate.js的基本用法入门
jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了。
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。
先贴一个国内某大公司的代码:
JavaScript代码
<scripttype="text/javascript">
functionlang(key){
mylang={
'ls_input_myb':
'请输入您的账户',
'ls_myb_email':
'漫游币账户为邮箱地址',
'ls_login_password':
'请输入您的登录密码',
'ls_password_length':
'密码长度为{0}-{1}位之间',
'ls_input_captcha':
'请输入验证码',
'ls_captcha_length':
'验证码的长度为{0}位',
'ls_account_email':
'账户名为邮箱地址',
'':
''
};
returnmylang[key];
}
</script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#loginForm").validate({
rules:
{
uEmail:
{
required:
true,
email:
true
},
uPassword:
{
required:
true,
rangelength:
[6,30]
}
},
messages:
{
uEmail:
{
required:
lang('ls_input_myb'),
email:
lang('ls_myb_email')
},
uPassword:
{
required:
lang('ls_login_password'),
rangelength:
$.format(lang('ls_password_length'))
}
},
errorPlacement:
function(error,element){
varplacement=$(element.parent("td").parent("tr").next("tr").find("td").get
(1));
placement.text('');
error.appendTo(placement);
},
onkeyup:
false
});
varaccountTipsText=lang('ls_account_email');
$("#uEmail").focus(function(){
if(!
$($(this).parent().parent().next().find('td').get
(1)).text()){
$($(this).parent().parent().next().find('td').get
(1)).html('<spanclass="font_888_8">'+accountTipsText+'</span>');
}
$(this).css('color','#000');
}).focus();});
</script>
我就是从这个例子中开始的,其实这个例子几乎包含了jquery.validate.js的精髓,如果你完整理解了这个代码基本上算是入门了。
想起以前做期货网页在线模拟的时候都自己写代码去判断,真实幼稚死了…………
下面是完整的文章介绍。
默认校验规则
(1)required:
true必输字段
(2)remote:
"check.php"使用ajax方法调用check.php验证输入值
(3)email:
true必须输入正确格式的电子邮件
(4)url:
true必须输入正确格式的网址
(5)date:
true必须输入正确格式的日期
(6)dateISO:
true必须输入正确格式的日期(ISO),例如:
2009-06-23,1998/01/22只验证格式,不验证有效性
(7)number:
true必须输入合法的数字(负数,小数)
(8)digits:
true必须输入整数
(9)creditcard:
必须输入合法的信用卡号
(10)equalTo:
"#field"输入值必须和#field相同
(11)accept:
输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:
5输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:
10输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:
[5,10]输入长度必须介于5和10之间的字符串")(汉字算一个字符)
(15)range:
[5,10]输入值必须介于5和10之间
(16)max:
5输入值不能大于5
(17)min:
10输入值不能小于10
默认的提示
messages:
{
required:
"Thisfieldisrequired.",
remote:
"Pleasefixthisfield.",
email:
"Pleaseenteravalidemailaddress.",
url:
"PleaseenteravalidURL.",
date:
"Pleaseenteravaliddate.",
dateISO:
"Pleaseenteravaliddate(ISO).",
dateDE:
"BittegebenSieeing眉ltigesDatumein.",
number:
"Pleaseenteravalidnumber.",
numberDE:
"BittegebenSieeineNummerein.",
digits:
"Pleaseenteronlydigits",
creditcard:
"Pleaseenteravalidcreditcardnumber.",
equalTo:
"Pleaseenterthesamevalueagain.",
accept:
"Pleaseenteravaluewithavalidextension.",
maxlength:
$.validator.format("Pleaseenternomorethan{0}characters."),
minlength:
$.validator.format("Pleaseenteratleast{0}characters."),
rangelength:
$.validator.format("Pleaseenteravaluebetween{0}and{1}characterslong."),
range:
$.validator.format("Pleaseenteravaluebetween{0}and{1}."),
max:
$.validator.format("Pleaseenteravaluelessthanorequalto{0}."),
min:
$.validator.format("Pleaseenteravaluegreaterthanorequalto{0}.")
},
如需要修改,可在js代码中加入:
jQuery.extend(jQuery.validator.messages,{
required:
"必选字段",
remote:
"请修正该字段",
email:
"请输入正确格式的电子邮件",
url:
"请输入合法的网址",
date:
"请输入合法的日期",
dateISO:
"请输入合法的日期(ISO).",
number:
"请输入合法的数字",
digits:
"只能输入整数",
creditcard:
"请输入合法的信用卡号",
equalTo:
"请再次输入相同的值",
accept:
"请输入拥有合法后缀名的字符串",
maxlength:
jQuery.validator.format("请输入一个长度最多是{0}的字符串"),
minlength:
jQuery.validator.format("请输入一个长度最少是{0}的字符串"),
rangelength:
jQuery.validator.format("请输入一个长度介于{0}和{1}之间的字符串"),
range:
jQuery.validator.format("请输入一个介于{0}和{1}之间的值"),
max:
jQuery.validator.format("请输入一个最大为{0}的值"),
min:
jQuery.validator.format("请输入一个最小为{0}的值")
});
推荐做法,将此文件放入messages_cn.js中,在页面中引入
<scriptsrc="../js/messages_cn.js"type="text/javascript"></script>
使用方式
1.将校验规则写到控件中
<scriptsrc="../js/jquery.js"type="text/javascript"></script>
<scriptsrc="../js/jquery.validate.js"type="text/javascript"></script>
<scriptsrc="./js/jquery.metadata.js"type="text/javascript"></script>
$().ready(function(){
$("#signupForm").validate();
});
<formid="signupForm"method="get"action="">
<labelfor="firstname">Firstname</label>
<inputid="firstname"name="firstname"class="required"/>
<labelfor="email">E-Mail</label>
<inputid="email"name="email"class="requiredemail"/>
<labelfor="password">Password</label>
<inputid="password"name="password"type="password"class="{required:
true,minlength:
5}"/>
<labelfor="confirm_password">确认密码</label>
<inputid="confirm_password"name="confirm_password"type="password"class="{required:
true,minlength:
5,equalTo:
'#password'}"/>
<inputclass="submit"type="submit"value="Submit"/>
</form>
使用class="{}"的方式,必须引入包:
jquery.metadata.js
可以使用如下的方法,修改提示内容:
class="{required:
true,minlength:
5,messages:
{required:
'请输入内容'}}"
在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:
true,minlength:
5,equalTo:
'#password'}"
另外一个方式,使用关键字:
meta(为了元数据使用其他插件你要包装你的验证规则在他们自己的项目中可以用这个特殊的选项)
Tellthevalidationplugintolookinsideavalidate-propertyinmetadataforvalidationrules.
例如:
meta:
"validate"
<inputid="password"name="password"type="password"class="{validate:
{required:
true,minlength:
5}}"/>
再有一种方式:
$.metadata.setType("attr","validate");
这样可以使用validate="{required:
true}"的方式,或者class="required",但class="{required:
true,minlength:
5}"将不起作用
2.将校验规则写到代码中
$().ready(function(){
$("#signupForm").validate({
rules:
{
firstname:
"required",
email:
{
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:
"两次输入密码不一致不一致"
}
}
});
});
//messages处,如果某个控件没有message,将调用默认的信息
<formid="signupForm"method="get"action="">
<labelfor="firstname">Firstname</label>
<inputid="firstname"name="firstname"/>
<labelfor="email">E-Mail</label>
<inputid="email"name="email"/>
<labelfor="password">Password</label>
<inputid="password"name="password"type="password"/>
<labelfor="confirm_password">确认密码</label>
<inputid="confirm_password"name="confirm_password"type="password"/>
<inputclass="submit"type="submit"value="Submit"/>
</form>
required:
true必须有值
required:
"#aa:
checked"表达式的值为真,则需要验证
required:
function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素
常用方法及注意问题
1.用其他方式替代默认的SUBMIT
$().ready(function(){
$("#signupForm").validate({
submitHandler:
function(form){
alert("submitted");
form.submit();
}
});
});
可以设置validate的默认值,写法如下:
$.validator.setDefaults({
submitHandler:
function(form){alert("submitted!
");form.submit();}
});
如果想提交表单,需要使用form.submit()而不要使用$(form).submit()
2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
$().ready(function(){
$("#signupForm").validate({
debug:
true
});
});
如果一个页面中有多个表单,用
$.validator.setDefaults({
debug:
true
})
3.ignore:
忽略某些元素不验证
ignore:
".ignore"
4.errorPlacement:
CallbackDefault:
把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是:
error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement:
function(error,element){
error.appendTo(element.parent());
}
//示例:
<tr>
<tdclass="label"><labelid="lfirstname"for="firstname">FirstName</label></td>
<tdclass="field"><inputid="firstname"name="firstname"type="text"value=""maxlength="100"/></td>
<tdclass="status"></td>
</tr>
<tr>
<tdstyle="padding-right:
5px;">
<inputid="dateformat_eu"name="dateformat"type="radio"value="0"/>
<labelid="ldateformat_eu"for="dateformat_eu">14/02/07</label>
</td>
<tdstyle="padding-left:
5px;">
<inputid="dateformat_am"name="dateformat"type="radio"value="1"/>
<labelid="ldateformat_am"for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<tdclass="label"> </td>
<tdclass="field"colspan="2">
<divid="termswrap">
<inputid="terms"type="checkbox"name="terms"/>
<labelid="lterms"for="terms">IhavereadandaccepttheTermsofUse.</label>
</td>
</tr>
errorPlacement:
function(error,element){
if(element.is(":
radio"))
error.appendTo(element.parent().next().next());
elseif(element.is(":
checkbox"))
error.appendTo(element.next());
else
error.appendTo(element.parent().next());
}
代码的作用是:
一般情况下把错误信息显示在<tdclass="status"></td>中,如果是radio显示在<td></td>中,如果是checkbox显示在内容的后面
errorClass:
StringDefault:
"error"
指定错误提示的css类名,可以自定义错误提示的样式
errorElement:
StringDefault:
"label"
用什么标签标记错误,默认的是label你可以改成em
errorContainer:
Selector
显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大
errorContainer:
"#messageBox1,#messageBox2"
errorLabelContainer:
Selector
把错误信息统一放在一个容器里面。
wrapper:
String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏
errorContainer:
"div.error",
errorLabelContainer:
$("#signupFormdiv.error"),
wrapper:
"li"
设置错误提示的样式,可以增加图标显示
input.error{border:
1pxsolidred;}
l
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jqueryvalidatejs 基本 用法 入门