一.validform有什么用？
網頁上有大量的input需要你進行驗證的時候，如果是彈窗的話，需要不停地判斷，如果為空，彈窗。如果不是數字，彈窗。
所以要將這么多驗證交給一個js去驗證。
二.我現在知道的全頁面js驗證文件
1.jquery.validat.js
這東西就是放在我們的vs中的那個驗證用js
這貨看起來高大上，但是我就被坑了。。。
這貨每個input都要加name啊，不然不驗證。。。后來想了想，這東西是用來給form表單做驗證的，沒有name估計就不發回后台，於是就不驗證（如果我的做法不對的話，請指正）
用這貨怎么驗證ajax提交的數據
添加按鈕綁定click事件，function中提交對應的form表單。之后在validate方法中的submithandler這塊把對應的ajax方法添加進去。
$("#btnAdd").on("click", function() {
$("#validateform").submit();
});
$("#validateform").validate({
rules: {
txtUrl: {
required: true,
url: true //確定是不是url
},
txtRequired: {
required: true
}
},
submitHandler: function(form) {
addNewAd();
}
});
在網上好像還有配合jquery.metadata.js來使用的，不過沒有深入研究。
2.validfrom.js
這個驗證js我感覺還不錯，至少整個是中文的，文檔研究起來很容易。
優點：只要每個需要驗證的對象都有了datatype這個屬性，其他的沒有也可以檢測，這點對於動態生成的表單來說十分的友好。
不用再像jquery.validate.js那樣為每個對象都綁定一個不重樣的name，不同的name想檢測url還要寫很多行rules（至少我是這么寫的，不知道有沒有更簡單的方法）
三.validateform.js簡單使用方法
1.datatype
要想標識出來想要驗證的對象，我們就需要給這個對象綁定datatype屬性，validform.js已經內置了10種驗證格式，如果不夠，我們還可以使用
來對驗證格式進行擴展。
1.1 datatype=*
這個驗證是用來表示當前的對象不能為空的，任何字符均可
1.2 datatype=*6-16
validform這個js有個優點，它會自動擴展你所寫的驗證格式。不同的字段我們可能要求的字符數量不一樣，用戶名這里你寫了*6-16，要求用戶填入6到16位的字符。可標題這里又要求填入2到5個字符，難道我們要在驗證格式這里再寫一個*2-5嗎？不用！形如"*6-16"的datatype，Validform會自動擴展，可以指定任意的數值范圍。如內置基本類型有"*6-16"，那么你綁定 datatype="*4-12"就表示4到12位任意字符。如果你自定義了一個datatype="zh2-4"，表示2到4位中文字符，那么 datatype="zh2-6"就表示2到6位中文字符。
1.3 datatype=url
可以用來驗證網址。
1.4 datatype=e
可以用來驗證電子郵箱地址
1.5 datatype=m
用來驗證手機號，但是給的正則表達式有問題，對於新出現的177號段之類的沒有加入進去，這塊需要注意一下。
1.6 其他注意事項
datatype支持規則累加或單選。用","分隔表示規則累加；用"|"分隔表示規則多選一，即只要符合其中一個規則就可以通過驗證，綁定的規則會依次 驗證，只要驗證通過，后面的規則就會忽略不再比較。如綁定datatype="m|e"，表示既可以填寫手機號碼，也能填寫郵箱地址，如果知道填入的是手 機號碼，那么就不會再檢測他是不是郵箱地址；datatype="zh,s2-4"，表示要符合自定義類型"zh"，也要符合規則"s2-4"。
直接綁定正則：如可用這樣寫datatype="/\w{3,6}/i"，要求是3到6位的字母，不區分大小寫；
支持簡單的邏輯運算：如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/"，
這 個表達式的意思是：可以是手機號碼；或者是郵箱地址，但字符長度必須在4到18位；或者是3到6位的字母，不區分大小寫；或者輸入 validform.rjboy.cn，區分大小寫。這里","分隔相當於邏輯運算里的"&&"； "|"分隔相當於邏輯運算里的"||"；不支持括號運算。
支持簡單的邏輯運算：如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/"，
這 個表達式的意思是：可以是手機號碼；或者是郵箱地址，但字符長度必須在4到18位；或者是3到6位的字母，不區分大小寫；或者輸入 validform.rjboy.cn，區分大小寫。這里","分隔相當於邏輯運算里的"&&"； "|"分隔相當於邏輯運算里的"||"；不支持括號運算。
2.ignore
綁定了ignore="ignore"的表單元素，在有輸入時，會驗證所填數據是否符合datatype所指定數據類型，沒有填寫內容時則會忽略對它的驗證；
如何在表單中控制如果某幾項要填都填，要不填都不填。
對這幾項賦給相同的class 比如AllNeedOrEmpty
之后在初始化參數中的beforeCheck部分對這個class做操作，具體代碼如下
1 beforeCheck: function(curform) { 2 $("#sliderAd ul").each(function() { 3 var needIgnore = true; 4 var _this = $(this); 5 var checkList = _this.find("input[class*=AllNeedOrEmpty]"); 6 checkList.each(function() { 7 var that = $(this); 8 if (that.val() != "") { 9 checkList.each(function() { 10 $(this).removeAttr("ignore"); 11 }); 12 needIgnore = false; 13 } 14 }); 15 if (needIgnore) { 16 checkList.each(function() { 17 $(this).attr("ignore", "ignore"); 18 }); 19 } 20 }); 21 },
上面的代碼只是提供一個思路，肯定有更好的方法，
比如使用validform對象中的ignore方法和unignore方法，通過向這兩個方法傳入表單元素來忽略和重新獲取驗證效果。
不過這兩種方法是對元素賦給和去掉dataIgnore來實現驗證與否。
源碼如下：
1 ignore: function(selector) { 2 var obj = this; 3 var selector = selector || "[datatype]" 4 5 $(obj.forms).find(selector).each(function() { 6 $(this).data("dataIgnore", "dataIgnore").removeClass("Validform_error"); 7 }); 8 9 return this; 10 }, 11 12 unignore: function(selector) { 13 var obj = this; 14 var selector = selector || "[datatype]" 15 16 $(obj.forms).find(selector).each(function() { 17 $(this).removeData("dataIgnore"); 18 }); 19 20 return this; 21 },
我的方法是控制ignore這個attr,而validform方法則是在元素上利用data方法來實現是否驗證，思路基本一致，但是當元素是動態生成的時候我覺得還是ignore=ignore這個方法比較好，因為省事啊。
歡迎評論相互探討。
3.初始化參數
如下是官網例子中給出的所有的可用參數
1 $(".demoform").Validform({ 2 btnSubmit: "#btn_sub", //提交按鈕 3 btnReset: ".btn_reset", 4 tiptype: 1, // 5 ignoreHidden: false, 6 dragonfly: false, 7 tipSweep: true, 8 label: ".label", 9 showAllError: false, 10 postonce: true, 11 ajaxPost: true, 12 datatype: { 13 "*6-20": /^[^\s]{6,20}$/, 14 "z2-4": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/, 15 "username": function(gets, obj, curform, regxp) { 16 //參數gets是獲取到的表單元素值，obj為當前表單元素，curform為當前驗證的表單，regxp為內置的一些正則表達式的引用; 17 var reg1 = /^[\w\.]{4,16}$/, 18 reg2 = /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/; 19 if (reg1.test(gets)) { 20 return true; 21 } 22 if (reg2.test(gets)) { 23 return true; 24 } 25 return false; 26 //注意return可以返回true 或 false 或 字符串文字，true表示驗證通過，返回字符串表示驗證失敗，字符串作為錯誤提示顯示，返回false則用errmsg或默認的錯誤提示; 27 }, 28 "phone": function() { 29 // 5.0 版本之后，要實現二選一的驗證效果，datatype 的名稱 不 需要以 "option_" 開頭; 30 } 31 }, 32 usePlugin: { 33 swfupload: {}, 34 datepicker: {}, 35 passwordstrength: {}, 36 jqtransform: { 37 selector: "select,input" 38 } 39 }, 40 beforeCheck: function(curform) { 41 //在表單提交執行驗證之前執行的函數，curform參數是當前表單對象。 42 //這里明確return false的話將不會繼續執行驗證操作; 43 }, 44 beforeSubmit: function(curform) { 45 //在驗證成功后，表單提交前執行的函數，curform參數是當前表單對象。 46 //這里明確return false的話表單將不會提交; 47 }, 48 callback: function(data) { 49 //返回數據data是json對象，{"info":"demo info","status":"y"} 50 //info: 輸出提示信息; 51 //status: 返回提交數據的狀態,是否提交成功。如可以用"y"表示提交成功，"n"表示提交失敗，在ajax_post.php文件返回數據里自定字符，主要用在callback函數里根據該值執行相應的回調操作; 52 //你也可以在ajax_post.php文件返回更多信息在這里獲取，進行相應操作； 53 //ajax遇到服務端錯誤時也會執行回調，這時的data是{ status:**, statusText:**, readyState:**, responseText:** }； 54 55 //這里執行回調操作; 56 //注意：如果不是ajax方式提交表單，傳入callback，這時data參數是當前表單對象，回調函數會在表單驗證全部通過后執行，然后判斷是否提交表單，如果callback里明確return false，則表單不會提交，如果return true或沒有return，則會提交表單。 57 } 58 });
3.1 如何使用ajax提交數據，而不提交表單。
1 beforeSubmit: function (curform) { 2 addNewAd(); 3 return false; 4 //這里明確return false的話表單將不會提交; 5 }
直接在beforeSubmit中加上對應的ajax提交函數,並加上return false就可以保證表單不會被提交而執行我們的ajax函數。
3.2 tiptype
用來設置提示信息的展示方式，可用的值有：1、2、3、4和function函數，默認tiptype為1。
1代表自定義彈出框提示。
2代表側邊提示，會在當前元素的父級的next對象的子級查找顯示提示信息的對象。
如果不存在就會創建
1 if (tiptype == 2) { 2 if ($(this).parent().next().find(".Validform_checktip").length == 0) { 3 $(this).parent().next().append("<span class='Validform_checktip' />"); 4 $(this).siblings(".Validform_checktip").remove(); 5 } 6 }
3也是代表的側邊提示，不過它是會在當前元素的siblings對象中查找顯示提示信息的對象
同樣也是不存在就會創建
1 if (tiptype == 3) { 2 if ($(this).siblings(".Validform_checktip").length == 0) { 3 $(this).parent().append("<span class='Validform_checktip' />"); 4 $(this).parent().next().find(".Validform_checktip").remove(); 5 } 6 }
4也是側邊顯示會在當前元素的父級的next對象下查找顯示提示信息的對象
還可以傳入自定義函數，實現你想要的提示效果。
以上就是我認為validform.js中需要注意的事情和使用方法的展示，歡迎討論，拍磚。