备案控制台
开发者社区 开发与运维 文章 正文

Validform基础及用法

2021-09-14 247
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>

image.gif

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

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

image.gif

2.4.初始化

$(".demoform").Validform();

image.gif

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="">

image.gif

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

image.gif

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>

image.gif

以上为大体validform的使用方法，如有更多问题请参考文档http://validform.rjboy.cn/


文章标签：
JavaScript
前端开发
JERSENLEIBOY
目录
相关文章
周盛欢
|
3天前
|
缓存 监控 Java
Hysterix的概念、作用、使用方法
Hysterix的概念、作用、使用方法
周盛欢
6 0
大花爱编程
|
2月前
|
安全 C#
c#学习相关系列之as和is的相关用法
c#学习相关系列之as和is的相关用法
大花爱编程
13 0
sumith
|
4月前
|
Python
python基础学习 -- 函数高级用法
python基础学习 -- 函数高级用法
sumith
17 0
汤姆z
|
9月前
2023-4-11-chrono库用法学习
2023-4-11-chrono库用法学习
汤姆z
47 0
東方幻想鄉
|
5月前
|
存储 数据处理 API
【C# 控制台】主要讲述以下C#的部分语法，部分基础，做到了解作用
【C# 控制台】主要讲述以下C#的部分语法，部分基础，做到了解作用
東方幻想鄉
62 0
Iric
|
Windows
基础用法
基础用法
Iric
73 0
IT工藤新一
|
存储 前端开发 JavaScript
Web前端学习：JaveScript基础 [简介、用法、变量及数据类型、流程控制及函数] （附源代码）
Web前端学习：JaveScript基础 [简介、用法、变量及数据类型、流程控制及函数] （附源代码）
IT工藤新一
232 0
Web前端学习：JaveScript基础 [简介、用法、变量及数据类型、流程控制及函数] （附源代码）
把苹果咬哭的测试笔记
|
JSON 测试技术 数据格式
【jmespath】—1. 基础用法
【jmespath】—1. 基础用法
把苹果咬哭的测试笔记
164 0
技术小胖子
unsquashfs的部署和用法
技术小胖子
3404 0
maojunxu
c 高级函数的简单用法
c 中内置了很多高级的函数，我们先使用排序函数看一下 1 #include 2 #include 3 #include 4 5 int compare_score(const void *n1 ,const void *n2) { 6 7 int *a =...
maojunxu
863 0