前端基础 - JQuery 简单的表单校验器
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>
文档来源：51CTO技术博客https://blog.51cto.com/u_15294985/2999291
页:
[1]