<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>表单验证插件</title>
<scriptsrc="jqTest/jquery-3.2.1.js"></script>
<scriptsrc="jqTest/dist/jquery.validate.js"></script>
<scriptsrc="jqTest/dist/localization/messages_zh.js"></script>
<style>
/*.error{*/
/*color:red;*/
/*}*/
form>p>span{
display:block;
color:red;
}
</style>
</head>
<body>
<formaction="#"id="testForm">
<p>
用户名：
<inputtype="text"name="username"/>
<spanid="userError"></span>
</p>
<p>
手机号：
<inputtype="text"name="tel"/>
<spanid="telError"></span>
</p>
<p>
电子邮箱：
<inputtype="text"name="email"/>
<spanid="emailError"></span>
</p>
</form>
</body>
<scripttype="text/javascript">
$("#testForm").validate(
{
/*自定义验证规则*/
rules:{
username:{
required:true
},
email:{
required:true,
email:true
},
tel:{
required:true,
isMobile:true
}
},
messages:{
username:{
required:"请输入您的用户名！！！"
},
//email:"请正确输入邮箱格式!!!",
email:{
required:"请输入邮箱!!!",
email:"请正确输入邮箱格式!!!",
},
//tel:"请输入手机号!!!"
tel:{
required:"请输入手机号!!!",
}
},
/*错误提示位置*/
errorPlacement:function(error,element){
if(element.is('input[name="username"]')){
error.appendTo('#userError');
}elseif(element.is('input[name="email"]')){
error.appendTo("#emailError");
}elseif(element.is('input[name="tel"]')){
error.appendTo("#telError");
}
}
});
//自定义的验证方法
jQuery.validator.addMethod("isMobile",function(value,element){
varlength=value.length;
varregPhone=/^1([3578]\d|4[57])\d{8}$/;
returnthis.optional(element)||(length==11&®Phone.test(value));
},"请正确填写您的手机号码");
</script>
</html>
rules是指包含有什么样的检验规则
这里的username在表单上input的name属性值
而里面的required：true是指校验规则
其他地方同理
messages是指要有怎样的提示信息
这里的username在表单上input的name属性值
而里面的required："请输入您的用户名！！！"是指自己所写的校验规则
其他地方同理
errorPlacement是指错误提示位置
error指的是messages中的提示信息
element.is()方法匹配表单元素
6027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
