JQuery之表单校验validate

vaildate

vaildate是一项用于表单校验的jquery插件技术，很方便的对用户输入的数据进行了校验。

使用方法

首先在项目下引入vaildate的js文件

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

提供的表单代码如下：

 1 <form  action="Welcome.html" method="get" id="regForm" >
 2             <div class="form-group">
 3              <label for="inputEmail3" class="col-sm-2 control-label">昵称</label>
 4             <input class="form-control" type="text" id="username" name="username" placeholder="输入昵称" />
 5             
 6             </div>
 7             <div class="form-group">
 8              <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
 9             <input class="form-control" type="text" id="email" name="email" placeholder="邮箱地址" />
10              
11             </div>
12             <input  class="btn btn-default btn-lg active" type="submit" value="登陆"  id="dl"/>
13             &nbsp;&nbsp;&nbsp;&nbsp;    &nbsp;&nbsp;&nbsp;&nbsp;
14         
15         
16             <input  class="btn btn-default btn-lg active" type="button" value="注册"  />
17         
18             
19             
20               
21         </form>

注意表单的ID是regForm,

下面是javascript代码

 1 script>
 2             $(function(){
 3                   $("#regForm").validate({ //固定格式
 4                rules:{  //规则
 5                    username:{
 6                        required:true   //要求不为空        
 8                    },
 9                    email:{
10                        required:true, //要求不为空
11                        email:true  //必须是邮箱地址，这里省去了写正则表达式匹配
12                        
13                    }
14                    
15                },
16                messages:{  //当规则出现不匹配的时候提示信息
17                    username:{
18                        required:"用户名不能为空"
19                        
20                    },
21                    email:{
22                        required:"请务必留下邮箱",
23                        email:"抱歉，您的邮箱格式不正确"
24                        
25                    }
26                },
27                    errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
28                     success: function(label) { //验证成功后的执行的回调函数
29                         //label指向上面那个错误提示信息标签label
30                         label.text(" ") //清空错误提示消息
31                             .addClass("success"); //加上自定义的success类
32                     }
33               
34               });
35             });
36        
37             
38         </script>