validate插件 --- 表单校验
validate插件：
validate是已封装好的第三方工具，用于表单校验
使用步骤：
1.导入jquery.js
2.导入validate.js
3.在页面加载成功后，对表单进行校验 $("选择器").validate()
4.在validate中编写校验规则
$("选择器").validate({
rules:{};
messages:{}
});
默认校验规则：
validate使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<!--validate校验库-->
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<!--国际化库，中文提示-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script type="text/javascript">
$(function(){
$("#formId").validate({
rules:{
//通过字段的name属性校验
username:"required",
//字段的name属性：{校验器："值",校验器:"值"}
password:{
required:true,
digits:true
},
repassword:{
equalTo:"[name='password']",
},
zuixiaozhi:{
min:8,
},
shuzhiqujian:{
range:[3,5],
}
},
messages:{
username:"用户名不为空",
password:{
required:"密码不为空",
digits:"密码只能为数字"
},
repassword:{
equalTo:"两次输入内容不一致"
},
zuixiaozhi:{
//动态获取min的值
min:"请输入大于{0}的数",
},
shuzhiqujian:{
range:"请输入{0}-{1}之间的数"
}
}
})
})
</script>
</head>
<body>
<form id="formId" action="">
必填：<input type="text" name="username"/> <br/>
必填数字：<input type="text" name="password"/> <br />
必填重复：<input type="text" name="repassword"/> <br />
最小值：<input type="text" name="zuixiaozhi"/> <br />
区间：<input type="text" name="shuzhiqujian"/> <br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
表单校验：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#formid").validate({
rules:{
username:{
required:true,
},
password:{
rangelength:[3,6],
required:true,
},
repassword:{
equalTo:"#password",
},
email:"email",
sex:"required",
},
messages:{
username:{
required:"用户名不为空",
},
password:{
required:"密码不为空",
rangelength:"长度为{0}-{1}区间",
},
repassword:{
equalTo:"两次输入密码不一致",
}
},
})
})
</script>
<style>
</style>
<body>
<form action="#" method="get" id="formid">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="3">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="80%"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="repassword"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked="checked"> 男
<input type="radio" name="sex" value="女" />女
<!--<label for="sex" class="error"></label>-->
<label for="sex" class="error"></label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
