Validform基礎及用法

1.簡介：

Validform的核心思想為将所有的驗證條件以及驗證的提示資訊綁定在每個表單元素上，讓驗證該代碼時對表單各個元素的值是否跟綁定的驗證條件相符，這樣就可以随便的添加或者去掉任意一表單元素而不必去修改驗證代碼，進而僅适用一行代碼去完成整站的表單驗證。

2.使用方法

2.1.引入css(官網文檔中下載下傳css)

http://validform.rjboy.cn/document.html 2.2.引入js

//（jquery 1.4.3 以上版本都可以）
<script type="text/javascript" src="http://validform.rjboy.cn/wp-content/themes/validform/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.1/Validform_v5.1_min.js"></script>

Validform基礎及用法

2.3.給所需要的表單元素附加屬性

<form class="demoform">
<input type="text" value="" name="name" datatype="s5-16" errormsg="昵稱至少5個字元,最多16個字元！" />
</form>

Validform基礎及用法

2.4.初始化

$(".demoform").Validform();

Validform基礎及用法

3.綁定的附加屬性

3.1.凡是需要驗證格式的元素均需要綁定datatype屬性，datatype可選值内置了10類，來指定不同的驗證格式。如果還不能滿足所需的驗證需求，可以傳入自定義datatype；

可以綁定的附加屬性有：datatype，nullmsg，sucmsg，errormsg，ignore，recheck，tip，altercss，ajaxurl和plugin

//綁定方法如下
<!--ajax實時驗證使用者名-->
<input type="text" value="" name="name" datatype="e" ajaxurl="valid.php?myparam1=value1&myparam2=value2" sucmsg="使用者名驗證通過！" nullmsg="請輸入使用者名！" errormsg="請用郵箱或手機号碼注冊！"  />
 
<!--密碼-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密碼範圍在6~15位之間！" />
<!--确認密碼-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您兩次輸入的賬号密碼不一緻！" />
 
<!--預設提示文字-->
<textarea tip="請在這裡輸入您的意見。" errormsg="很感謝您花費寶貴時間給我們提供回報，請填寫有效内容！"  datatype="s" altercss="gray" class="gray" name="msg" value="">請在這裡輸入您的意見。</textarea>
 
<!--使用swfupload插件-->
<input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value="">
<input type="hidden" value="" pluginhidden="swfupload">
 
<!--使用passwordStrength插件-->
<input type="password" errormsg="密碼至少6個字元,最多18個字元！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">
<div class="passwordStrength" style="display:none;"><b>密碼強度：</b> <span>弱</span><span>中</span><span class="last">強</span></div>
 
<!--使用DatePicker插件-->
<input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

Validform基礎及用法

4.初始化參數說明

