欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

validform表單驗證的實現(xiàn)方法

 更新時間：2019年03月08日 08:29:33   作者：學問思辨行  
這篇文章主要介紹了validform表單驗證的實現(xiàn)方法，validform插件主要把所有的驗證條件和驗證提示信息綁定到每個表單元素，具有一定的參考價值，感興趣的小伙伴們可以參考一下

validform插件主要把所有的驗證條件和驗證提示信息綁定到每個表單元素，這種形式非常方便，下面寫法更加智能得到label內(nèi)容來提示

validform有什么用？

網(wǎng)頁上有大量的input需要你進行驗證的時候，如果是彈窗的話，需要不停地判斷，如果為空，彈窗。如果不是數(shù)字，彈窗。

所以要將這么多驗證交給一個js去驗證。

validateform.js簡單使用方法

1.datatype

要想標識出來想要驗證的對象，我們就需要給這個對象綁定datatype屬性，validform.js已經(jīng)內(nèi)置了10種驗證格式，如果不夠，我們還可以使用

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

來對驗證格式進行擴展。

1.1 datatype=*

這個驗證是用來表示當前的對象不能為空的，任何字符均可

1.2 datatype=*6-16

validform這個js有個優(yōu)點，它會自動擴展你所寫的驗證格式。不同的字段我們可能要求的字符數(shù)量不一樣，用戶名這里你寫了*6-16，要求用戶填入6到16位的字符?？蓸祟}這里又要求填入2到5個字符，難道我們要在驗證格式這里再寫一個*2-5嗎？不用！形如"*6-16"的datatype，Validform會自動擴展，可以指定任意的數(shù)值范圍。如內(nèi)置基本類型有"*6-16"，那么你綁定 datatype="*4-12"就表示4到12位任意字符。如果你自定義了一個datatype="zh2-4"，表示2到4位中文字符，那么 datatype="zh2-6"就表示2到6位中文字符。

1.3 datatype=url

可以用來驗證網(wǎng)址。

1.4 datatype=e

可以用來驗證電子郵箱地址

1.5 datatype=m

用來驗證手機號，但是給的正則表達式有問題，對于新出現(xiàn)的177號段之類的沒有加入進去，這塊需要注意一下。

1.6 其他注意事項

datatype支持規(guī)則累加或單選。用","分隔表示規(guī)則累加；用"|"分隔表示規(guī)則多選一，即只要符合其中一個規(guī)則就可以通過驗證，綁定的規(guī)則會依次 驗證，只要驗證通過，后面的規(guī)則就會忽略不再比較。如綁定datatype="m|e"，表示既可以填寫手機號碼，也能填寫郵箱地址，如果知道填入的是手 機號碼，那么就不會再檢測他是不是郵箱地址；datatype="zh,s2-4"，表示要符合自定義類型"zh"，也要符合規(guī)則"s2-4"。

直接綁定正則：如可用這樣寫datatype="/\w{3,6}/i"，要求是3到6位的字母，不區(qū)分大小寫；
支持簡單的邏輯運算：如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/"，
這 個表達式的意思是：可以是手機號碼；或者是郵箱地址，但字符長度必須在4到18位；或者是3到6位的字母，不區(qū)分大小寫；或者輸入 validform.rjboy.cn，區(qū)分大小寫。這里","分隔相當于邏輯運算里的"&&"； "|"分隔相當于邏輯運算里的"||"；不支持括號運算。

2.ignore

綁定了ignore="ignore"的表單元素，在有輸入時，會驗證所填數(shù)據(jù)是否符合datatype所指定數(shù)據(jù)類型，沒有填寫內(nèi)容時則會忽略對它的驗證；

如何在表單中控制如果某幾項要填都填，要不填都不填。

對這幾項賦給相同的class 比如AllNeedOrEmpty

之后在初始化參數(shù)中的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來實現(xiàn)驗證與否。

源碼如下：

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方法來實現(xiàn)是否驗證，思路基本一致，但是當元素是動態(tài)生成的時候我覺得還是ignore=ignore這個方法比較好，因為省事啊。

 歡迎評論相互探討。

3.初始化參數(shù)

如下是官網(wǎng)例子中給出的所有的可用參數(shù)

頁面地址：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) {
      //參數(shù)gets是獲取到的表單元素值，obj為當前表單元素，curform為當前驗證的表單，regxp為內(nèi)置的一些正則表達式的引用;
      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 版本之后，要實現(xiàn)二選一的驗證效果，datatype 的名稱 不 需要以 "option_" 開頭;
    }
  },
  usePlugin: {
    swfupload: {},
    datepicker: {},
    passwordstrength: {},
    jqtransform: {
      selector: "select,input"
    }
  },
  beforeCheck: function(curform) {
    //在表單提交執(zhí)行驗證之前執(zhí)行的函數(shù)，curform參數(shù)是當前表單對象。
    //這里明確return false的話將不會繼續(xù)執(zhí)行驗證操作;
  },
  beforeSubmit: function(curform) {
    //在驗證成功后，表單提交前執(zhí)行的函數(shù)，curform參數(shù)是當前表單對象。
    //這里明確return false的話表單將不會提交;
  },
  callback: function(data) {
    //返回數(shù)據(jù)data是json對象，{"info":"demo info","status":"y"}
    //info: 輸出提示信息;
    //status: 返回提交數(shù)據(jù)的狀態(tài),是否提交成功。如可以用"y"表示提交成功，"n"表示提交失敗，在ajax_post.php文件返回數(shù)據(jù)里自定字符，主要用在callback函數(shù)里根據(jù)該值執(zhí)行相應(yīng)的回調(diào)操作;
    //你也可以在ajax_post.php文件返回更多信息在這里獲取，進行相應(yīng)操作；
    //ajax遇到服務(wù)端錯誤時也會執(zhí)行回調(diào)，這時的data是{ status:**, statusText:**, readyState:**, responseText:** }；

    //這里執(zhí)行回調(diào)操作;
    //注意：如果不是ajax方式提交表單，傳入callback，這時data參數(shù)是當前表單對象，回調(diào)函數(shù)會在表單驗證全部通過后執(zhí)行，然后判斷是否提交表單，如果callback里明確return false，則表單不會提交，如果return true或沒有return，則會提交表單。
  }
});

