JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇)
JavaEE学习日志(六十三)
validate插件
基于jQuery开发的一个表单验证插件,对原有的jQuery功能进行扩展,不能独立使用。
validate插件自带的index.html
把很多无用的删除了之后,剩下有用的
注意:按照他的格式进行编写
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
});
</script>
</head>
<body>
<div id="main">
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">I'd like to receive the newsletter</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>
校验规则
实现自己的表单验证
前端
表单验证代码:先不验证身份证,身份证验证在自定义验证模块
注意:
- 先引入jQuery再引入插件
- 如果错误信息显示位置错误,则需要在需要先显示错误信息的地方加上一句话,for中写被验证的标签的name属性
<label for="gender" class="error" style="display: none">性别必须选择一个</label>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的jquery表单校验页面</title>
<style type="text/css">
p{text-align: center;font-size:24px;}
table{margin: 0 auto;border: 0;}
table tr{height:40px;border:0;}
table tr td{padding:0 14px;border:1px solid #999}
.error{color:red}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#empForm").validate({
//表单验证的规则
rules:{
//真实姓名:必须填写
realname:"required",
//登录名:必须填写,长度5-8
username:{
required:true,
rangelength:[5,8]
},
//密码:必须填写,长度6-12
psw:{
required:true,
rangelength:[6,12]
},
//确认密码:必须填写,与密码一致
psw2:{
required:true,
equalTo:"#psw"
},
//性别规则:必须选择一个
gender:"required",
//年龄规则:必填,范围26-50
age:{
required:true,
range:[26,50]
},
//学历规则:必须选一个
edu:"required",
//生日规则:必填,格式正确,合法
birthday:{
required:true,
dateISO:true,
date:true
},
//爱好规则:必选一个
checkbox1:"required",
//邮箱规则:必填,符合规则
email:{
required:true,
email:true
}
},
//验证消息
messages:{
//真实姓名的消息
realname:"请填写真实姓名",
//登录名消息
username:{
required:"必须填写登录名",
rangelength:"用户名长度必须5-8位"
},
//密码消息
psw:{
required:"必须填写密码",
rangelength:"密码长度必须6-12位"
},
//确认密码消息
psw2:{
required:"必须填写密码",
equalTo:"两次密码不一致"
},
//性别消息,可以选择不要
gender:"必须选择性别",
//年龄消息
age:{
required:"必须填写年龄",
range:"年龄必须在26-50之间"
},
//学历消息
edu:"请选择一个学历",
//生日消息
birthday:{
required:"必须填写生日",
dateISO:"日期格式不正确",
date:"日期不存在"
},
//爱好消息
checkbox1:"请选择一个爱好",
//邮箱消息
email:{
required:"必须填写邮箱",
email:"邮箱格式不正确"
}
}
});
});
</script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw" name="psw" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/> 男
<input type="radio" id="gender_female" value="f" name="gender"/> 女
<!--
错误信息,提示在这里
使用标签<label></label>
属性 for为哪个标签做服务
-->
<label for="gender" class="error" style="display: none">性别必须选择一个</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<!--value是空,则插件不选择-->
<option value="">-请选择你的学历-</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物
<label for="checkbox1" class="error" style="display: none;">请选择一个爱好</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table>
</form>
<script type="text/javascript">
</script>
</body>
</html>
自定义验证规则+完整验证代码
标准语法规则,使用jQuery选择符号$调用插件的属性validator
通过属性调用插件函数addMethod()
addMethod()
的参数:
- 规则名
- 回调函数
回调函数的三个参数:
value
:文本框输入的值element
:文本框标签对象param
:规则后面的参数,本质上是个数组。如range:[5,10],它就是5和10
例如:
//自定义身份证号的15位规则---cart15
$.validator.addMethod("cart15",function(value,element,param){
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的jquery表单校验页面</title>
<style type="text/css">
p{text-align: center;font-size:24px;}
table{margin: 0 auto;border: 0;}
table tr{height:40px;border:0;}
table tr td{padding:0 14px;border:1px solid #999}
.error{color:red}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<script type="text/javascript">
//自定义身份证号的15位规则
/*
* 匿名函数中具有三个参数
* value:文本框输入的值
* element:文本框标签对象
* param:规则后面的参数,本质上是个数组。如range:[5,10],它就是5和10
*/
$.validator.addMethod("cart15",function(value,element,param){
//文本框中输入的值进行判断
if(value.length==18){
return true;
}
//定义一个15位的规则,全数字
var reg = /^[0-9]{15}$/;
return reg.test(value);
});
//自定义身份证号的18位规则
$.validator.addMethod("cart18",function(value,element,param){
//文本框中输入的值进行判断
if(value.length==15){
return true;
}
//18位规则,前17个数字,最后一位可以数字也可以是大写X
var reg = /^[0-9]{17}[0-9X]{1}$/;
return reg.test(value);
});
//自定义身份证长度规则
$.validator.addMethod("cartlength",function(value,element,param){
if(value.length==15||value.length==18)
return true;
return false;
});
$(function(){
$("#empForm").validate({
//表单验证的规则
rules:{
//真实姓名:必须填写
realname:"required",
//登录名:必须填写,长度5-8
username:{
required:true,
rangelength:[5,8]
},
//密码:必须填写,长度6-12
psw:{
required:true,
rangelength:[6,12]
},
//确认密码:必须填写,与密码一致
psw2:{
required:true,
equalTo:"#psw"
},
//性别规则:必须选择一个
gender:"required",
//年龄规则:必填,范围26-50
age:{
required:true,
range:[26,50]
},
//学历规则:必须选一个
edu:"required",
//生日规则:必填,格式正确,合法
birthday:{
required:true,
dateISO:true,
date:true
},
//爱好规则:必选一个
checkbox1:"required",
//邮箱规则:必填,符合规则
email:{
required:true,
email:true
},
//身份证号规则:必须写
cart:{
required:true,
cartlength:true,
cart15:true,
cart18:true
}
},
//验证消息
messages:{
//真实姓名的消息
realname:"请填写真实姓名",
//登录名消息
username:{
required:"必须填写登录名",
rangelength:"用户名长度必须5-8位"
},
//密码消息
psw:{
required:"必须填写密码",
rangelength:"密码长度必须6-12位"
},
//确认密码消息
psw2:{
required:"必须填写密码",
equalTo:"两次密码不一致"
},
//性别消息,可以选择不要
gender:"必须选择性别",
//年龄消息
age:{
required:"必须填写年龄",
range:"年龄必须在26-50之间"
},
//学历消息
edu:"请选择一个学历",
//生日消息
birthday:{
required:"必须填写生日",
dateISO:"日期格式不正确",
date:"日期不存在"
},
//爱好消息
checkbox1:"请选择一个爱好",
//邮箱消息
email:{
required:"必须填写邮箱",
email:"邮箱格式不正确"
},
//身份证消息
cart:{
required:"必须填写身份证",
cartlength:"身份证号长度不正确",
cart15:"15位身份证格式错误",
cart18:"18位身份证格式错误"
}
}
});
});
</script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw" name="psw" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/> 男
<input type="radio" id="gender_female" value="f" name="gender"/> 女
<!--
错误信息,提示在这里
使用标签<label></label>
属性 for为哪个标签做服务
-->
<label for="gender" class="error" style="display: none">性别必须选择一个</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<!--value是空,则插件不选择-->
<option value="">-请选择你的学历-</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物
<label for="checkbox1" class="error" style="display: none;">请选择一个爱好</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="cart" name="cart" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table>
</form>
<script type="text/javascript">
</script>
</body>
</html>