jQuery.validator之用户的手机号验证

Dear 丶 2022-04-23 02:00 188阅读 0赞

用于验证用户注册的信息是否正确我们采用了jQuery.validator的验证，相关教程在  
菜鸟教程里 ， 那里有相关的术语。。  
下面我给出一个小例子，这是在做一个项目的时候碰到的，也是才接触，并没有什么深刻的理解；为根据我的理解来解释一下这个小例子，有不对的地方还望各位博友们指出来，我们相互学习，看代码与注释吧

<form:form id="registerForm" method="post" action="#" autocomplete="off" modelAttribute="user">
    			<div class="clearfix">
    								
    					<div id="error" class="alert alert-mini alert-danger margin-bottom-30" style="display: none">
    					</div>
    					
    			<div id="message" style="display: none"></div>
    					<form:errors />
    						
    			<div class="form-group">
    						<form:input path="userName" class="form-control" placeholder="手机号码" required="" maxlength="11" cssErrorClass="form-control error" />
    						<form:errors path="userName" class="error" />
    					</div>
    				</div>
    </form:form>

第二部分js中

var validate;
    $(document)
    	.ready(
    		function() { 
    			validate = $("#registerForm").validate({ 
    			//绑定一个注册按钮form的校验,对这个表单的提交进行验证
    			//根据需求赋值，具体什么意思参照上面的菜鸟教程地址
    				onsubmit: false,
    				focusInvalid: false,
    				errorClass: "error",
    				onfocusout: false,
    				onkeyup: false,
    				onclick: false,
    				ignoreTitle: true,
    				//我的理解是rules代表一种规范原则，要是违背了就会弹出来message中与之相对应的错误提示
    				rules: { 
    				//userName是input表单的一个属性，输入电话的输入框
    					userName: { 
    						required: true,//必须要填写
    						maxlength: 11,//最大长度为11位
    						isMobile: true//用下面的方法来判断是否符合，这个为自定义的校验
    					}
    				},
    				//这里是以键值对的形式出现rules与messages要对应
    				messages: { 
    					userName: { 
    						required: "请输入手机号码！",//对应required的错误信息，没有写就提示请输入手机号码！，下面的字段同理
    						maxlength: "手机号码不能超过11位！",
    						isMobile: "请正确填写您的手机号码"
    					},
    				}
    			});
    			//在这里呢我们添加了对isMobile这个字段的校验，如果错误就会有messages中定义的信息
    			jQuery.validator
    				.addMethod(
    					"isMobile",
    					function(value, element) { 
    						var length = value.length;
    						var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
    						return this.optional(element) || (length == 11 && mobile
    							.test(value));
    					}, "请正确填写您的手机号码");
    		});

--------------------

作者：困惑的阿星  
来源：CSDN  
原文：[https://blog.csdn.net/qq\_40183281/article/details/86601644][https_blog.csdn.net_qq_40183281_article_details_86601644]  
版权声明：本文为博主原创文章，转载请附上博文链接！

[https_blog.csdn.net_qq_40183281_article_details_86601644]: https://blog.csdn.net/qq_40183281/article/details/86601644