Validate表单验证

最新推荐文章于 2024-04-15 14:11:06 发布

讓丄帝愛伱

最新推荐文章于 2024-04-15 14:11:06 发布

阅读量345

点赞数

分类专栏：前端技术文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/130875230

版权

前端技术专栏收录该内容

234 篇文章 7 订阅

订阅专栏

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

官网

基本用法

<!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>

修改错误提示

<!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>

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;
}

自定义校验类型

<!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]);
}

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。

讓丄帝愛伱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Validate表单验证

Validate 是 jQuery 的一个子插件，该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。// 全局修改Validate错误提示信息，仅当前页有效。// 修改年龄错误的提示信息，优先级高于全局错误提示。// rmote用法，用户名调用自定义接口校验。"年龄应为0~100的数字""年龄age必填字段哦~"//年龄应为0~100。//年龄应为0~100。"请填写正确的手机号码""这个为必填字段哦~""自定义校验错误~"
复制链接

扫一扫