3.1 如何使用ajax提交數(shù)據(jù)，而不提交表單。

 beforeSubmit: function (curform) {
   addNewAd();
   return false;
   //這里明確return false的話表單將不會提交;
 }

直接在beforeSubmit中加上對應(yīng)的ajax提交函數(shù),并加上return false就可以保證表單不會被提交而執(zhí)行我們的ajax函數(shù)。

3.2 tiptype

用來設(shè)置提示信息的展示方式，可用的值有：1、2、3、4和function函數(shù)，默認tiptype為1。

1代表自定義彈出框提示。

2代表側(cè)邊提示，會在當前元素的父級的next對象的子級查找顯示提示信息的對象。

如果不存在就會創(chuàng)建

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也是代表的側(cè)邊提示，不過它是會在當前元素的siblings對象中查找顯示提示信息的對象

同樣也是不存在就會創(chuàng)建

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也是側(cè)邊顯示會在當前元素的父級的next對象下查找顯示提示信息的對象

還可以傳入自定義函數(shù)，實現(xiàn)你想要的提示效果。

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="$104.116.116.112.115.58.47.47.115.101.103.109.101.110.116.102.97.117.108.116.46.99.111.109.47.97.47.49.49.57.48.48.48.48.48.49.56.52.50.54.53.54.53./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">設(shè)備名稱</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"http://<option value="">--請選擇--</option>,這一項的值為空，否則無效
      ,datatype:"*"http://也可以寫到input標簽里
    }
  ]);
  // 阻止表單提交(這是一種形式，因為還沒找到兩者比較時候的判斷)
  $("#submit").click(function(event) {
    var highest = $("#highest").val();
    var lowest = $("#lowest").val();
    if(highest <= lowest){
      alert("最高層熟不能小于最低層數(shù)");
       return false;// 禁止提交
    }
    if(lowest > 2){
      alert("最低層數(shù)不能大于1");
      return false;
    }
  });
})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JQuery實現(xiàn)動態(tài)漂浮廣告

    JQuery實現(xiàn)動態(tài)漂浮廣告

    這篇文章主要為大家詳細介紹了JQuery實現(xiàn)動態(tài)漂浮廣告，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • jQuery實現(xiàn)簡易的輸入框字數(shù)計數(shù)功能示例

    jQuery實現(xiàn)簡易的輸入框字數(shù)計數(shù)功能示例

    這篇文章主要介紹了jQuery實現(xiàn)簡易的輸入框字數(shù)計數(shù)功能,結(jié)合實例形式分析了jQuery針對頁面元素屬性的獲取與計算相關(guān)操作技巧,需要的朋友可以參考下
    2017-01-01
  • jQuery打印圖片pdf、txt示例代碼

    jQuery打印圖片pdf、txt示例代碼

    本節(jié)主要介紹了jQuery打印圖片pdf、txt,需要的朋友可以參考下
    2014-07-07
  • 基于jquery用于查詢操作的實現(xiàn)代碼

    基于jquery用于查詢操作的實現(xiàn)代碼

    通過javascript得到用戶操作改變url參數(shù)從而實現(xiàn)某些功能，如查詢(具體的查詢由服務(wù)器端代碼得到url中的參數(shù)組成查詢語句實現(xiàn))。
    2010-05-05
  • jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼

    jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼

    動態(tài)綁定鍵盤事件的方法或許會有很多，在本文將為大家介紹下jquery是如何快捷實現(xiàn)的，感興趣的朋友不要錯過
    2013-10-10
  • noty – jQuery通知插件全面解析

    noty – jQuery通知插件全面解析

    下面小編就為大家?guī)硪黄猲oty – jQuery通知插件全面解析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jquery三大不同版本之間區(qū)別專家講解

    jquery三大不同版本之間區(qū)別專家講解

    jQuery是一個快速、簡潔的JavaScript框架,目前jQuery有1.x、2.x、3.x三個版本,在jQuery官網(wǎng)（http://jquery.com/）可以查看,2.x、3.x不是?1.x?的后續(xù)或者升級版本,他們是同時更新迭代的,現(xiàn)在使用最廣的版本都是1.x的
    2023-09-09
  • jquery 插件學習（五）

    jquery 插件學習（五）

    一般對外發(fā)布的插件都應(yīng)該進行封裝，封裝的插件還應(yīng)該符合規(guī)范，只有這樣寫的插件才具有推廣價值，并得到其他用戶的喜愛
    2012-08-08
  • 簡單實現(xiàn)jquery隔行變色

    簡單實現(xiàn)jquery隔行變色

    這篇文章主要為大家詳細介紹了實現(xiàn)jquery隔行變色效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • jQuery實現(xiàn)下拉框選擇圖片功能實例

    jQuery實現(xiàn)下拉框選擇圖片功能實例

    這篇文章主要介紹了jQuery實現(xiàn)下拉框選擇圖片功能,可實現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下
    2015-08-08

最新評論