Validate 表单验证用法说明

前言Validate 是 jQuery 的一个子插件，该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。该插件捆绑了一套有用的验证方法，同时提供了一个用来编写用户自定义方法的 API。默认使用英语作为错误信息，且已翻译成其他 37 种语言，支持中文错误提示。官网地址：https://jqueryvalidation.org/菜鸟教程地

间歇性悲伤患者

9084人浏览 · 2021-06-24 11:50:19

间歇性悲伤患者 · 2021-06-24 11:50:19 发布

前言

Validate 是 jQuery 的一个子插件，该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。该插件捆绑了一套有用的验证方法，同时提供了一个用来编写用户自定义方法的 API。默认使用英语作为错误信息，且已翻译成其他 37 种语言，支持中文错误提示。

官网地址：https://jqueryvalidation.org/

菜鸟教程地址：http://www.360doc.com/content/17/0726/06/2708086_674167741.shtml

快速上手

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
	<form id="dhjForm">
		年龄：<input type="text" name="age" id="age"/> <br/>
		<input type="submit" name="submit" id="submit" value="提交"/>
	</form>
	<script type="text/javascript">
    $(function () {
        // 表单验证
        var validateForm = $("#dhjForm").validate({
            rules: {
                age: {
					digits: true,      //只能填写数字
					range: [0,100],    //年龄应为0~100 
					required: true,    //必填
				}
            }
        });
    });
  </script>
</body>
</html>

当你输入内容或点击提交都会校验输入的数据是否符合表单验证的要求。

至此，一个简单的 jQuery Validate表单验证的的demo就完成了。下面列表说明了Validate具体支持哪些数据校验。

序号	校验类型	取值	描述说明
1	required	true/false	必填字段，提交的时候校验。
2	remote	url接口地址	用户自定义校验规则，使用ajax方法请求指定的url接口地址，接口返回必须是ture/false。ture表示校验通过，false表示不通过，显示错误提示。
3	email	true/false	必须输入正确格式的电子邮件。
4	url	true/false	必须输入正确格式的网址。
5	date	true/false	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO	true/false	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number	true/false	必须输入合法的数字（负数，小数）。
8	digits	ture/false	必须输入整数。
9	creditcard	true/false	必须输入合法的信用卡号。
10	equalTo	#nodeId	输入的值必须和id为nodeId的值相同。
11	accept	文件类型	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength	num	输入长度最长是 num（汉字算一个字符）。
13	minlength	num	输入长度最短是 num（汉字算一个字符）。
14	rangelength	[minL,maxL]	输入长度必须介于 minL 和 maxL 之间（汉字算一个字符）。
15	range	[min,max]	输入的值转成数字（包括小数）必须介于 5 和 10 之间。
16	max	num	输入的值转成数字（包括小数）不能大于 num。
17	min	num	输入的值转成数字（包括小数）不能小于 num。

Validate进阶一：修改错误提示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
	<form id="dhjForm">
		年龄：<input type="text" name="age" id="age"/> <br/>
		电子邮件：<input type="text" name="email" id="email"/> <br/>
		<input type="submit" name="submit" id="submit" value="提交"/>
	</form>
	<script type="text/javascript">
	// 全局修改Validate错误提示信息，仅当前页有效
	$.extend($.validator.messages, {
		required: "这个为必填字段哦~",
		remote: "自定义校验错误~"
	});
    $(function () {
        // 表单验证
        var validateForm = $("#dhjForm").validate({
            rules: {
                age: {
					digits: true,      //只能填写数字
					range: [0,100],    //年龄应为0~100 
					required: true,    //必填
				},
				email: {
					email: true,      //必须是合法的邮箱地址
					required: true,    //必填
				}
            },
			messages:{
				// 修改年龄错误的提示信息，优先级高于全局错误提示
                age: {
					digits: "只能填写数字哦",
					range: "年龄应为0~100的数字", 
					required: "年龄age必填字段哦~",
				},
				email: {
					email: "邮箱格式错误",
				}
            }
        });
    });
  </script>
</body>
</html>

Validate进阶二：remote用法

// 前端代码片段，remote 和 equalTo用法

<form id="dhjForm">
	用户名：<input type="text" name="username" id="username"/> <br/>
	密码：<input type="password" name="password" id="password"/> <br/>
	重复密码：<input type="password" name="password2" id="password2"/> <br/>
	<input type="submit" name="submit" id="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function () {
	// 表单验证
	var validateForm = $("#dhjForm").validate({
		rules: {
			// rmote用法，用户名调用自定义接口校验
			username: {
				remote: {
					url: "${basePath}/dhj/userManage/checkUsername",   // 自定义接口
					type: "post",
					dataType: "json",
					data: {
						username: function () {
							return $("#username").val();
						}
					}
				}
			},
			// 密码重复校验
			password2: {
				equalTo: "#password"
			}
		},
		messages: {
			username: {
				remote: "用户名已存在！"
			},
			password2:{
				equalTo: "重复密码与原密码不同！"
			}
		}
	});
});
</script>

