前端基础 - JQuery自定义校验器

最新推荐文章于 2021-09-28 17:19:59 发布

原创最新推荐文章于 2021-09-28 17:19:59 发布 · 777 阅读

0 ·

CC 4.0 BY-SA版权

前端基础专栏收录该内容

70 篇文章

订阅专栏

博客介绍了JQuery自定义校验器，提及正则表达式的用法，即使用.test方法匹配值，匹配返回true，不匹配返回false，还以身份证验证为例进行说明。

JQuery自定义校验器

自定义校验器：

$.validator.addMethod("校验器的名称",function(value,ele,param){
			value:用户录入的值
			ele：当前录入的值所在的js对象
			param：校验器的取值
			return true:  符合校验器规则
			return false： 不符合校验器规则   (默认return false)
},"提示信息")

正则的用法：

正则表达式.test(要匹配的值)
若匹配：true
不匹配：false

案例：身份证验证为例子

效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!--validate校验库-->
		<script type="text/javascript" src="../js/jquery.validate.js"></script>
		<!--国际化库，中文提示-->
		<script type="text/javascript" src="../js/messages_zh.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#formId").validate({
					rules: {
						card: {
							cardLength: true
						}
					},
					messages: {}
				})
			})
		</script>

		<script>
			//编写校验身份证长度的自定义校验器
			$.validator.addMethod("cardLength", function(value, ele, param) {
				//判断用户录入的值是否为15位或者18位
				// if(value.length==15||value.length==18){
				//		 return true;
				// }
				if(typeof param != "boolean") {
					return true;
				}
				//校验身份证格式
				if(value.length == 15) {
					var reg = /^[0-9]{15}$/;
					return reg.test(value);
				}

				if(value.length == 18) {
					var reg = /^([0-9]{18}|[0-9]{17}[X|x])$/;
					return reg.test(value);
				}
			}, "身份证格式不正确")
		</script>
	</head>

	<body>
		<form id="formId" action="">
			身份证：<input type="text" name="card" />
			<input type="submit" value="提交" />
		</form>
	</body>

</html>