validform

一、validform是什么？

           validform是一款智能的表單驗證js插件，它是基於jQuery庫與css,我們只需要把表單對象放入，

            就可以對整個表單數據進行驗證，而不需要每次驗證都要寫個js腳本。

 

        

 

二、validform優點

            1. 自定義你想要的信息提示效果 （彈窗提示 ----  右側提示）                 

            2. 智能的錯誤信息提示 

                

           3. 可以指定需要驗證的和不需要驗證的區域

                    例如

                            ignore
                                    綁定了ignore="ignore"的表單元素，在有輸入時， 會驗證所填數據是否符合datatype所指定數據類型，

                                    沒有填寫內容時則會忽略對它的驗證；

           4. 基於form對象操作 

         5.validform與js腳本的區別

                                validform是對js進行了封裝

                       js腳本驗證 字符串類型：6到18位字符串 ：    /^[\u4E00-\u9FA5\w\.\s]{6,18}$/ 

                                                還要if進行判斷，使用起來非常麻煩

                       而validform 直接在需要驗證的input框中使用  datatype=" s6-18"

 

 

 

 

 

<!--引入css  -->

<link rel="stylesheet" href="<%=request.getContextPath()%>/js/validform/css/style.css" type="text/css" media="all" />

<!-- 引入jquery -->

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.7.js"></script>

<!--引入validform  -->

<script type="text/javascript" src="<%=request.getContextPath()%>/js/validform/validform-js/Validform_v5.3.2(1)/Validform_v5.3.2_ncr_min.js"></script>

 

 

            初始化：

                       

    $(function(){

                                var demo=$(".demoform").Validform({

                                 });

                           })

三、使用步驟

            1、引入css,js

            2、定義載體

            3、初始化                 

                 

    

datatype

           

  傳入自定義datatype類型，可以是正則，也可以是函數

            *：檢測是否有輸入，可以輸入任何字符，不留空即可通過驗證；
            *6-16：檢測是否為6到16位任意字符；
            n：數字類型；
            n6-16：6到16位數字；
            s：字符串類型；
            s6-18：6到18位字符串；
            p：驗證是否為郵政編碼；
            m：手機號碼格式；
            e：email格式；
            url：驗證字符串是否為網址。

            中文需要自己定義

            <input datatype="n2-6">

 

 

datatype函數（初始化參數）

          

           

 如果數據類型與底層封裝的數據類型相同 那么我們自定義的優先級大於底層封裝

            datatype:{

                       "m":/^[1][1,3,5,8,4]\d{9}$/,    

                        "china2-6":/^[\u4e00-\u9fa5]{2,6}$/,    

              }

 

nullmsg （null提示）

            當表單元素值為空時的提示信息，不綁定，默認提示"請填入信息！"。
            如：nullmsg="請填寫用戶名！"

            <input datatype="n2-6" nullmsg="請填寫密碼">

 

errormsg（錯誤提示）
            輸入內容不能通過驗證時的提示信息，默認提示"請輸入正確信息！"。
            如：errormsg="用戶名必須是2到4位中文字符！"

             <input datatype="n2-6" errormsg="請填寫2-6位數字密碼">

 

 

recheck（二次驗證，保證輸入的一致性）

        常用於：確認密碼

                recheck就是用來指定需要比較的另外一個表單元素。

              

 如：密碼文本中name="pw" 那么我們確認密碼文本中綁定上 recheck="密碼文本中name的值"                

                密碼<input datatype="n2-6" name="pw" errormsg="請輸入2-6位數字" nullmsg="請填寫密碼">

                確認密碼<input datatype="n2-6" recheck="pw" errormsg="倆次密碼不一致" nullmsg="請填寫密碼1">

               

 

tiptype（初始化參數）

                可以為1、2 、3、4和 自定義函數。1 表示彈出提示框，是默認值（

使用1和3就夠了

）

                1=> 自定義彈出框提示；

（常用）

                2=> 側邊提示(會在當前元素的父級的next對象的子級查找顯示提示信息的對象，表單以ajax提交時會彈出自定義提示框顯示表單提交狀態)；

                                    （該元素的父節點的下一個節點中顯示） 沒什么卵用
                3=> 側邊提示(會在當前元素的siblings （相鄰） 對象中查找顯示提示信息的對象，表單以ajax提交時會彈出自定義提示框顯示表單提交狀態)；

                                   （該元素的相鄰元素） （常用）
                4=> 側邊提示(會在當前元素的父級的next對象下查找顯示提示信息的對象，表單以ajax提交時不顯示表單的提交狀態)；

                                   （該元素的父節點的下一個節點中顯示）

沒什么卵用

                                                

 

 

 

label（html中的<label>）

                意思就是聚焦 將label中所有的內容聚焦在一起作為一個整體

 

 

tip   

            表單里經常有些文本框需要默認就顯示一個灰色的提示文字，當獲得焦點時提示文字消失，失去焦點時提示文字顯示。

            tip屬性就是用來實現這個效果。它和altercss搭配使用。
             如<input type="text" value="默認提示文字" tip="默認提示文字" altercss="任意寫" />

                    value與tip的值必須是相同的

 

altercss   

           它需要和tip屬性配合使用，altercss指定的樣式名，會在文本框獲得焦點時被刪除，沒有輸入內容而失去焦點時重新加上。

btnSubmit（提交）（初始化參數）

                指定當前表單下的哪一個按鈕觸發表單提交事件，如果表單下有submit按鈕時可以省略該參數。

                如：

btnSubmit:"#sub"

  

是該表單下要綁定點擊提交表單事件的按鈕；

btnReset（重置）（初始化參數）
                 如： btnReset:"#res" 是該表單下要綁定點擊重置表單事件的按鈕;

 

 

ajaxurl：（進行實時驗證）

        使用 ajaxurl 時首先會對我們定義的datatype進行驗證，只有驗證通過后才會請求方法數據。

           前台到后台：

                        前台：

                                在需驗證的文本中綁定 ajaxurl 屬性 后跟上路徑，當我們失去光標時會直接請求我們定義的方法

                        后台：

                          

 

    ajaxurl指定的方法可以接收到Post方式傳過來的兩個值，后台接收分別是param和name（后台定義的屬性驅動），param是該元素的值.

 

                               name是該元素的name屬性值。（可忽略）

                   后台往前台：

                            后台：

                                    使用ajaxurl后台往前台傳值須是含有status（狀態） info（提示信息）值的json數據！

   

                                     status的值 成功為小寫字母 "y" 失敗為小寫字母 "n" （不然樣式會出錯）

                            前台會自動識別

                

 <input type="text" ajaxurl="validformAction!toValidform.action" name="valid.ename" datatype="china">

                

beforeSubmit()（初始化參數）

          函數內可以調用js 進行判斷等等
                在表單驗證通過，提交表單數據之前執行的函數
                函數return false的話表單將不會提交;

                    如：

                                 beforeSubmit:function(){

                                insertEmpInfo();//調用增加方法（ajax）

                                //return false;

                         },