jQuery Validate插件验证

小白加菜鸡

于 2020-07-02 23:36:45 发布

阅读量118

点赞数

文章标签： js jquery web javascript

本文链接：https://blog.csdn.net/jia_yadong/article/details/107095293

版权

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件.
导入 js 库

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>

在这里插入图片描述
语法格式

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<form id="myform">......</form>
<script>
//选中表单 调用validate()方法
$("#myform").validate({
  	rules:{
		//校验规则
	},
	messages:{
		//自定义错误消息中文提示
	},
	submitHandler:function(){
		//只有全部验证都通过，才会执行这部分代码
		$.ajax({});//或者使用form.submit();
	}
});</script>

自定义语法规则


	jQuery.validator.addMethod(
	//给规则起个名字
	name,
	//编写使用正则表达式验证的代码
	function(value, element){
	},
	//编写错误提示信息
	message
)

常用规则
序号规则描述
1 required:true 必须输入的字段。
2 remote:“check.php” 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输之入长度必须介于 5 和 10间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
案例

<%@ 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>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.validate.js"></script>
<script type="text/javascript">
	$(function() {
		validate验证
		//自定义验证规则
		$.validator.addMethod(
			"zhongwen",
			function(value) {
				var a=/^[\u2E80-\u9FFF]+$/;
				return a.test(value);
			},
			"请输入中文"
		
		)
		//选中表单 调用validate()方法
		$("form").validate({
			rules:{
				yname:{
					zhongwen:true,
					required:true,
					rangelength:[3,5]
				},
				sex:{
					required:true,
				},
				birth:{
					required:true,
					dateISO:true,
				},
				hobby:{
					required:true,
				},
				
			},
			messages:{
				yname:{
					required:"<font style='color: red'>姓名不能为空</font>",
					rangelength:"<font style='color:red'>长度3~5位</font>",
				},
				sex:{
					required:"<font style='color:red'>性别不能为空</font>",
				},	
				birth:{
					required:"<font style='color:red'>生日不能为空</font>",
					dateISO:"<font style='color:red'>生日格式不正确</font>",
				},
				hobby:{
					required:"<font style='color:red'>爱好不能为空</font>",
				},
			},
			 submitHandler:function(){
				$.post("staff?action=add", $("form").serialize(), function(i) {
					if(i>0){
						alert("添加成功");
						location="getall.jsp";
					}
				}, "text")
				 
				 
			 }
			
			
		})
	})


</script>
</head>
<body>
	<form>
	姓名:	<input type="text" name="yname"><br>
	性别:
		<input type="radio" value="男" name="sex">男
		<input type="radio" value="女" name="sex">女	<label for="sex" class="error"></label><br>
	生日:	<input type="text" name="birth"><br>
	爱好:
		<input type="checkbox" value="旅游" name="hobby" >旅游
		<input type="checkbox" value="读书" name="hobby" >读书
		<input type="checkbox" value="音乐" name="hobby" >音乐
		<input type="checkbox" value="运动" name="hobby" >运动
		<input type="checkbox" value="美食" name="hobby" >美食   <label for="hobby" class="error"></label><br>
	部门:
		<select name="bname">
			
		</select><br>	
		<input type="submit" value="增加">
	</form>
</body>
</html>

小白加菜鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Validate插件验证

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件.导入 js 库<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script><script type
复制链接

扫一扫