$(".demoform").Validform({
    btnSubmit:"#btn_sub", //觸發送出的元素
    btnReset:".btn_reset",//觸發重置表單的元素
    tiptype:1, //彈出框提示預設為1，可選值為1,2,3和function函數
    ignoreHidden:false,//預設為false，布爾值類型，對hidden的表單元素将不做驗證
    dragonfly:false,//預設為false,布爾值類型，值為空時不做驗證
    tipSweep:true,//預設false，布爾值類型，各表單元素隻會在表單送出時進行觸發，表單元素在blur時不會進行觸發
    label:".label",//在沒有綁定nullmsg時查找要顯示的提示文字，預設查找“.Validform_label”下的文字
    showAllError:false,//預設false，布爾值類型，送出表單時所有錯誤資訊都會顯示，一般驗證不通過的對象時就會停止，不會進行下一表單的驗證，隻顯示該元素的錯誤資訊
    postonce:true,//預設false，指定是否開啟二次送出防禦，在資料成功送出後，表單将不能再繼續送出。
    ajaxPost:true,//預設false，使用ajax方法進行表單送出方式，将會将資料POST到config方法或表單屬性裡的action屬性設定的位址。
    datatype:{
        "*6-20": /^[^\s]{6,20}$/,
        "z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
        "username":function(gets,obj,curform,regxp){
            //參數gets是擷取到的表單元素值，obj為目前表單元素，curform為目前驗證的表單，regxp為内置的一些正規表達式的引用;
            var reg1=/^[\w\.]{4,16}$/,
                reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
 
            if(reg1.test(gets)){return true;}
            if(reg2.test(gets)){return true;}
            return false;
 
            //注意return可以傳回true 或 false 或 字元串文字，true表示驗證通過，傳回字元串表示驗證失敗，字元串作為錯誤提示顯示，傳回false則用errmsg或預設的錯誤提示;
        },
        "phone":function(){
            // 5.0 版本之後，要實作二選一的驗證效果，datatype 的名稱 不 需要以 "option_" 開頭;    
        }
    },
    usePlugin:{
        swfupload:{},
        datepicker:{},
        passwordstrength:{},
        jqtransform:{
            selector:"select,input"
        }
    },
    beforeCheck:function(curform){
        //在表單送出執行驗證之前執行的函數，curform參數是目前表單對象。
        //這裡明确return false的話将不會繼續執行驗證操作;    
    },
    beforeSubmit:function(curform){
        //在驗證成功後，表單送出前執行的函數，curform參數是目前表單對象。
        //這裡明确return false的話表單将不會送出;    
    },
    callback:function(data){
        //傳回資料data是json對象，{"info":"demo info","status":"y"}
        //info: 輸出提示資訊;
        //status: 傳回送出資料的狀态,是否送出成功。如可以用"y"表示送出成功，"n"表示送出失敗，在ajax_post.php檔案傳回資料裡自定字元，主要用在callback函數裡根據該值執行相應的回調操作;
        //你也可以在ajax_post.php檔案傳回更多資訊在這裡擷取，進行相應操作；
        //ajax遇到服務端錯誤時也會執行回調，這時的data是{ status:**, statusText:**, readyState:**, responseText:** }；
 
        //這裡執行回調操作;
        //注意：如果不是ajax方式送出表單，傳入callback，這時data參數是目前表單對象，回調函數會在表單驗證全部通過後執行，然後判斷是否送出表單，如果callback裡明确return false，則表單不會送出，如果return true或沒有return，則會送出表單。
    }
});

Validform基礎及用法

