官網示例：
/*
通用表單驗證方法
Validform version 5.3.2
By sean during April 7, 2010 - March 26, 2013
For more information, please visit http://validform.rjboy.cn
Validform is available under the terms of the MIT license.
*/
Demo:
$(".demoform").Validform({//$(".demoform")指明是哪一表單需要驗證,名稱需加在form表單上;
btnSubmit:"#btn_sub", //#btn_sub是該表單下要綁定點擊提交表單事件的按鈕;如果form內含有submit按鈕該參數可省略;
btnReset:".btn_reset",//可選項 .btn_reset是該表單下要綁定點擊重置表單事件的按鈕;
tiptype:1, //可選項 1=>pop box,2=>side tip(parent.next.find; with default pop),3=>side tip(siblings; with default pop),4=>side tip(siblings; none pop)，默認為1，也可以傳入一個function函數，自定義提示信息的顯示方式（可以實現你想要的任何效果，具體參見demo頁）;
ignoreHidden:false,//可選項 true | false 默認為false，當為true時對:hidden的表單元素將不做驗證;
dragonfly:false,//可選項 true | false 默認false，當為true時，值為空時不做驗證；
tipSweep:true,//可選項 true | false 默認為false，只在表單提交時觸發檢測，blur事件將不會觸發檢測（實時驗證會在后台進行，不會顯示檢測結果）;
label:".label",//可選項 選擇符，在沒有綁定nullmsg時查找要顯示的提示文字，默認查找".Validform_label"下的文字;
showAllError:false,//可選項 true | false，true：提交表單時所有錯誤提示信息都會顯示，false：一碰到驗證不通過的就停止檢測后面的元素，只顯示該元素的錯誤信息;
postonce:true, //可選項 表單是否只能提交一次，true開啟，不填則默認關閉;
ajaxPost:true, //使用ajax方式提交表單數據，默認false，提交地址就是action指定地址;
datatype:{//傳入自定義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對象的方法和屬性：
tipmsg：自定義提示信息，通過修改Validform對象的這個屬性值來讓同一個頁面的不同表單使用不同的提示文字；
dataType：獲取內置的一些正則；
eq(n)：獲取Validform對象的第n個元素;
ajaxPost(flag,sync,url)：以ajax方式提交表單。flag為true時，跳過驗證直接提交，sync為true時將以同步的方式進行ajax提交，傳入了url地址時，表單會提交到這個地址；
abort()：終止ajax的提交；
submitForm(flag,url)：以參數里設置的方式提交表單，flag為true時，跳過驗證直接提交，傳入了url地址時，表單會提交到這個地址；
resetForm()：重置表單；
resetStatus()：重置表單的提交狀態。傳入了postonce參數的話，表單成功提交后狀態會設置為"posted"，重置提交狀態可以讓表單繼續可以提交；
getStatus()：獲取表單的提交狀態，normal：未提交，posting：正在提交，posted：已成功提交過；
setStatus(status)：設置表單的提交狀態，可以設置normal，posting，posted三種狀態，不傳參則設置狀態為posting，這個狀態表單可以驗證，但不能提交；
ignore(selector)：忽略對所選擇對象的驗證；
unignore(selector)：將ignore方法所忽略驗證的對象重新獲取驗證效果；
addRule(rule)：可以通過Validform對象的這個方法來給表單元素綁定驗證規則；
check(bool,selector):對指定對象進行驗證(默認驗證當前整個表單)，通過返回true，否則返回false（綁定實時驗證的對象，格式符合要求時返回true，而不會等ajax的返回結果），bool為true時則只驗證不顯示提示信息；
config(setup):可以通過這個方法來修改初始化參數，指定表單的提交地址，給表單ajax和實時驗證的ajax里設置參數；
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
我自己寫了個注冊的例子，以免自己以后忘記了，適用於我自己的項目。
備忘：
1、提交會按照form的action地址提交，提交和提交后頁面都會彈出提示框，顯示"提交中……"，保存的action返回數據格式為json，返回信息的狀態可以任意名稱表示，比如code、status、但是提示信息需要使用info命名，不然彈出曾不會展示返回的提示信息。
2、保存提交的彈出層不會自動關閉，需用戶手動關閉。
3、二選一的驗證，非必填的要設置ignore="ignore"，不填寫則不驗證。
4、下拉框datatype="*"即可。
5、輸入框后邊的提示要跟laber標簽，標簽class默認為Validform_label。
6、自定義datatype類型可以寫在Validform函數的datatype:{}里
7、tiptype=3，設置為3我個人覺得比較醒目，不必每個標簽都設置nullmsg，默認取input標簽前邊的中文；樣式：
例子代碼：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>user_register</title> <link type="text/css" href="~/Data/form/css/style.css" rel="stylesheet" /> <script type="text/javascript" src="~/Data/form/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="~/Data/form/js/yzform_min.js"></script> </head> <body> <div id="boxx"> <div class="logoa-big" style="background-color: #3768b5; width: 100%;"> <div style="width: 1300px; height: auto; margin-left: 600px; overflow: hidden;"> <div class="sentca" style="padding: 80px 20px;"> <div id="login_box" style="height: auto; width: 760px; padding-bottom: 50px;"> <form id="form1" method="post" action="/save/seve"> <ul class="register-ul"> <li> <label> </label> <label class="label">帶<span class="need">*</span>的為必填項。</label> </li> <li> <label class="label"><span class="need">*</span>姓名：</label> <input type="text" value="" datatype="username" name="name" /> <laber class="Validform_label">填寫2-8個漢字或4-16個字母或字符</laber> </li> <li> <label class="label"><span class="need">*</span>登錄名：</label> <input type="text" value="" datatype="s6-18|e" name="lg_name" /> <laber class="Validform_label">請填寫郵箱或6-18位數字和字母</laber> </li> <li> <label class="label"><span class="need">*</span>密碼：</label> <input type="password" value="" datatype="s8-20" name="pwd" /> <laber class="Validform_label">請填寫8-20位</laber> </li> <li> <label class="label"><span class="need">*</span>確認密碼：</label> <input type="password" value="" datatype="s8-20" name="pwd_c" recheck="pwd" /> <laber class="Validform_label"></laber> </li> <li> <label class="label"><span class="need">*</span>省：</label> <select name="province" id="province" datatype="*" onchange="changgeProvince();change_va()"> </select> </li> <li> <label class="label"><span class="need">*</span>市：</label> <select name="city" id="city" datatype="*" onchange="changgeSelect_Shi();change_va()"> </select> </li> <li> <label class="label"><span class="need">*</span>區/縣：</label> <select name="district" datatype="*" id="district" onchange="change_va()"> </select> <input type="hidden" name="province_va" id="province_va" /> <input type="hidden" name="city_va" id="city_va" /> <input type="hidden" name="district_va" id="district_va" /> </li> <li> <label class="label">鄉鎮：</label> <input type="text" value="" datatype="*1-60" ignore="ignore" name="township" /> </li> <li> <label class="label">村：</label> <input type="text" value="" datatype="*1-60" ignore="ignore" name="village" /> </li> <li> <label class="label">地址：</label> <input type="text" value="" datatype="*1-100" ignore="ignore" name="address" /> <laber class="Validform_label">最多填寫100個字。</laber> </li> <li> <label class="label"><span class="need">*</span>電子郵箱：</label> <input type="text" value="" datatype="e" name="em" /> </li> <li> <label class="label"><span class="need">*</span>性別（F女M男）：</label> <select name="sex" datatype="*" id="sex"> @Html.Raw(ViewBag.sex) </select> </li> <li> <label class="label"><span class="need">*</span>民族：</label> <select name="nation" datatype="*" id="nat"> @Html.Raw(ViewBag.nat) </select> </li> <li> <label class="label">座機：</label> <input type="text" value="" datatype="n6-16" ignore="ignore" name="tel" id="tel" /> </li> <li> <label class="label"><span class="need">*</span>手機號碼：</label> <input type="text" value="" datatype="phone" name="phone" class="phone" /> <laber class="Validform_label">手機號與座機至少填寫一項。</laber> </li> <li> <label class="label">QQ：</label> <input type="text" value="" ignore="ignore" datatype="n6-20" name="qq" /> </li> <li> <label class="label">微信：</label> <input type="text" value="" ignore="ignore" datatype="s1-60" name="wechat" /> </li> <li> <label class="label"><span class="need">*</span>身份證號：</label> <input type="text" value="" datatype="n15-18" name="cardnum" /> </li> <li> <label class="label"><span class="need">*</span>驗證碼：</label> <input type="text" tip="請輸入驗證碼" name="vicode" datatype="n4-4" errormsg="請填寫4位數字"> <img id="Img0" src="" onclick="javascript:changeImages('0');" style="cursor: pointer;" /> </li> </ul> <input type="button" class="register-button" id="btn_save" value="立即注冊"> <input type="button" class="register-button" id="btn_reset" value="重置"> </form> </div> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> $(function () { $("#form1").Validform({ btnSubmit: "#btn_save", btnReset: "#btn_reset", ignoreHidden: false, tiptype: 3, label: ".label", showAllError: true, postonce: true, ajaxPost: true, datatype: { "*6-20": /^[^\s]{6,20}$/, "z2-4": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/, "username": function (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; }, "phone": function (gets, obj, curform, regxp) { var reg1 = regxp["m"], reg2 = /[\d]{6,20}/, telephone = curform.find("#telephone"); if (reg2.test(telephone.val())) { return true; } if (reg1.test(gets)) { return true; } return false; } }, callback: function (data) { if (data.status == "y") { if (data.rvurl != "" && data.rvurl != undefined && data.rvurl != "undefined") { window.location.href = data.url; } isSubmit = false; } else { isSubmit = false; } changeImages("0"); } }); loadSheng(); }); function changgeProvince() { var shengselectText = $("#province option:selected").val(); var shiselect = -1; var quselect = -1; loadShi(shengselectText, shiselect, quselect); } function changgeSelect_Shi() { var shengselectText = -1; var shiselect = $("#city option:selected").val(); var quselect = -1; loadShi(shengselectText, shiselect, quselect); } function loadSheng(shenV, shiV, quV) { $("#province").empty(); $("#city").empty(); $("#district").empty(); $("<option value=\"\">請選擇省</option>").appendTo("#province"); $.get("sheng", { parent_id: 0, ptype: 1, rdm: Math.random() }, function (date) { if (date == "0") { $("<option value=\"\">請選擇省</option>").appendTo("#province"); } else { var dataObj = eval("(" + date + ")"); //轉換為json對象 $.each(dataObj, function (i) { var RegionModel = dataObj[i]; $("<option value=\"" + RegionModel.id + "\">" + RegionModel.name + "</option>").appendTo("#province"); }); loadShi(shenV, shiV, quV); if (shenV == "" || shenV == undefined || shenV == "undefined") { $("#province").get(0).selectedIndex = 0; } else { $("#province").val(shenV); } } }); } function loadShi(shenV, shiV, quV) { $("#city").empty(); $("#district").empty(); //添加請選擇 var sheng = shenV; if (shenV == null || shenV == "-1") { sheng = $("#province").val(); } $("<option value=\"\">請選擇市</option>").appendTo("#city"); $.get("shi", { parent_id: sheng, ptype: 2, rdm: Math.random() }, function (date) { if (date == "0") { } else { var dataObj = eval("(" + date + ")"); //轉換為json對象 $.each(dataObj, function (i) { var RegionModel = dataObj[i]; $("<option value=\"" + RegionModel.id + "\">" + RegionModel.name + "</option>").appendTo("#city"); }); loadQu(shenV, shiV, quV); if (shiV == "" || shiV == undefined || shiV == "undefined") { $("#city").get(0).selectedIndex = 0; } else { $("#city").val(shiV); } } }); } function loadQu(shenV, shiV, quV) { $("#district").empty(); var sheng = shenV; var shi = shiV; if (sheng == null || sheng == "-1") { sheng = $("#province").val(); } if (shi == null || shi == "-1" || shi == "0") { shi = $("#city").val(); } $("<option value=\"\">請選擇區/縣</option>").appendTo("#district"); $.get("qy", { parent_id: shi, ptype: 3, rdm: Math.random() }, function (date) { if (date == "0") { } else { var dataObj = eval("(" + date + ")"); //轉換為json對象 $.each(dataObj, function (i) { var RegionModel = dataObj[i]; $("<option value=\"" + RegionModel.id + "\">" + RegionModel.name + "</option>").appendTo("#district"); }); $("#district").val(quV); } }); } function changeImages(num) { var d = new Date(); var obj = document.getElementById('Img' + num); obj.src = "vidode?tmep_seq=" + d.getTime(); } changeImages("0"); function change_va() { $("#province_va").val($("#province :selected").text()); $("#city_va").val($("#city :selected").text()); $("#district_va").val($("#district :selected").text()); } </script>