官网示例：

/*
通用表单验证方法
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>&nbsp;</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>

示例代码HTML+JS

转载于:https://www.cnblogs.com/zeran/p/10796442.html

validform_v5.3.2使用示例相关推荐

  1. validform_v5.3.2帮助文档

    引用自:http://validform.club/document.html 官网地址:http://validform.club/index.html validform停更至2013-3-31, ...

  2. .net连接mysql数据_.net连接MYSQL数据库的方法及示例！

    连接MYSQL数据库的方法及示例 方法一: 使用MYSQL推出的MySQL Connector/Net is an ADO.NET driver for MySQL 该组件为MYSQL为ADO.NET ...

  3. CPU Cache原理与示例

    CPU Cache原理与示例 基础知识 现在的 CPU 多核技术,都会有几级缓存,老的 CPU 会有两级内存(L1 和 L2),新的CPU会有三级内存(L1,L2,L3 ),如下图所示: 其中:  ...

  4. 编译器 llvm clang 源码转换示例

    编译器 llvm clang 源码转换示例 从git获取llvm项目的源码方式: git clone https://github.com/llvm/llvm-project.git 下载源码后,进入 ...

  5. Cache Memory技术示例

    Cache Memory技术示例 为什么需要cache?如何判断一个数据在cache中是否命中?cache的种类有哪些,区别是什么? 为什么需要cache memory 先思考第一个问题:程序是如何运 ...

  6. Swift与LLVM-Clang原理与示例

    Swift与LLVM-Clang原理与示例 LLVM 学习 从 简单汇编基础 到 Swift 不简单的 a + 1 作为iOS开发,程序崩溃犹如家常便饭,秉着没有崩溃也要制造崩溃的原则 每天都吃的很饱 ...

  7. C语言与OpenCL的编程示例比较

    C语言与OpenCL的编程示例比较 OpenCL支持数据并行,任务并行编程,同时支持两种模式的混合.对于同步 OpenCL支持同一工作组内工作项的同步和命令队列中处于同一个上下文中的 命令的同步. 在 ...

  8. OpenCL框架与示例

    OpenCL框架与示例 下面的图简单说明了OpenCL的编程框架,图是用的GPU,其他类似: 名词的概念: Platform (平台):主机加上OpenCL框架管理下的若干设备构成了这个平台,通过这个 ...

  9. ONNX MLIR应用示例（含源码链接）

    ONNX MLIR应用示例(含源码链接) 开放式神经网络交换在MLIR中的实现 (http://onnx.ai/onnx-mlir/). Prebuilt Containers 开始使用ONNX-ML ...

最新文章

  1. python3 线程池 ThreadPoolExecutor 简介
  2. MAT之GA：遗传算法（GA）解决M-TSP多旅行商问题
  3. 从Setting.settings到Resource.resx
  4. 信用卡不能提额，是因为使用了招联金融吗？
  5. PID控制器开发笔记之十三：单神经元PID控制器的实现
  6. AttributeError: 'NoneType' object has no attribute 'astype'
  7. 较高Google PR中文博客
  8. 【linux】Grok Debugger本地安装过程
  9. rslogix5000pide实例_用RSLogix5000梯形图实现一种高级PID运算
  10. 十代主板改win7_微星z490主板装win7系统及bios设置教程(支持10代cpu装win7)
  11. word如何弄成两竖列_word10版艺术字怎么弄成竖列 - 卡饭网
  12. 【从蛋壳到满天飞】JS 数据结构解析和算法实现-Arrays(数组)
  13. 用python下载视频代码_python实现视频下载
  14. Highcharts 操作series 的data里的数据
  15. 天空灰蒙蒙的，心情有点像这天气
  16. 理解数据仓库中星型模型和雪花模型
  17. 新增诊所19804家 | 私营诊所要如何主动？才能被患者选择
  18. break语句的作用
  19. OSChina 周日乱弹 —— 请务必让我分担他们的痛苦！
  20. 第33篇：DNS劫持攻击原理讲解及溯源分析的常规步骤

热门文章

  1. 源于实践的ERP123——ERP123方法论(转)
  2. MTK 平台充电开机
  3. java模板引擎 jade_Jade 模板引擎使用
  4. Kubernetes(十一)Kubernetes ingress的实现原理
  5. Python之数据分析（中位数、波动范围、极差、离差、方差、标准差）
  6. 神经网络（十）激活函数DLC
  7. matlab如何取对数坐标,利用Matlab提取图片中曲线数据(线性修正,支持对数坐标)
  8. gitlab下载安装及部署
  9. （数学建模）2013年国赛B题-碎纸片复原python代码
  10. Mycat-eye使用入门教程