JavaEE学习日志(六十三): validate插件,完整表单验证代码,自定义验证规则

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"/>&nbsp;&nbsp;&nbsp;
				    <input  type="radio" id="gender_female" value="f" name="gender"/>&nbsp;<!--
				    	错误信息,提示在这里
				    	使用标签<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"/>&nbsp;乒乓球 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq2" value="1" />&nbsp;羽毛球 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq3" value="2" />&nbsp;上网 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq4" value="3" />&nbsp;旅游 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq5" value="4" />&nbsp;购物 &nbsp;
		          <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"/>&nbsp;&nbsp;&nbsp;
				    <input  type="radio" id="gender_female" value="f" name="gender"/>&nbsp;<!--
				    	错误信息,提示在这里
				    	使用标签<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"/>&nbsp;乒乓球 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq2" value="1" />&nbsp;羽毛球 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq3" value="2" />&nbsp;上网 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq4" value="3" />&nbsp;旅游 &nbsp;
		          <input type="checkbox" name="checkbox1" id="qq5" value="4" />&nbsp;购物 &nbsp;
		          <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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值