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>

2.3.给所需要的表单元素附加属性

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

2.4.初始化

$(".demoform").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="">

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，则会提交表单。}
});

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的使用方法，如有更多问题请参考文档http://validform.rjboy.cn/

Validform基础及用法相关推荐

channelinactive触发后不关闭channel_Go语言 | goroutine不只有基础的用法，还有这些你不知道的操作...
今天是golang专题第15篇文章,我们来继续聊聊channel的使用. 在我们的上篇文章当中我们简单介绍了golang当中channel的使用方法,channel是golang当中一个非常重要的设计 ...
java case用法_Go语言 | goroutine不只有基础的用法，还有这些你不知道的操作
今天是golang专题第15篇文章,我们来继续聊聊channel的使用. 在我们的上篇文章当中我们简单介绍了golang当中channel的使用方法,channel是golang当中一个非常重要的设计 ...
Validform基础及简单用法
先看这个==> https://blog.csdn.net/qq_31873539/article/details/83268049 凡要验证格式的元素均需绑定datatype属性,dataty ...
shell基础---exit用法
shell基础篇---exit用法 exit:退出脚本 exit # (#可以使用0至255,0表示正确,其他表示不同的错误) 如果脚本没有明确定义退出状态码,那么,最后执行的一条命令的退出码即为脚本 ...
Python基础高级用法,必须要掌握的知识点
1.ChainMap 当我们有2个字段o1和o2 你想将它们从合并后进行查找操作(比如先从o1找,如果o1找不到,再去o2找),如下: from collections import ChainMap ...
sql中变量用法_SQL变量：基础和用法
sql中变量用法 In this article, we will learn the notions and usage details of the SQL variable. In SQL Se ...
Rust基础-Vec用法
Vec 定义了一个动态增长的数组,与java ArrayList类似.基本也定义了增删改查操作: pub fn push(&mut self, value: T) pub fn remove( ...
c语言单片机if用法,单片机学习之：C语言基础——if 用法
//========if 用法(一)========= //*用法格式: if (表达式) 语句; //if判断语句,若表达式为真,则执行语句,否则不执行.且if仅能控制一条语句. ××××××××× ...
Java基础 switch用法
流程控制语句选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句不同,它只能针对某个表达式的值作出判断,从而决定程序执行哪一段代码.例如,在程序中使用数字1~7来表 ...

Validform基础及用法

Validform基础及用法相关推荐

最新文章

热门文章