使用jquery的validate插件校验

最新推荐文章于 2021-04-14 20:07:22 发布

原创最新推荐文章于 2021-04-14 20:07:22 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

前端学习同时被 2 个专栏收录

21 篇文章

订阅专栏

错误异常bug

14 篇文章

订阅专栏

本文介绍如何使用jQuery的validate插件进行表单验证，包括基本校验规则、自定义错误信息、异步调用问题及解决方法。同时，讲解了如何自定义校验方法，如检查用户名是否已存在、验证用户名格式、手机号格式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

基本校验

使用jquery的validate插件校验，要比自定义校验简单方便许多
效果图
在这里插入图片描述
注意导入validate.js之前要先导入jquery.js
messages_zh.js是中文提示，不导入的话默认是英文
rules和messages使用逗号进行分隔，根据表单的name项进行绑定
javaScript部分的代码

<script src="../../jquery/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../../jquery/jquery.validate.js"></script>
	<script type="text/javascript" src="../../jquery/messages_zh.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#reg").validate({
				rules:{
					username:{
						required:true,
						rangelength:[6,10]
					},
					pwd:{
						required:true,
						rangelength:[6,15]
					},
					repwd:{
						required:true,
						rangelength:[6,15],
						equalTo:pwd
					},
					phone:{
						required:true,
						minlength:11,
						maxlength:11
					}
				},
				//自定义错误信息
				messages:{
					username:{
						required:"用户名不能为空",
						rangelength:"用户名长度必须为6-15个字母或数字组合"
					},
					pwd:{
						required:"密码不能为空",
						rangelength:"密码长度必须为6-15个字母或数字组合"
					},
					repwd:{
						required:"确认密码不能为空",
						equalTo:"两次密码不一致"
					},
					phone:{
						required:"手机号不能为空",
						minlength:"请输入正确的手机号",
						maxlength:"请输入正确的手机号"
					}
				}
			})
		})
	</script>

html部分代码

<div class="container">
		<div class="col-md-6 col-md-offset-3">
			<form action="#" class="" id="reg">
				<div class="form-group has-feedback">
					<label for="username">用户名</label>
					<div class="input-group">
						<span class="input-group-addon"><span
							class="glyphicon glyphicon-user"></span></span> <input id="username"
							class="form-control" placeholder="请输入用户名" name="username"
							type="text"> 
					</div>

					<span style="color: red; display: none;" class="tips"></span> <span
						style="display: none;"
						class=" glyphicon glyphicon-remove form-control-feedback"></span>
					<span style="display: none;"
						class="glyphicon glyphicon-ok form-control-feedback"></span>
				</div>

				<div class="form-group has-feedback">
					<label for="password">密码</label>
					<div class="input-group">
						<span class="input-group-addon"><span
							class="glyphicon glyphicon-lock"></span></span> <input id="pwd"
							class="form-control" placeholder="请输入密码" name="pwd"
							type="password"> 
					</div>

					<span style="color: red; display: none;" class="tips"></span> <span
						style="display: none;"
						class="glyphicon glyphicon-remove form-control-feedback"></span> <span
						style="display: none;"
						class="glyphicon glyphicon-ok form-control-feedback"></span>
				</div>

				<div class="form-group has-feedback">
					<label for="passwordConfirm">确认密码</label>
					<div class="input-group">
						<span class="input-group-addon"><span
							class="glyphicon glyphicon-lock"></span></span> <input id="repwd"
							class="form-control" placeholder="请再次输入密码" name="repwd"
							type="password"> 
					</div>
					<span style="color: red; display: none;" class="tips"></span> <span
						style="display: none;"
						class="glyphicon glyphicon-remove form-control-feedback"></span> <span
						style="display: none;"
						class="glyphicon glyphicon-ok form-control-feedback"></span>
				</div>

				<div class="form-group has-feedback">
					<label for="phoneNum">手机号码</label>
					<div class="input-group">
						<span class="input-group-addon"><span
							class="glyphicon glyphicon-phone"></span></span> <input id="phoneNum"
							class="form-control" placeholder="请输入手机号码" name="phone"
							type="text"> 
					</div>
					<span style="color: red; display: none;" class="tips"></span> <span
						style="display: none;"
						class="glyphicon glyphicon-remove form-control-feedback"></span> <span
						style="display: none;"
						class="glyphicon glyphicon-ok form-control-feedback"></span>
				</div>
				<div class="form-group">
					<input class="form-control btn btn-primary" id="submit"
						value="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" type="submit"
						onclick="">
				</div>
				<div class="form-group">
					<input value="重置" id="reset" class="form-control btn btn-danger"
						type="reset">
				</div>
			</form>
		</div>
	</div>

