目录
2 编写form表单给form取id 然后给每个要验证的组件一系列标签设置name属性因为插件只对name属性进行判断
一,使用步骤
思维导图
1 将下载好的form表单插件复制到项目js文件夹里
2 引入到html页面中
要注意的点 :
1 要引入的插件一定务必正确不能错
2 如果要引入jQuery文件库的话 jQuery文件库一定要比插件要先引入 插件是基于jQuery库的
3 jQueryValidate规则图
二,如何用插件来验证form表单
1 将插件与jQuery文件库引入到html页面中
一定要注意顺序问题 插件基于jQuery文件库 所有jQuery文件库在前插件在后
2 编写form表单给form取id 然后给每个要验证的组件一系列标签设置name属性因为插件只对name属性进行判断
<form id="forms">
<div>
<label>账户:<input type="text" name="uname" /></label>
</div>
<div>
<label>密码:<input type="password" name="upwd" id="pwd"/></label>
</div>
<div>
<label>确认密码:<input type="password" name="uqrpwd" /></label>
</div>
<div>
<label>年龄:<input type="text" name="uage" /></label>
</div>
</form>
给密码设置id是因为插件的内定equalTo : "传的是#id" (意思是指和id保持一样的值)
3 编写jQuery代码来进行表单验证
$(function(){
$("#forms").validate({
/* 编写规则 */
rules:{
/* 判断账号规则 */
uname : {
required:true,//非空
minlength : 5//长度最少在五位
},
/* 判断密码规则 */
upwd : {
required : true,//非空
minlength : 5,//长度最少在五位
},
/* 判断确认密码规则 */
uqrpwd : {
required : true,//非空
equalTo : "#pwd"
},
/* 判断年龄规则 */
uage : {
required : true,//非空
digits : true,//必须输入整数
range : [18,100]//必须是数值18到100
}
},
/* 编写提示规则 */
messages:{
/* 提示账号信息 */
uname : {
required:"账户不能为空",//非空
minlength : "账户长度最低在五位"//长度最少在五位
},
/* 提示密码信息 */
upwd : {
required : "密码不能为空",//非空
minlength : "密码长度最低在五位",//长度最少在五位
},
/* 编写确认密码提示 */
uqrpwd : {
required : "确认密码不能为空",//非空
equalTo : "两次密码不一致"
},
/* 编写年龄提示 */
uage : {
required : "年龄不能为空",//非空
digits : "年龄必须是整数",//必须输入整数
range : "年龄必须18-100岁之间"//必须是数值18到100
}
}
/* 尾部 */
})
})
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插件form表单验证</title>
<!-- 引入jQuery文件库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入插件表单验证 -->
<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#forms label.error{
color: red;
}
</style>
<script type="text/javascript">
$(function(){
$("#forms").validate({
/* 编写规则 */
rules:{
/* 判断账号规则 */
uname : {
required:true,//非空
minlength : 5//长度最少在五位
},
/* 判断密码规则 */
upwd : {
required : true,//非空
minlength : 5,//长度最少在五位
},
/* 判断确认密码规则 */
uqrpwd : {
required : true,//非空
equalTo : "#pwd"
},
/* 判断年龄规则 */
uage : {
required : true,//非空
digits : true,//必须输入整数
range : [18,100]//必须是数值18到100
}
},
/* 编写提示规则 */
messages:{
/* 提示账号信息 */
uname : {
required:"账户不能为空",//非空
minlength : "账户长度最低在五位"//长度最少在五位
},
/* 提示密码信息 */
upwd : {
required : "密码不能为空",//非空
minlength : "密码长度最低在五位",//长度最少在五位
},
/* 编写确认密码提示 */
uqrpwd : {
required : "确认密码不能为空",//非空
equalTo : "两次密码不一致"
},
/* 编写年龄提示 */
uage : {
required : "年龄不能为空",//非空
digits : "年龄必须是整数",//必须输入整数
range : "年龄必须18-100岁之间"//必须是数值18到100
}
}
/* 尾部 */
})
})
</script>
</head>
<body>
<form id="forms">
<div>
<label>账户:<input type="text" name="uname" /></label>
</div>
<div>
<label>密码:<input type="password" name="upwd" id="pwd"/></label>
</div>
<div>
<label>确认密码:<input type="password" name="uqrpwd" /></label>
</div>
<div>
<label>年龄:<input type="text" name="uage" /></label>
</div>
</form>
</body>
</html>
效果图
哈哈哈 小辉不一定写的很规范很简介很让网友们看得很懂 但是很尽力很努力了 啊哈哈哈 我会继续努力的 heiha.