前端基础 - 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>

[jQuery] 前端基础 - JQuery 简单的表单校验器

相关帖子

Java 关于递归的调用机制精细解读

Java实现单链表SingleLinkedList增删改查及反转逆序等

快速校验实体类时,@Valid,@Validated,@NotNull注解无效的解决

@Valid 校验无效,BindingResult未获得错误的解决

Linux以form表单形式上传文件讲解

刷脸认证如何实现人脸又快又准完成校验？

如何在 Linux 上设置古老又简单的 TFTP 服务器

sha1校验工具使用方法教程

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

影者东升 LV4