Validate做表单校验

用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。此时Validate做表单校验的特效药就发挥作用了!

Validate特点:

1、内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则

2、自定义验证规则:可以很方便的自定义验证规则
3、简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能

4、实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。

Validate下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

下面是我的简易表单:

我想设定的规则是:(见代码,非常简单的规则)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Validate使用示例</title>
    <!--注意导入的顺序-->
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script type="text/javascript" src="js/jquery.validate.min.js" ></script>
    <script type="text/javascript" src="js/messages_zh.js" ></script>
    <script>
        $(function(){
            $("#checkForm").validate({
                rules:{
                    username:{
                        required:true,//不能为空
                        minlength:5,//长度必须大于等于5
                        maxlength:10,//最大长度是10
                    },
                    password:{
                        required:true,
                        digits:true,
                        minlength:6,
                    },
                    password2:{
                        required:true,
                        digits:true,
                        equalTo:"[name='password']"
                    }
                },
                messages:{
                    username:{
                        required:"用户名不能为空",
                        minlength:"用户名不得少于5个字符",
                        maxlength:"用户名最多10个字符"
                    },
                    password:{
                        required:"密码不能为空",
                        digits:"密码必须是整数",
                        minlength:"密码不得少于6位"
                    },
                    password2:{
                        required:"确认密码不能为空",
                        equalTo:"两次输入密码不一致"
                    }
                }
            });
        });
    </script>
</head>
<body>
<form action="#" id="checkForm">
	
	<table border="0px">
		<tr>
			<td> 用户名</td>
			<td><input type="text"  name="username"/><br></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="password"/></td>
			<td></td>
		</tr>
		<tr>
			<td>确认密码</td>
			<td><input type="password" name="password2"/></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="email" name="email"></td>
		</tr>
		<tr>
			<td><input type="submit" value="提交" /></td>
			 
		</tr>
	</table>
</form>

</body>
</html>

好了,看看效果,这只是个简单的使用示例,需要更好提示效果的话也可以参考:http://www.jb51.net/article/85110.html

重点就在于设定校验的规则,常见的属性:    
required:true     必须输入的字段。
remote:"check.php"     使用 ajax 方法调用 check.php 验证输入值。
email:true     必须输入正确格式的电子邮件。
url:true     必须输入正确格式的网址。
date:true     必须输入正确格式的日期。日期校验 ie6 出错,慎用。
dateISO:true     必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
number:true     必须输入合法的数字(负数,小数)。
digits:true     必须输入整数。
creditcard:     必须输入合法的信用卡号。
equalTo:"#field"     输入值必须和 #field 相同。
accept:     输入拥有合法后缀名的字符串(上传文件的后缀)。
maxlength:5     输入长度最多是 5 的字符串(汉字算一个字符)。
minlength:10     输入长度最小是 10 的字符串(汉字算一个字符)。
rangelength:[5,10]     输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
range:[5,10]     输入值必须介于 5 和 10 之间。
max:5     输入值不能大于 5。

min:10     输入值不能小于 10。

具体参考:http://www.runoob.com/jquery/jquery-plugin-validate.html

一个非常好的参考网站!

猜你喜欢

转载自blog.csdn.net/m0_38032942/article/details/79346416
今日推荐