validate做前端表单验证

2019独角兽企业重金招聘Python工程师标准>>>

一.网站

1.validation插件官网：https://jqueryvalidation.org/

2.菜鸟教程 ：http://www.runoob.com/jquery/jquery-plugin-validate.html

二.使用方法

第1步：引入js（需要用到的js可到官网下载最新版）

<script src="js/jquery.js"></script>
<script src="js/validate.min.js"></script>

第2步：由于默认提示为英文，可以加载中文提示包 位于下载包的dist/localization/messages_zh.js

<script src="js/messages_zh.js"></script>

（也可以不用这个js，直接用第3步自己定义的中文提示的message覆盖）

第3步：将校验规则写到 js 代码中（编写启用插件的js）

HTML

<form id="form1"name="form1"action=""method="post">
	<label for="username">用户名:</label> <input id="username"name="username"type="text">
	<label for="password">密码:</label> <input id="password"name="password"type="password">
	<label for="password2">验证密码:</label> <input id="password2"name="password2"type="password">
	
	<input type="submit"value="提交"> <input type="reset"value="重置">
</form>

JS 

$().ready(function() {
	$("#form1").validate({
		rules : {
			username : {
				required : true,
				minlength:2
				},
			password : {
				required : true,
				minlength : 5
			},
			password2 : {
				required : true,
				minlength : 5,
				equalTo : "#password"
			}
		},
		
		messages : {
			username : {
				required : "请输入用户名",
				minlength : "用户名必需由两个字母组成",
				maxlength:"最多4个字符"
			},
			password : {
				required : "请输入密码",
				minlength : "密码长度不能小于 5 个字母"
			},
			password2 : {
				required : "请输入密码",
				minlength : "密码长度不能小于 5 个字母",
				equalTo : "两次密码输入不一致"
			}
		}
	})
})

 

三.注意

1.rules,message里面的键 username ，password，passwod2 这些是指向input的name属性，不是id，不是id，不是id

rules : {
			username : {
				required : true,
				minlength:2
				},
			password : {
				required : true,
				minlength : 5
			},
			password2 : {
				required : true,
				minlength : 5,
				equalTo : "#password"
			}
		},

2.异步验证时，即用ajax验证注册用户名是否存在，或者验证登录时账户是否有效时，远程地址只能输出 "true" 或 "false"，不能有其他输出，即表单action提交的目标servlet.java（控制业务逻辑的类）处理注册表单的方法响应给view的输出值必须是true或false。

rules : {
			username : {
				required : true,
	 			minlength:2，
                remote: {
                   url: "UserServlet",     //后台处理程序
                   type: "post",               //数据发送方式
                   dataType: "json",           //接受数据格式   
                   data: {                     //要传递的数据,不写date就默认是当前的值，这里只username,
//验证这里时，如果需要同时传递其他值，可以写在date里
                       username: function() {
                       return $("#username").val();
                    }
    }
}
				},
			
		},

如果只传递当前值，且type，datatype的值不需要改的话，只写

remote: "UserServlet"就行（这里是表单action要传递的目标url）,type默认是get方式，注意后台是什么方式

3.success

success：要验证的元素通过验证后的动作，

如果跟一个字符串，会当作一个 css 类，并把这个css加到验证成功的label上（这个label是放提示错误信息的label）

也可跟一个函数。

rules : {
			username : {
				required : true,
				minlength:2
				},
			password : {
				required : true,
				minlength : 5
			}
		
		},
success:"valid",//在显示错误信息的元素上加class"valid",
success:function（label）{
&(label).text("ok");//当某项验证通过后，提示ok
},

4.highlight：可以给未通过验证的元素加效果、闪烁等。

rules : {
			username : {
				required : true,
				minlength:2
				},
			password : {
				required : true,
				minlength : 5
			}
		
		},
highlight:function(element,errorClass,validClass){
			$(element).fadeOut(500).fadeIn(500);
//highlight控制的是要验证的input，即传入的element，这里的效果是验证未通过的input淡出淡入，达到闪烁的效果
		},

 

转载于:https://my.oschina.net/Cubicluo/blog/807782