官网示例：
/*
通用表单验证方法
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>