校验用户名是否存在（在validate插件里自定义校验）

注意问题JS设置全局变量在ajax中赋值不上的原因是异步调用
不能使用ajax的异步方式，什么是异步？异步就是并行处理的方式，以校验用户名来说，如果异步就是在ajax请求后台数据的时候，result=data就已经执行，没有等ajax请求返回的后台数据后在进行赋值
解决方法：关闭异步调用，改为同步。async:false 如果true就是异步，false就是同步

//自定义校验，用户名是否已存在
		$.validator.addMethod("checkName",function(value,ele,params){
			var result = '';
			$.ajax({
					type:"get",
					url:"/CA/user/reg",
					data:{
						"username":value
					},
					async:false,//关闭ajax的异步调用，改为同步
					success:function(data){
						//console.log(data);
						result = data;
						//console.log(result);
					}
				});
			console.log(result);
			if(result=="OK"){
				// console.log(123);
				return true;
			}
			return false;
		},"用户名已存在！")

表单提交和js提交调用校验插件问题

在这里插入图片描述
使用插件校验表单信息有一个缺点就是，必须要使用form的action请求，这个时候如果表单信息有错误，点击注册按钮，表单不会提交。如果不使用表单提交或者使用js提交，这个时候数据就会提交到后台
为了解决表单信息有错误时，表单不被提交总结两种如下方法：
1、使用表单提交即form的action
2、继续使用 js提交，但是js加入判断，学习自https://blog.youkuaiyun.com/sayoko06/article/details/81208577
在这里插入图片描述

<script type="text/javascript">
		//自定义校验，用户名是否已存在
		$.validator.addMethod("checkName",function(value,ele,params){
			var result = $.ajax({
					type:"get",
					url:"/CA/user/reg",
					data:{
						"username":value
					},
					success:function(data){
						console.log(data);
						if(data=="OK"){
							return true;
						}
						else{
							return false;
						}
					}
				});
			return result;
		},"用户名已存在！");
		//添加校验，用户名只能是字母和数字的组合
		$.validator.addMethod("nameRule",function(value,ele,params){
			var req =/^[A-Za-z0-9]+$/;
			if(req.test(value)){
				return true;
			}
			return false;
		},"用户名只能由数字或字母组合，不能包含汉字")
		//自定义校验手机号为11位纯数字，并且以数字1开头
		$.validator.addMethod("phoneTest",function(value,ele,params){
			var regis = /^1[3456789]\d{9}$/;
			if(regis.test(value)){
				return true;
			}
			return false;
		},"请填写正确的手机号码！");
		
		var validateRule={
			rules:{
				username:{
					required:true,
					rangelength:[6,10],
					nameRule:true,
					checkName:true
				},
				pwd:{
					required:true,
					rangelength:[6,15]
				},
				repwd:{
					required:true,
					rangelength:[6,15],
					equalTo:pwd
				},
				email:{
					required:true,
					email:true
				},
				phone:{
					required:true,
					phoneTest:true
				},
				code:{
					required:true
				}
			},
			//自定义错误信息
			messages:{
				username:{
					required:"用户名不能为空",
					rangelength:"用户名长度必须为6-15个字母或数字组合"
				},
				pwd:{
					required:"密码不能为空",
					rangelength:"密码必须为6-15个字母或数字组合"
				},
				repwd:{
					required:"确认密码不能为空",
					equalTo:"两次密码不一致"
				},
				phone:{
					required:"手机号不能为空",
					minlength:"请输入正确的手机号",
					maxlength:"请输入正确的手机号"
				}
			}
		}
		$(function(){
			 $("#reg").validate(validateRule);
		});
		//post方式提交注册信息
		function register(){
			if($("#reg").valid()){
				//console.log("校验通过！");
				var username = $("#username").val();
				var pwd = $("#pwd").val();
				var phone = $("#phone").val();
				var email = $("#email").val();
				var param = {"username":username,"password":pwd,"phone":phone,"email":email};
				//console.log(param);
				$.ajax({
					type:"post",
					url:"/CA/userRegister",
					contentType:"application/json;charset=utf-8",
					data:JSON.stringify(param),
					dataType:"json",
					success:function(data){
						if(data.status==200){
							alert("注册成功！");
						}
						else{
							alert("注册失败！");
						}
					}
				});
			}
			else{
				//console.log("校验未通过！");
			}
		}
	</script>