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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88735372

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>

猜你喜欢

转载自blog.csdn.net/qq_20042935/article/details/88735372