/**
 * Java后台代码片段，校验用户名唯一
 * @param username 用户名
 */
@PostMapping("dhj/userManage/checkUsername")
@ResponseBody
public boolean checkUsername(String username) {
	int count = userService.queryCountByName(username);
	return count == 0 ? true : false;
}

Validate进阶三：自定义校验类型

Validate虽然内置了很多数据校验类型，且remote允许用户通过接口自定义校验数据，但是其remote自定义接口校验方法对于普通的常用校验来说还是过于复杂。例如：身份证号校验，我们也希望能向内置的校验一样使用，因此，我们可以自定义校验类型。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
<form id="dhjForm">
	手机号：<input type="text" name="phone" id="phone"/> <br/>
	<input type="submit" name="submit" id="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function () {
	// 校验手机号
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var length = value.length;
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请填写正确的手机号码");

	// 表单验证
	var validateForm = $("#dhjForm").validate({
		rules: {
			// 密码重复校验
			phone: {
				isPhone: true
			}
		}
	});
});
</script>
</body>
</html>

其他校验类型举例，更多可以百度。

// 校验IP
jQuery.validator.addMethod("isIp", function(value, element) {
	return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256));
}, "请输入正确的IP地址");

// 校验MAC
jQuery.validator.addMethod("isIp", function(value, element) {
	return this.optional(element) || (/[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}/.test(value));
}, "请输入正确的MAC地址");

// 邮政编码验证
jQuery.validator.addMethod("isPostCode", function(value, element) {
	return this.optional(element) || (/^[0-9]{6}$/.test(value));
}, "请正确填写您的邮政编码");

// 字母数字校验
jQuery.validator.addMethod("isLetAndNum", function(value, element){
	return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和数字");

// 汉字校验
jQuery.validator.addMethod("IsChina", function(value, element){
	return this.optional(element) || (/^[u4e00-u9fa5]+$/.test(value));
}, "请输入汉字");

// 字符验证
jQuery.validator.addMethod("IsChars", function(value, element){
	return this.optional(element) ||/^[u0391-uFFE5w]+$/.test(value);
}, "内容不允许包含特殊符号");

// 必须以特定字符串开头验证
jQuery.validator.addMethod("isBegin", function(value, element, param){
	var begin = new RegExp("^" + param);
	return this.optional(element) || (begin.test(value));
}, $.validator.format("输入的内容必须以 {0} 开头!"));

// 身份证号校验
$(function () {
    jQuery.validator.addMethod("isIdCard", function (value, element){
        return this.optional(element) || isIdCardNo(value);
    },"请输入合法的身份证号码");
});
// 校验身份证号的方法，规则太复杂，抽出成方法
function isIdCardNo(num) {
    var factorArr = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2, 1];
    var parityBit = ["1", "0", "X", "9", "8", "7", "6", "5", "4","3", "2"];
    var varArray= [];
    var lngProduct = 0;
    var intCheckDigit;
    var intStrLen = num.length;
    var idNumber= num;
    //initialize
    if(intStrLen !== 18) {
        return false;
    }
    // check andset value
    for (i = 0;i < intStrLen; i++) {
        varArray[i] = idNumber.charAt(i);
        if ((varArray[i] < '0' || varArray[i]> '9') && (i !== 17)){
            return false;
        } else if (i < 17) {
            varArray[i] = varArray[i] * factorArr[i];
        }
    }

    if(intStrLen === 18) {
        //check date
        var date8 = idNumber.substring(6, 14);
        if (!isDate8(date8)) {
            return false;
        }
        // calculate the sum of the products
        for (i = 0; i < 17; i++) {
            lngProduct = lngProduct + varArray[i];
        }
        // calculate the check digit
        intCheckDigit = parityBit[lngProduct % 11];
        // check last digit
        if (varArray[17] != intCheckDigit) {
            return false;
        }
    }else{
        return false;
    }
    return true;
}
// 18位身份证日期校验
function isDate8(sDate) {
    if(!/^[0-9]{8}$/.test(sDate)) {
        return false;
    }
    var year,month, day;
    year =sDate.substring(0, 4);
    month =sDate.substring(4, 6);
    day =sDate.substring(6, 8);
    var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30,31];
    if (year< 1700 || year > 2500) {
        return false;
    }
    if (((year %4 == 0) && (year % 100 != 0)) ||(year % 400 == 0)) {
        iaMonthDays[1] = 29;
    }
    if (month< 1 || month > 12) {
        return false;
    }
    return !(day < 1 || day > iaMonthDays[month - 1]);
}

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