validform表单验证的实现方法


Posted in Javascript onMarch 08, 2019

validform插件主要把所有的验证条件和验证提示信息绑定到每个表单元素,这种形式非常方便,下面写法更加智能得到label内容来提示

validform有什么用?

网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗。如果不是数字,弹窗。

所以要将这么多验证交给一个js去验证。

validateform.js简单使用方法

1.datatype

要想标识出来想要验证的对象,我们就需要给这个对象绑定datatype属性,validform.js已经内置了10种验证格式,如果不够,我们还可以使用

http://validform.rjboy.cn/Validform/Validform_Datatype.js

来对验证格式进行扩展。

1.1 datatype=*

这个验证是用来表示当前的对象不能为空的,任何字符均可

1.2 datatype=*6-16

validform这个js有个优点,它会自动扩展你所写的验证格式。不同的字段我们可能要求的字符数量不一样,用户名这里你写了*6-16,要求用户填入6到16位的字符。可标题这里又要求填入2到5个字符,难道我们要在验证格式这里再写一个*2-5吗?不用!形如"*6-16"的datatype,Validform会自动扩展,可以指定任意的数值范围。如内置基本类型有"*6-16",那么你绑定 datatype="*4-12"就表示4到12位任意字符。如果你自定义了一个datatype="zh2-4",表示2到4位中文字符,那么 datatype="zh2-6"就表示2到6位中文字符。

1.3 datatype=url

可以用来验证网址。

1.4 datatype=e

可以用来验证电子邮箱地址

1.5 datatype=m

用来验证手机号,但是给的正则表达式有问题,对于新出现的177号段之类的没有加入进去,这块需要注意一下。

1.6 其他注意事项

datatype支持规则累加或单选。用","分隔表示规则累加;用"|"分隔表示规则多选一,即只要符合其中一个规则就可以通过验证,绑定的规则会依次 验证,只要验证通过,后面的规则就会忽略不再比较。如绑定datatype="m|e",表示既可以填写手机号码,也能填写邮箱地址,如果知道填入的是手 机号码,那么就不会再检测他是不是邮箱地址;datatype="zh,s2-4",表示要符合自定义类型"zh",也要符合规则"s2-4"。

直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;
支持简单的逻辑运算:如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/",
这 个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入 validform.rjboy.cn,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。

2.ignore

绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,没有填写内容时则会忽略对它的验证;

如何在表单中控制如果某几项要填都填,要不填都不填。

对这几项赋给相同的class 比如AllNeedOrEmpty

之后在初始化参数中的beforeCheck部分对这个class做操作,具体代码如下

beforeCheck: function(curform) {
  $("#sliderAd ul").each(function() {
    var needIgnore = true;
    var _this = $(this);
    var checkList = _this.find("input[class*=AllNeedOrEmpty]");
    checkList.each(function() {
      var that = $(this);
      if (that.val() != "") {
        checkList.each(function() {
          $(this).removeAttr("ignore");
        });
        needIgnore = false;
      }
    });
    if (needIgnore) {
      checkList.each(function() {
        $(this).attr("ignore", "ignore");
      });
    }
  });
},

上面的代码只是提供一个思路,肯定有更好的方法,

比如使用validform对象中的ignore方法和unignore方法,通过向这两个方法传入表单元素来忽略和重新获取验证效果。

不过这两种方法是对元素赋给和去掉dataIgnore来实现验证与否。

源码如下:

ignore: function(selector) {
    var obj = this;
    var selector = selector || "[datatype]"

    $(obj.forms).find(selector).each(function() {
      $(this).data("dataIgnore", "dataIgnore").removeClass("Validform_error");
    });

    return this;
  },

  unignore: function(selector) {
    var obj = this;
    var selector = selector || "[datatype]"

    $(obj.forms).find(selector).each(function() {
      $(this).removeData("dataIgnore");
    });

    return this;
  },

我的方法是控制ignore这个attr,而validform方法则是在元素上利用data方法来实现是否验证,思路基本一致,但是当元素是动态生成的时候我觉得还是ignore=ignore这个方法比较好,因为省事啊。

 欢迎评论相互探讨。

3.初始化参数

如下是官网例子中给出的所有的可用参数

页面地址:http://validform.rjboy.cn/document.html

