Validate 表單驗(yàn)證插件

PAMPANG 發(fā)布于2019-08-19 17:40 / 1980人閱讀

var Validate = function(el, rule, msg) {
  this.el = el;
  this.rule = rule;
  this.msg = msg;
};

Validate.prototype.validate = function() {
  var el = this.el, rule = this.rule, msg = this.msg, v = el.value, pass, i = 0;
  
  while(rule.length !== i) {
    pass = rule[i](v);
    if (!pass) {
      this.failed(msg[i]);
      return this;
    }
    i++;
  }
  
  this.success();
  return this;
};

window.onload = function() {
  var u = document.getElementById("username");
  var rule = {
    notempty : function(v) {
      return v !== "";
    },
    name: function(v) {
      return /^[w|·|。|?|．|.|(u4e00-u9fa5)]{2,20}$/.test(v);
    }
  };
  
  var username = new Validate(u, [rule.notempty, rule.name], ["不能為空", "請輸入正確的用戶名"]);
  username.failed = function(msg) {
    var el = this.el,
      parent = el.parentNode,
      require = parent.querySelector(".require"),
      errtip = parent.querySelector(".errtip"),
      textnode = document.createTextNode(msg),
      span = document.createElement("span");
    
    if (errtip) {
      errtip.style.display= "inline";
      errtip.innerHTML = msg;
      return this;
    } 
    
    span.appendChild(textnode);
    span.classList.add("errtip"); span.style.color = "red";
    parent.insertBefore(span, require.nextElementSibling);
    return this;
  };
  
  username.success = function() {
    var el = this.el;
    var errtip = el.parentNode.querySelector(".errtip");
    if (errtip) {
      errtip.innerHTML = "";
      errtip.style.display = "none";
    }
    return this;
  }
  username.validate();
  window.username = username;
};

云服務(wù)器 GPU云服務(wù)器 validate表單驗(yàn)證 validate插件 validate異步驗(yàn)證 validate自定義驗(yàn)證

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78753.html

相關(guān)文章

寫一個簡單易用可擴(kuò)展vue表單驗(yàn)證插件(vue-validate-easy)

摘要：寫一個表單驗(yàn)證插件需求目標(biāo)簡單易用可擴(kuò)展如何簡單開發(fā)者要做的寫了一個表單，指定一個，指定其驗(yàn)證規(guī)則。調(diào)用提交表單方法，可以獲取驗(yàn)證成功后的數(shù)據(jù)。寫一個vue表單驗(yàn)證插件(vue-validate-easy) 需求目標(biāo)：簡單易用可擴(kuò)展如何簡單開發(fā)者要做的寫了一個表單，指定一個name，指定其驗(yàn)證規(guī)則。調(diào)用提交表單方法，可以獲取驗(yàn)證成功后的數(shù)據(jù)。調(diào)用重置表單方法重置表單自...

ISherry 2019-08-22 16:32 評論0 收藏0
寫一個簡單易用可擴(kuò)展vue表單驗(yàn)證插件(vue-validate-easy)

摘要：寫一個表單驗(yàn)證插件需求目標(biāo)簡單易用可擴(kuò)展如何簡單開發(fā)者要做的寫了一個表單，指定一個，指定其驗(yàn)證規(guī)則。調(diào)用提交表單方法，可以獲取驗(yàn)證成功后的數(shù)據(jù)。寫一個vue表單驗(yàn)證插件(vue-validate-easy) 需求目標(biāo)：簡單易用可擴(kuò)展如何簡單開發(fā)者要做的寫了一個表單，指定一個name，指定其驗(yàn)證規(guī)則。調(diào)用提交表單方法，可以獲取驗(yàn)證成功后的數(shù)據(jù)。調(diào)用重置表單方法重置表單自...

keke 2019-08-02 10:13 評論0 收藏0
寫一個簡單易用可擴(kuò)展vue表單驗(yàn)證插件(vue-validate-easy)

摘要：寫一個表單驗(yàn)證插件需求目標(biāo)簡單易用可擴(kuò)展如何簡單開發(fā)者要做的寫了一個表單，指定一個，指定其驗(yàn)證規(guī)則。調(diào)用提交表單方法，可以獲取驗(yàn)證成功后的數(shù)據(jù)。寫一個vue表單驗(yàn)證插件(vue-validate-easy) 需求目標(biāo)：簡單易用可擴(kuò)展如何簡單開發(fā)者要做的寫了一個表單，指定一個name，指定其驗(yàn)證規(guī)則。調(diào)用提交表單方法，可以獲取驗(yàn)證成功后的數(shù)據(jù)。調(diào)用重置表單方法重置表單自...

ccj659 2019-08-29 15:05 評論0 收藏0
jQuery Validate 表單驗(yàn)證之強(qiáng)大插件

摘要：返回為真，表示需要驗(yàn)證。注意在文件中添加只能包括中文字英文字母數(shù)字和下劃線。中文名稱返回類型描述驗(yàn)證所選的。檢查是否驗(yàn)證通過。提交表單后，未通過驗(yàn)證的表單第一個或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單會獲得焦點(diǎn)。 jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡單，同時提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 ...

zorpan 2019-08-20 17:02 評論0 收藏0
實(shí)用的表單驗(yàn)證插件--jquery Validation

摘要：默認(rèn)值原生的表單提交類型表單驗(yàn)證通過后提交表單的回調(diào)函數(shù)。使用去控制這個組的驗(yàn)證信息被放置的位置。例子禁用對焦驗(yàn)證。他的回調(diào)函數(shù)被傳入兩個參數(shù)類型元素這個元素是當(dāng)前正在被驗(yàn)證的，是一個元素。此函數(shù)的上下午為驗(yàn)證對象本身。 Validation文檔翻譯前言 Validation作為表單驗(yàn)證中最常用的插件，為我在開發(fā)過程中提供了很多便利的地方。雖然說我很常用，但是我真的不敢說我會用Val...

eccozhou 2019-08-21 16:48 評論0 收藏0
js插件使用：jQuery-Validate 表單驗(yàn)證插件的使用

摘要：使用下載后包中的或者就是簡體中文的消息語言包引入和開始使用默認(rèn)校驗(yàn)規(guī)則必須輸入的字段。使用方法調(diào)用驗(yàn)證輸入值。日期校驗(yàn)出錯，慎用。必須輸入合法的信用卡號。輸入擁有合法后綴名的字符串上傳文件的后綴。業(yè)務(wù)上需要進(jìn)行驗(yàn)證判斷，感覺一個一個寫太麻煩，于是乎在網(wǎng)上搜索到j(luò)Query-Validate這個表單插件首先需要引入jquery包在https://jqueryvalidation....

wenyiweb 2019-08-20 19:00 評論0 收藏0