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/