您的位置：首页 > Web前端 > JQuery

使用jquery.validate.js插件进行表单里控件的验证

2015-08-12 15:23 1181 查看
jsp中具体实现的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

<script src="jquery-2.1.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************/
//自定义的方法：
/*
* $.validator.addMethod("af",function(value,element,params)
* * af：增加的方法的名称
* *  function(value,element,params)
* *  value    元素的值
* *  element  元素本身
* *  params  默认值
*/
$.validator.addMethod("cartlength",function(value,element,params){
//alert(value+"  "+element+"   "+params);
var len = value.length;
if(len!=15 && len!=18){
return false;
}
return true;
});

/*************************************************************************/

//验证15位身份证是否符合要求
$.validator.addMethod("cartlength15",function(value,element,params){
var len = value.length;
if(len == 15){
var pattern=/^\d{15}$/;
if(pattern.test(value)){
return false;
}
}
return true;
});
/*************************************************************************/
//验证18位身份证是否符合要求
$.validator.addMethod("cartlength18",function(value,element,params){
var len = value.length;
if(len == 18){
var pattern=/^\d{18}$/;
if(pattern.test(value)){
return false;
}
}
return true;
});
//window.onload();
$(document).ready(function() {
//调用验证方法
$("#exForm").validate({
/*************************************************************************/
//验证规则
rules:{
realname:{     //注意：每个字段是dom元素节点的名称name,不是id
required:true,
maxlength:8,
minlength:2
},
pwd:{
required:true,
minlength:6,
maxlength:16
},
pwd1:{
required:true,
minlength:6,
maxlength:16,
equalTo:("#pwd")
},
gender:{
required:true
},
sex:{
required:true,
range:[26,50]
},
edu:{
required:true
},
birthday:{
required:true,
date:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
cart:{
required:true,
cartlength:"5",
cartlength15:"15",     //使用自定义的方法验证
cartlength18:"18"      //使用自定义的方法验证
}
},
/*************************************************************************/
//显示验证出错的提示信息
messages:{
realname:{
required:"您的姓名不能为空",
maxlength:"您的姓名长度不大于8位字符",
minlength:"您的姓名长度不小于2位字符"
},
pwd:{
required:"您输入的密码不能为空",
minlength:"您输入的密码不能少于6位",
minlength:"您输入的密码不能多于16位"
},
pwd1:{
required:"您确认输入的密码不能为空",
minlength:"您确认输入的密码不能少于6位",
minlength:"您确认输入的密码不能多于16位",
equalTo:"您两次输入的密码不一致"
},
gender:{
/*
*
*/
},
sex:{
required:"年龄不能为空",
range:"年龄介于26到50岁之间"
},
edu:{
required:"请选择您的学历"
},
birthday:{
required:"出生日期不能为空",
date:"出生日期格式不正确"
},
checkbox1:{
//            required:""
},
email:{
required:"电子邮箱 不能为空",
email:"电子邮箱格式不正确"
},
cart:{
required:"身份证不能为空",
cartlength:"身份证长度只能是15位或者18位",
cartlength15:"15位身份证输入有误",
cartlength18:"18位身份证输入有误"
}
}
/*************************************************************************/
});
});

</script>
</head>
<body>
<form action="" id="exForm" name="exForm">
<center>
<h1>验证信息</h1>
<table border="1">
<tr>
<td>真实姓名(不能为空)</td>
<td><input type="text" id="realname" name="realname"/></td>
</tr>
<tr>
<td>请输入您的密码(密码6-16位)</td>
<td><input type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td>请确认输入您的密码(密码6-16位)</td>
<td><input type="password" id="pwd1" name="pwd1"></td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="radio" id="m" name="gender"/>男
<input type="radio" id="f" name="gender"/>女
<label style="display: none;" for="gender" class="error">请选择性别</label>
</td>
</tr>
<tr>
<td>年龄(26-50)</td>
<td><input type="text" id="sex" name="sex"/></td>
</tr>
<tr>
<td>您的学历</td>
<td>
<select id="edu" name="edu">
<option value="">---请选择您的学历--</option>
<option value="a">小学</option>
<option value="b">初中</option>
<option value="c">高中</option>
<option value="d">大学</option>
<option value="e">研究生</option>
<option value="f">硕士生</option>
<option value="g">博士生</option>
</select>
</td>
</tr>
<tr>
<td>出生日期</td>
<td><input type="text" id="birthday" name="birthday"/></td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="q1"/>乒乓球
<input type="checkbox" name="checkbox1" id="q2" value="q2"/>羽毛球
<input type="checkbox" name="checkbox1" id="q3" value="q3"/>篮球
<input type="checkbox" name="checkbox1" id="q4" value="q4"/>旅游
<label style="display: none;" for="checkbox1" class="error">至少选择一个兴趣爱好</label>
</td>
</tr>
<tr>
<td>电子邮箱</td>
<td><input type="text" id="email" name="email"/></td>
</tr>
<tr>
<td>身份证(必须是15位或者18位)</td>
<td><input type="text" id="cart" name="cart"></td>
</tr>
</table>
<input type="submit" value="提交"/>
</center>
</form>
</body>
</html>


实现的效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航