使用valiedate插件让你的表单验证更为轻松

2016-08-27

概述

在表单验证中，jQuery的一款叫validate的插件十分好用，简单的API封装了大部分常用操作。

实战Demo

对于一个用户登录的简单Demo,我们引入jqeury库和valiedate插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validate插件</title>
</head>
<body>
<form id="demoForm">
    <fieldset>
        <legend>用户登录</legend>
        <p id="info"></p>
        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input type="password" id="password" name="password"/>
        </p>

        <p>
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" name="confirm-password"/>
        </p>

        <p>
            <input type="submit" value="登录"/>
        </p>
    </fieldset>
</form>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script type="text/javascript">
	
</script>
</body>
</html>

Jquery部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function(){
				var validator1;
				validator1=$("#demoForm").validate({
					debug: true,
					rules: {
						username: {
		                    required: true,
		                    minlength: 2,
		                    maxlength: 10
		                },
		                password: {
		                    required: true,
		                    minlength: 2,
		                    maxlength: 16
		                },
		                 "confirm-password": {
		                    equalTo: "#password"
		                }
					},
					messages: {
		                username: {
		                    required: '请输入用户名',
		                    minlength: '用户名不能小于2个字符',
		                    maxlength: '用户名不能超过10个字符',
		                    remote: '用户名不存在'
		                },
		                password: {
		                    required: '请输入密码',
		                    minlength: '密码不能小于2个字符',
		                    maxlength: '密码不能超过16个字符'
		                }
		            }
				});
			});

异步验证

valiedate还有许多好用的属性，如果需要异步验证，可以使用valiedate封装的remote，同样也是基于ajax,如：

username: {
    required: true,
    remote: "remote.json"
}

这样对于username这个表单元素，就会进行异步验证，当然远程的url你可以填写jsp,php等

还有其他的验证属性如:

验证属性	接受值	作用
email	true	验证是否为邮箱格式
url	true	验证是否为url格式
date	true	验证是否为date格式
dateISO	true	验证是否为dateISO格式

批量验证

对于表单中有着大量元素，但元素验证的属性重复的情况，valiedate有一个专门用于批量验证的静态方法

$.validator.addClassRules({
    txt: {
        required: true,
        minlength: 5
    }
})

那么这个方法将会对class为txt的表单元素进行验证。也就是说到时我们的表单编写只需增加class属性以后即可，而不用每个表单都添加验证。