JQuery Validate校验插件

最新推荐文章于 2019-03-28 16:25:00 发布

houyanhua1

最新推荐文章于 2019-03-28 16:25:00 发布

阅读量219

点赞数

分类专栏： JQuery 文章标签： jquery 表单验证 validate

本文链接：https://blog.csdn.net/houyanhua1/article/details/79005497

版权

JQuery 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

JQuery Validate插件教程： https://www.cnblogs.com/linjiqin/p/3431835.html

demo.html：

<!DOCTYPE html>
<html>
<head></head>
<title>会员注册</title>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	<!-- 引入表单校验jquery插件 -->
	<script src="js/jquery.validate.min.js" type="text/javascript"></script>

<style>
	/* 可以自定义错误提示信息的样式 */
	label.error{
		color:red
	}
</style>

<script type="text/javascript">
	
	//自定义校验规则
	$.validator.addMethod(
		//规则的名称
		"checkUsername",
		//校验的函数
		function(value,element,params){
			
			//定义一个标志
			var flag = false;
			
			//value:输入的内容
			//element:被校验的元素对象
			//params：规则对应的参数值
			//目的：对输入的username进行ajax校验
			$.ajax({
				"async":false,  // 同步的方式请求数据
				"url":"www.xxx.com/checkUsername",
				"data":{"username":value},
				"type":"POST",
				"dataType":"json",
				"success":function(data){
					flag = data.isExist;
				}
			});
			
			//返回false代表该校验器不通过
			return !flag;
		}
		
	);

	$(function(){
		// 表单验证
		$("#myform").validate({
			rules:{
				"username":{
					"required":true,
					"checkUsername":true
				},
				"password":{
					"required":true,
					"rangelength":[6,12]
				},
				"repassword":{
					"required":true,
					"rangelength":[6,12],
					"equalTo":"#password"
				},
				"email":{
					"required":true,
					"email":true
				},
				"sex":{
					"required":true
				}
			},
			messages:{
				"username":{
					"required":"用户名不能为空",
					"checkUsername":"用户名已存在"
				},
				"password":{
					"required":"密码不能为空",
					"rangelength":"密码长度6-12位"
				},
				"repassword":{
					"required":"密码不能为空",
					"rangelength":"密码长度6-12位",
					"equalTo":"两次密码不一致"
				},
				"email":{
					"required":"邮箱不能为空",
					"email":"邮箱格式不正确"
				}
			}
		});
	
	});

</script>

</head>
<body>
	<div >
		<font>会员注册</font>
		<form id="myform" action="/register" method="post" >
			<div class="form-group">
				<label for="username" >用户名</label>
				<div>
					<input type="text" id="username" name="username"
						placeholder="请输入用户名">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" >密码</label>
				<div class="col-sm-6">
					<input type="password" id="password" name="password"
						placeholder="请输入密码">
				</div>
			</div>
			<div class="form-group">
				<label for="confirmpwd" >确认密码</label>
				<div class="col-sm-6">
					<input type="password" id="confirmpwd" name="repassword"
						placeholder="请输入确认密码">
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" >Email</label>
				<div class="col-sm-6">
					<input type="email" id="inputEmail3" name="email"
						placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="usercaption" >姓名</label>
				<div class="col-sm-6">
					<input type="text" id="usercaption" name="name"
						placeholder="请输入姓名">
				</div>
			</div>
			<div class="form-group opt">
				<label for="inlineRadio1" >性别</label>
				<div class="col-sm-6">
					<label class="radio-inline"> 
						<input type="radio" name="sex" id="sex1" value="male" >男
					</label> 
					<label class="radio-inline"> 
						<input type="radio" name="sex" id="sex2" value="female">女
					</label>
					<label class="error" for="sex" style="display:none ">您没有第三种选择</label>  <!-- 可以手动指定校验提示信息的位置。默认隐藏,校验不通过会自动显示 -->
				</div>
			</div>
			<div class="form-group">
				<label for="date">出生日期</label>
				<div>
					<input type="date" name="birthday">
				</div>
			</div>

			<div class="form-group">
				<label for="date">验证码</label>
				<div>
					<input type="text" name="checkCode">

				</div>
				<div >
					<img src="./image/captcha.jhtml" />
				</div>

			</div>

			<div class="form-group">
				<div >
					<input type="submit" width="100" value="注册" name="submit">
				</div>
			</div>
		</form>

	</div>

</body>
</html>