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>

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

(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提交的时候看界面

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

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

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

看界面效果:

四.用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());  
    }
}); 
}

 当点击button提交按钮时,发现界面也可以进行校验

基本上就这么多,以后用到新的,以后再写。

 

想的太多,做的太少,中间的落差就是烦恼,要么去做,要么别想 少尉【16】