5.demo例子使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/contract.css">
    <style>
        label.required {
            color: #3889c9!important;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <form  id="demoForm">
                <div class="base-fieldset-content clearfix">
                    <div class="base-grid3-2 marginb10">
                        <label class="base-form-txt required">項目名稱</label>
                        <div class="base-input-box">
                            <input class="base-form-input Validform_error" datatype="*" nullmsg="該項不能為空" name="project_name"
                                maxlength="200" id="project_name" type="text">
                        </div>
                    </div>
                    <div class="base-grid3-2 marginb10">
                        <label class="base-form-txt required">合同名稱（全稱）</label>
                        <div class="base-input-box">
                            <input class="base-form-input" datatype="*" nullmsg="該項不能為空" name="contract_name" id="contract_name"
                                maxlength="200" type="text">
                        </div>
                    </div>
                    <div class="base-grid3-1 marginb10">
                        <label class="base-form-txt">合同編号</label>
                        <div class="base-input-box">
                            <input class="base-form-input" id="contract_no" name="contract_no" maxlength="45" type="text">
                        </div>
                    </div>
                    <div class="base-grid3-2 marginb10">
                        <label class="base-form-txt required">業主名稱</label>
                        <div class="base-input-box">
                            <input class="base-form-input Validform_error" type="text" id="first_partyName" datatype="*"
                                nullmsg="該項不能為空" >
                            <input type="hidden" id="first_party" name="first_party">
                        </div>
                    </div>
                    <div class="base-grid1 marginb10">
                        <div class="layui-btn-container">
                            <a class="layui-btn layui-btn-warm layui-btn-sm btn_reset">
                                <i class="layui-icon layui-icon-refresh-3"></i> 重置
                            </a>
                            <a class="layui-btn layui-icon-normal layui-btn-sm" id="btn_sub">
                                <i class="layui-icon layui-icon-ok-circle"></i> 送出
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="../layui/layui.all.js"></script>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/Validform_v5.3.2.js"></script>
    <script>
        var isSubmit = false;
        $("#demoForm").Validform({
            btnSubmit: "#btn_sub", //觸發送出的元素
            btnReset: ".btn_reset", //觸發重置表單的元素
            // tiptype: 1, //彈出框提示預設為1，可選值為1,2,3和function函數
            tiptype:function(msg,o,cssctl){
                if(o.type == 3){
                    layer.tips(msg, o.obj);
                }
            }, 
            ignoreHidden: false, //預設為false，布爾值類型，對hidden的表單元素将不做驗證
            dragonfly: false, //預設為false,布爾值類型，值為空時不做驗證
            tipSweep: true, //預設false，布爾值類型，各表單元素隻會在表單送出時進行觸發，表單元素在blur時不會進行觸發
            label: ".label", //在沒有綁定nullmsg時查找要顯示的提示文字，預設查找“.Validform_label”下的文字
            showAllError: false, //預設false，布爾值類型，送出表單時所有錯誤資訊都會顯示，一般驗證不通過的對象時就會停止，不會進行下一表單的驗證，隻顯示該元素的錯誤資訊
            postonce: true, //預設false，指定是否開啟二次送出防禦，在資料成功送出後，表單将不能再繼續送出。
            ajaxPost: true, //預設false，使用ajax方法進行表單送出方式，将會将資料POST到config方法或表單屬性裡的action屬性設定的位址。
            datatype: {
                "*6-20": /^[^\s]{6,20}$/,
                "z2-4": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
                "username": function (gets, obj, curform, regxp) {
                    //參數gets是擷取到的表單元素值，obj為目前表單元素，curform為目前驗證的表單，regxp為内置的一些正規表達式的引用;
                    var reg1 = /^[\w\.]{4,16}$/,
                        reg2 = /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
                    if (reg1.test(gets)) {
                        return true;
                    }
                    if (reg2.test(gets)) {
                        return true;
                    }
                    return false;
                    //注意return可以傳回true 或 false 或 字元串文字，true表示驗證通過，傳回字元串表示驗證失敗，字元串作為錯誤提示顯示，傳回false則用errmsg或預設的錯誤提示;
                },
                "phone": function () {
                    // 5.0 版本之後，要實作二選一的驗證效果，datatype 的名稱 不 需要以 "option_" 開頭;    
                }
            },
            usePlugin: {
                swfupload: {},
                datepicker: {},
                passwordstrength: {},
                jqtransform: {
                    selector: "select,input"
                }
            },
            beforeCheck: function (curform) {
                console.log(curform)
                //在表單送出執行驗證之前執行的函數，curform參數是目前表單對象。
                //這裡明确return false的話将不會繼續執行驗證操作;    
            },
            beforeSubmit: function (curform) {
                console.log(curform)
                if(isSubmit){
                    return false;
                }
                isSubmit = true;
                return true;
                //在驗證成功後，表單送出前執行的函數，curform參數是目前表單對象。
                //這裡明确return false的話表單将不會送出;    
            },
            callback: function (data) {
                if(data.success){
                    layer.msg("送出成功",function(){
                        window.open("http://www.baidu.com")
                    })
                    isSubmit = false;
                }else{
                    isSubmit = false;
                }
                console.log(data)
                //傳回資料data是json對象，{"info":"demo info","status":"y"}
                //info: 輸出提示資訊;
                //status: 傳回送出資料的狀态,是否送出成功。如可以用"y"表示送出成功，"n"表示送出失敗，在ajax_post.php檔案傳回資料裡自定字元，主要用在callback函數裡根據該值執行相應的回調操作;
                //你也可以在ajax_post.php檔案傳回更多資訊在這裡擷取，進行相應操作；
                //ajax遇到服務端錯誤時也會執行回調，這時的data是{ status:**, statusText:**, readyState:**, responseText:** }；
                //這裡執行回調操作;
                //注意：如果不是ajax方式送出表單，傳入callback，這時data參數是目前表單對象，回調函數會在表單驗證全部通過後執行，然後判斷是否送出表單，如果callback裡明确return false，則表單不會送出，如果return true或沒有return，則會送出表單。
            }
        });
    </script>
</body>
</html>

Validform基礎及用法

以上為大體validform的使用方法，如有更多問題請參考文檔

http://validform.rjboy.cn/

Validform基礎及用法

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條