jquery.validate.js【简单实用的表单验证框架】

• 在线演示1
•  
• 本地下载
 

 

最近在做用户登录、注册、以及用户中心...然后之前在慕课网学的jquery.validate用得着地方了，根据自己需求进行了细节修改，重要是样式方面吧。原文链接：http://www.gbtags.com/gb/share/5749.htm

第一次发表这些，说得不好不要介意，开始吧。首先：

1. $("#form").validate({
2. //在这里面编辑
3. });

 

 验证的时候常常需要调试，该框架内置了一个方法，如下：

1. debug:true,//调试模式（并不会提交）

 

 来个实例，HTML:

1. <divclass="form-group">
2. <labelfor="username">用户名：</label>
3. <inputtype="text"name="username"id="username"placeholder="请输入用户名"/>
4. </div>

 

 用rules方法进行设置验证，然后需求是：必填项，长度在3-10之间：

1. $(document).ready(function(){
2. $("#form").validate({
3. debug:true,//调试模式
4. rules:{
5. username:{
6. required:true,//开启必填项
7. rangelength:[3,10]//请输入的数值在3至10位之间
8. };
9. };
10. });
11. });

 

 我的理解是，获取 name值 和 type类型来验证的。来个重新输入密码吧：

html:

1. <divclass="form-group">
2. <labelfor="confirm-password">确认密码：</label>
3. <inputtype="password"name="confirm-password"id="confirm-password"placeholder="请再次输入密码"/>
4. </div>
5.  
6. js:

 

1. password:{
2. required:true,
3. rangelength:[6,12]
4. },
5. "confirm-password":{
6. equalTo:"#password"//必须密码相同
7. }

 

 如果想要自定义提示消息呢，那就用messages方法吧：

1. messages:{
2. username:{
3. required:"用户名不能留空",//用户名的必填项提示
4. rangelength:"请检查您输入的数值的长度是否在2至10之间"//用户名的长度提示
5. }

 

查看全部内容，请看原文：http://www.gbtags.com/gb/share/5749.htm