JQuery 简单的表单校验器
需求及导入步骤
- 导入jquery.js文件
- 导入jquery-validate.js文件（jquery的校验器插件）
- 导入messages_zh.js国际化文件
- 对表单进行校验
在页面加载成功后获取表单对象.validate({ rules:{}, //校验规则 messages:{} //自定义提示信息 })
rules写法：
要校验的name属性：{ 校验器1：取值， 校验器2：取值 } 注意：多个校验规则之间 使用,分割
message写法：
要校验的name属性：{ 校验器1："自定义提示信息1"， 校验器2："自定义提示信息2" }
校验器：
required true/false 必填校验
number true/false 数字校验
min 数字 最小值
max 数字 最大值
range 数值区间 [最小值,最大值]
minLength|maxLength|rangLength 最小值|最大值|长度区间
email: email 邮箱校验 @ 1@x
equalTo: jquery对象 重复性校验
案例:
效果图：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="../js/jquery-1.11.0.min.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: { required: true, number: true }, repassword: { equalTo: $("#password") }, email: { email: email } }, messages: { username: { required: "用户名不能为空" }, password: { required: "密码不能为空", number: "密码必须为数字" }, repassword: { equalTo: "两次密码必须一致" }, email: { email: "请输入格式为：*@* 邮箱" } } }) }) </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> 男 <input type="radio" name="sex" value="女" />女 <!--<label for="sex" class="error"></label>--> </td> </tr> <tr> <td>出生日期</td> <td> <input type="date" 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>
