Validate 表单验证插件

    说明:

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。

    还可以自定义验证规则

    addMethod:name, method, message
$.validator.addMethod("checkUsername",function(value,element,params){
    var flag = false;
    $.ajax({
        async:false, //改为同步  
        type:"POST",
        url:"${pageContext.request.contextPath}/check",
        data:{"username":value},
        dataType:"json",
        success:function(data){
            flag = data.isExist;
            return !flag;
        }
    });
    return !flag;
})

    debug,只验证不提交表单

    如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。

$().ready(function(){
    $("#myForm").validate({
        debug:true
    })
});

    案例:

<!-- 引入jQuery核心js文件 -->
<script src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<!-- 引入validate插件 -->
<script src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<style>
body {
    margin-top: 20px;
    margin: 0 auto;
}

font {
    color: #666;
    font-size: 22px;
    font-weight: normal;
    padding-right: 17px;
}
.error{
    color:red;
    font-size: 12pt;
}
</style>
<script type="text/javascript">
$(function(){

       //定义校验用户名是否存在的方法
       $.validator.addMethod("checkUsername",function(value,element,params){
           var flag = false;
           $.ajax({
               async:false, //改为同步  
               type:"POST",
               url:"${pageContext.request.contextPath}/check",
               data:{"username":value},
               dataType:"json",
               success:function(data){
                   flag = data.isExist;
                   return !flag;
               }
           });
           return !flag;
       })
                         
       $.validator.addMethod("telephone",function(value,element,params){
           //定义一个手机号码的正则
           var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
           return reg.test(value);
       });
       
       $("#regForm").validate({
           rules:{
               "username":{
                   "required":true,
                   "checkUsername":true
               },
               "password":{
                   "required":true,
                   "rangelength":[6,12]
               },
               "confirmpwd":{
                   "equalTo":"#password"
               },
               "name":{
                   "required":true
               },
               "email":{
                   "required":true,
                   "email":true
               },
               "telephone":{
                   "telephone":true
               },
                "validateCode"{
                    "required":true
               }
           },
           messages:{
               "username":{
                   "required":"用户名不能为空",
                   "checkUsername":"用户名已经存在"
               },
               "password":{
                   "required":"密码不能为空",
                   "rangelength":"密码长度应为6-12位"
               },
               "confirmpwd":{
                   "equalTo":"两次输入的密码不一致"
               },
               "name":{
                   "required":"姓名不能为空"
               },
               "email":{
                   "required":"邮箱不能为空",
                   "email":"邮箱格式不正确"
               },
               "telephone":{
                   "telephone":"手机格式不正确"
               },
                "validateCode":{
                   "telephone":"验证码不能为空"
               }
           }
       });
   })
</script>
<form id="regForm" class="form-horizontal" style="margin-top:5px;" 
   action="${pageContext.request.contextPath }/regist" method="post">
       <div class="form-group">
           <label for="username" class="col-sm-3 control-label">用户名</label>
           <div class="col-sm-8">
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
       </div>
       <div class="form-group">
           <label for="password" class="col-sm-3 control-label">密码</label>
           <div class="col-sm-8">
               <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
           </div>
       </div>
       <div class="form-group">
           <label for="confirmpwd" class="col-sm-3 control-label">确认密码</label>
           <div class="col-sm-8">
               <input type="password" class="form-control" name="confirmpwd" id="confirmpwd" placeholder="请输入确认密码">
           </div>
       </div>
       <div class="form-group">
           <label for="email" class="col-sm-3 control-label">Email</label>
           <div class="col-sm-8">
               <input type="text" class="form-control" name="email" id="email" placeholder="Email">
           </div>
       </div>
       <div class="form-group">
           <label for="name" class="col-sm-3 control-label">姓名</label>
           <div class="col-sm-8">
               <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
           </div>
       </div>
       <div class="form-group">
           <label for="telephone" class="col-sm-3 control-label">联系电话</label>
           <div class="col-sm-8">
               <input type="text" class="form-control" id="telephone" name="telephone">
           </div>
       </div>

       <div class="form-group">
           <label for="validateCode" class="col-sm-3 control-label">验证码</label>
           <div class="col-sm-4">
               <input type="text" class="form-control" id="validateCode" name="validateCode">
           </div>
           <div class="col-sm-2">
                <img id="loginform:vCode" src="${pageContext.request.contextPath }/validatecode.jsp"
               onclick="vCode()" />
           </div>
       </div>

       <div class="form-group">
           <div class="col-sm-offset-1 col-sm-10">
               <input class="btn btn-success btn-block" type="submit"  value="立即注册" />
           </div>
       </div>
</form>

本文地址:

 http://www.52xjava.cn/2018/01/15/validate-form-validation-plugin/

发表评论

电子邮件地址不会被公开。 必填项已用*标注