【jQuery】(6)jQuery validate插件

0 0

–>

jQuery validate插件

一、导入js库

先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。

注意Validate的导入要在jQuery库之后。代码如下：

    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
   <!--  因为默认是用英文输出错误信息，如果导入下面包就可以默认用中文输出错误信息 -->
    <script src="messages_zh.js" type="text/javascript"></script>

二、常见默认校验规则

(1)、required:true               必输字段
(2)、email:true                  必须输入正确格式的电子邮件
(3)、url:true                    必须输入正确格式的网址
(4)、number:true                 必须输入合法的数字(负数，小数)
(5)、digits:true                 必须输入整数
(6)、creditcard:true             必须输入合法的信用卡号
(7)、equalTo:"#password"         输入值必须和#password相同
(8)、accept:                     输入拥有合法后缀名的字符串（上传文件的后缀）
(9)、maxlength:5                 输入长度最多是5的字符串(汉字算一个字符)
(10)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(11)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(12)、range:[5,10]               输入值必须介于 5 和 10 之间
(13)、max:5                      输入值不能大于5
(14)、min:10                     输入值不能小于10

三.submit提交校验案例

（1）register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="../js/jquery.validate.min.js"></script> 
 <!-- 上面两个导入就可以，下面这个自己写一个校验规则 -->
 <script type="text/javascript" src="../js/register.js"></script> 
<html>
<head>
    <style type="text/css" rel="stylesheet">
        .wrap{margin:0 auto;width:500px;} 
        .palceholder{ border:solid 1px red;}
    </style>
</head>
    <body>
        <div class="wrap">
          <h1>注册</h1>    
            <form action="" id="form_register">
                <p>用 户 名: <input type="text" name="name" /></p>
                <p>密   码: <input type="text" name="password" /></p>
                <p>确认密码: <input  type="text" name="password1" /></p>
                <p>电子邮件: <input  type="text" name="emal" /></p>
                <p>年    龄: <input  type="text" name="age" /></p>
                <p>爱    好：<select name="hobby" id="hobby">
                            <option value="">请选择</option>
                            <option value="1">唱歌</option>
                            <option value="2">跳舞</option>
                            <option value="3">画画</option>
                        </select>  
                </p>
                <input type="submit" value="submit提交">
                <input type="submit" value="button提交" id="hand" name="hand">
            </form>
        </div>
    </body>
</html>

先看界面效果：很普通的一个界面

【jQuery】(6)jQuery validate插件

(2)register.js

/*首先校验要在$(document).ready()里加入验证规则与错误提示位置*/
$(document).ready(function(){
     $("#form_register").validate({
            
      debug:true,//如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

        // 错误提示
         rules:{
             name:{required:true},
             password:{required:true},
             password1:{required:true,equalTo: "#password"},
             emal:{required:true},
             //这里要注意select有个小细节，就是默认的"请选择"的value一定要是"",如果你设置了"-1",那它就默认有值，而不去校验
             hobby:{required:true}, 
             age:{required:true,digits:true},
         },
         messages:{
             name:{required:"请输入用户名"},
             password:{required:"请输入密码"},
             password1:{required:"请输入密码",equalTo: "两次密码输入不一致"},
             emal:{required:"请输入电子邮箱"},
             hobby:{required:"请选择爱好"},
             age:{required:"请输入年龄",digits:"必须为整数"},
         },
     
          /* 
               下面这个很关键：
            error：错误信息
            element：指当前元素
          */ 
         errorPlacement:function(error, element){
             //我往当前元素添加class属性，然后对这个css样式设置，这样就可以更加清晰显示错误
             element.addClass('palceholder');
             //添加placeholder属性，属性值就是error.html()
             element.attr({placeholder:error.html()});
         }
     }); 
    });

(3)当我在界面上点击submit提交的时候看界面

通过样式可以让错误信息更明显

【jQuery】(6)jQuery validate插件

如果我在register.js错误显示方式修改如下：

errorPlacement:function(error, element){
             element.addClass('palceholder');
             //默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面
             error.appendTo(element.parent());  
         }
     });

看界面效果：

【jQuery】(6)jQuery validate插件

四.用button提交

我们知道，很多时候我们需要button进行ajax提交，在网上都是这样写：

$("#btn).click(function(){
if($("#form").valid()){
......
}
//本人亲自测试当button提交时这里的$("#form").valid()是不行，会报错

找了好多博客发现有一个是可以的，下面进行代码演示，其它都和上面一样，就register.js我重新写一个

$(document).ready(function(){
$("#hand").bind("click" ,function(){
    //编写表单验证函数validform，在验证按钮注册按钮点击事件内调用验证函数对象
    if(validform().form()){
        alert(验证通过);
    }
    });        
    });

function validform(){
/*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ 
return  $("#form_register").validate({
       debug:true,

    rules:{
        name:{required:true},
        password:{required:true},
        password1:{required:true,equalTo: "#password"},
        emal:{required:true},
        
        hobby:{required:true}, 
        age:{required:true,digits:true},
    },
    messages:{
        name:{required:"请输入用户名"},
        password:{required:"请输入密码"},
        password1:{required:"请输入密码",equalTo: "两次密码输入不一致"},
        emal:{required:"请输入电子邮箱"},
        hobby:{required:"请选择爱好"},
        age:{required:"请输入年龄",digits:"必须为整数"},
    },
    errorPlacement:function(error, element){
        element.addClass('palceholder');
        error.appendTo(element.parent());  
    }
}); 
}