我们在进行表单验证的时候使用Javascript去校验表单代码过于多，比较繁杂。使用ajax进行异步校验会增加后台的压力，今天我学习到了一种jQuery前台校验的方法，操作十分简单。
1.什么叫做jQuery插件呢？
网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而这些复杂功能的背后实现我们可以不必懂。
2.导入插件的步骤：
(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中
(2) 编写js代码对表单进行验证
插件地址：https://pan.baidu.com/s/1DGD0os9Z6qDkDePx8j6Vnw
插入代码：
<!-- 引入表单校验的jquery插件 -->
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>3.表单验证的格式：
$("form表单的选择器").validate(json数据格式); //键值对 键：值（{}）
4.json数据格式：
{
rules:{
表单项name值:校验规则，
表单项name值:校验规则... ...
},
messages:{
表单项name值:错误提示信息，
表单项name值:错误提示信息... ...
}
}
5.常用校验规则：
注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置
自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>
如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
代码展示：
<label>性别:</label> <inpu type="radio" name="sex" id="sex1" value="male">男 <input
type="radio" name="sex" id="sex2" value="male">女 <label
class="error" for="sex" style="display:none">您没有第三中选择</label><br>6.如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：
自定义校验规则步骤如下：
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
其中： value是校验组件的value值
element是校验组件的节点对象
params是校验规则的参数
7.代码展示：
（1）css代码
为了突出我们的提示语，所以将提示语变红
<style>
.error {
color: red
}
</style>（2）Javascript代码
<script type="text/javascript">
//自定义校验规则
$.validator.addMethod(
//规则的名称
"checkUsername",
//校验的函数
function(value, element, params) {
//定义一个标志
var flag = false;
//value:输入的内容
//element:被校验的元素对象
//params：规则对应的参数值
//目的：对输入的username进行ajax校验
$.ajax({
"async" : false,
"url" : "${pageContext.request.contextPath}/checkUsername",
"data" : {
"username" : value
},
"type" : "POST",
"dataType" : "json",
"success" : function(data) {
flag = data.isExist;
alert(flag);
}
});
//返回false代表该校验器不通过
return flag;
}
);
$(function() {
$("#myform").validate({
rules : {
"username" : {
"required" : true,
"checkUsername" : true
},
"password" : {
"required" : true,
"rangelength" : [ 6, 12 ]
},
"repassword" : {
"required" : true,
"rangelength" : [ 6, 12 ],
"equalTo" : "#password"
//equalTo后面必须跟着id选择器,不能是密码选择器,表示输入的值必须与#password一致
},
"email" : {
"required" : true,
"email" : true
},
"name" : {
"required" : true
},
"sex" : {
"required" : true
},
"birthday" : {
"required" : true
}
},
messages : {
"username" : {
"required" : "用户名不能为空",
"checkUsername" : "用户名已经存在"
},
"password" : {
"required" : "密码不能为空",
"rangelength" : "密码长度必须在6-12位之间"
},
"repassword" : {
"required" : "确认密码不能为空",
"rangelength" : "密码长度必须在6-12位之间",
"equalTo" : "确认密码必须与密码一致"
},
"email" : {
required : "邮箱不能为空",
"email" : "邮箱格式不正确"
},
"name" : {
"required" : "用户姓名不能为空"
},
/* "sex" : {
"required" : "没有第三种选择"
},
当显示的位置不是你想要的位置的时候,在你想显示的位置写一下代码:
<label class="error" for="sex" style="display:none">您没有第三中选择</label>
*/
"birthday" : {
"required" : "请选择您的出生年月"
}
}
});
});
</script>（3）checkUserServlet关键代码
//获得用户名
String username=request.getParameter("username");
System.out.println(username);
//将值传递给service层
UserService service=new UserService();
boolean isExist=service.isExist(username);
String json="{\"isExist\":"+isExist+"}";
response.getWriter().write(json);（4）checkUserDao代码
public static int CheckUsername(String username) {
int row = 0;
// 1.连接数据库
Conn = C3P0Utils.getConnection();
// 2.编写sql语句
String sql = "SELECT COUNT(*)FROM USER WHERE username=?";
// 3.传递sql语句
try {
pstmt = Conn.prepareStatement(sql);
// 4.改变sql参数
pstmt.setString(1, username);
// 5.返回结果
rs= pstmt.executeQuery();
//打印结果集
while(rs.next()){
row=rs.getInt(1);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
C3P0Utils.release(Conn, pstmt, rs);
}
return row;
}8.效果展示：
声明:本代码是自己跟着视频学习的,其中部分文字来源于网路,若有不当之处,请谅解,仅此学习用途.