$(".demoform").Validform({
  btnSubmit: "#btn_sub", //提交按钮
  btnReset: ".btn_reset",
  tiptype: 1, //
  ignoreHidden: false,
  dragonfly: false,
  tipSweep: true,
  label: ".label",
  showAllError: false,
  postonce: true,
  ajaxPost: true,
  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,则会提交表单。
  }
});

3.1 如何使用ajax提交数据,而不提交表单。

beforeSubmit: function (curform) {
   addNewAd();
   return false;
   //这里明确return false的话表单将不会提交;
 }

直接在beforeSubmit中加上对应的ajax提交函数,并加上return false就可以保证表单不会被提交而执行我们的ajax函数。

3.2 tiptype

用来设置提示信息的展示方式,可用的值有:1、2、3、4和function函数,默认tiptype为1。

1代表自定义弹出框提示。

2代表侧边提示,会在当前元素的父级的next对象的子级查找显示提示信息的对象。

如果不存在就会创建

if (tiptype == 2) {
  if ($(this).parent().next().find(".Validform_checktip").length == 0) {
    $(this).parent().next().append("<span class='Validform_checktip' />");
    $(this).siblings(".Validform_checktip").remove();
  }
}

3也是代表的侧边提示,不过它是会在当前元素的siblings对象中查找显示提示信息的对象

同样也是不存在就会创建

if (tiptype == 3) {
  if ($(this).siblings(".Validform_checktip").length == 0) {
    $(this).parent().append("<span class='Validform_checktip' />");
    $(this).parent().next().find(".Validform_checktip").remove();
  }
}

4也是侧边显示会在当前元素的父级的next对象下查找显示提示信息的对象

还可以传入自定义函数,实现你想要的提示效果。

validform实例

【1】引入js脚本:

<link href="${ctx}/assets/css/validform.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="${ctx}/assets/js/validform_min.js"></script>

【2】html:

<form action="$https://segmentfault.com/a/1190000018426565/insert" class="form-horizontal form-bordered" method="post" id="validform">
  <div class="form-group">
    <label class="control-label col-md-3">类型</label>
    <div class="col-md-4">
      <select class="form-control" data-width="100%" name="equipment.categoryId" id="equipmentCategory">
        <option value="">--请选择--</option>
         <c:forEach items="${equipmentCategoryList}" var="obj">
           <option value="${obj.id}" <c:if test="${obj.id eq equipment.categoryId }">selected</c:if> >${obj.name}</option>
        </c:forEach>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-3">设备名称</label>
    <div class="col-md-4">
      <input class="form-control inputxt" type="text" value="${equipment.name}" name="equipment.name"/> 
    </div>
  </div>
</form>

【3】js脚本:

// 添加验证
$(function(){
  var demo=$("#validform").Validform({//指明是哪一表单需要验证,名称需加在form表单上;
    tiptype:3
    ,label:".control-label"
    ,showAllError:true
    ,ignoreHidden:true
    ,datatype:{
      "zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
      ,"Aa1":/^[A-Za-z0-9]+$/
    }
  });
  demo.addRule([
    {
      ele:".inputxt"
      ,datatype:"*1-256"
    },
    {
      ele:"select"//<option value="">--请选择--</option>,这一项的值为空,否则无效
      ,datatype:"*"//也可以写到input标签里
    }
  ]);
  // 阻止表单提交(这是一种形式,因为还没找到两者比较时候的判断)
  $("#submit").click(function(event) {
    var highest = $("#highest").val();
    var lowest = $("#lowest").val();
    if(highest <= lowest){
      alert("最高层熟不能小于最低层数");
       return false;// 禁止提交
    }
    if(lowest > 2){
      alert("最低层数不能大于1");
      return false;
    }
  });
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
妙用Jquery的val()方法
Jun 27 Javascript
javascript中的delete使用详解
Apr 11 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
webpack4.x下babel的安装、配置及使用详解
Mar 07 #Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 #Javascript
深入理解react 组件类型及使用场景
Mar 07 #Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 #Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 #Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 #Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
如何删除多级目录
2006/10/09 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
python 全局变量的import机制介绍
2017/09/07 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python如何使用腾讯云发送短信
2020/09/17 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
个人简历自我评价
2014/02/02 职场文书
酒店节能减排方案
2014/05/26 职场文书
捐款活动总结
2014/08/27 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
寒假安全保证书
2015/02/28 职场文书
CSS基础详解
2021/10/16 HTML / CSS
浅谈Python中对象是如何被调用的
2022/04/06 Python