從0開始，編寫一個驗證函數（工具函數）

A Loity 發布于2019-08-02 13:59 / 2120人閱讀

摘要：一個驗證的過程，一般便是分為這幾步，我們可以按照這個步驟設計出自己的驗證函數。驗證的方法，返回一個布爾值調用驗證方法這里是調用驗證函數的方法，和上面的定義結合起來。

為什么要寫驗證函數

將驗證過程變成多個步驟

完成一個基本的驗證函數

1. 為什么要寫驗證函數

之前寫項目的時候，一般都是在登錄注冊，修改密碼的時候有需要些正則的需求，所以每次用到的時候都是直接從前面的代碼copy過去就好了，直到后臺開始寫后臺管理系統類的項目，復制粘貼已經完全不可行了。怎么能做一個只會ctrl+c，ctrl+v的程序猿呢！簡直不能忍，于是就想到了自己寫一個驗證函數，每次需要做驗證的時候只需要調用這個函數，傳入參數就可以了，想想都美滋滋。

2. 將驗證過程變成多個步驟

做驗證的時候我們要做的，定義驗證失敗后的提示，編寫驗證的方法，然后調用驗證得到結果。
一個驗證的過程，一般便是分為這幾步，我們可以按照這個步驟設計出自己的驗證函數。

var validatorObj = {
    // 驗證定義
    validator: {
        // 驗證失敗后的提示
        messages: {}，
        // 驗證的方法， 返回一個布爾值
        methods: {}
    }，
    // 得到驗證結果
    checkResult: {}
}

定義一些驗證失敗的提示

定義的錯誤提示可以自定義，至于{0} {1}等則是用來做一個標識符，在驗證失敗后會將要驗證的參數替換掉標識符

// 驗證失敗后的提示
messages: {
        notnull: "請輸入{0}",
        max: "長度最多為 {1} 個字符",
        min: "長度最小為 {1} 個字符",
        length: "{0}的長度在 {1} 到 {2} 個字符",
        number: "{0}必須是數字",
        string: "{0}必須是字母或者數字",
        moblie: "{0}必須是手機或者電話號碼格式",
        noChinese: "{0}不能為中文",
        lon: "{0}范圍為-180.0～+180.0（必須輸入1到10位小數）",
        lat: "{0}范圍為-90.0～+90.0（必須輸入1到10位小數）",
        url: "請輸入正確的{0}訪問地址",
        repeat: "兩次輸入的{0}不一致",
        email: "郵箱格式不正確",
        password: "請輸入由大小寫字母+數字組成的6-16位密碼",
        fixedNum: "請輸入{1}位數字"
      }

定義對應的驗證方法

可以看到幾乎在每個驗證前面都加了一個當數據為空的時候，返回為true，這是因為有的時候我們并不關心某一個數據是否填寫，但一旦填寫了，又要求符合某種規則。所以如果要驗證非空的時候，需要使用兩個驗證屬性。

// 驗證的方法， 返回一個布爾值
methods: {
        notnull: obj => {
          return obj.value || obj.value === 0
        },
        max: obj => {
          if (!obj.value) return true
          return obj.conditions[0] >= obj.value.length
        },
        min: obj => {
          if (!obj.value) return true
          return obj.value.length >= obj.conditions[0]
        },
        length: obj => {
          if (!obj.value) return true
          return obj.conditions[0] <= obj.value.length && obj.value.length <= obj.conditions[1]
        },
        number: obj => {
          if (!obj.value) return true
          reg = /^[0-9]+.?[0-9]*$/
          return reg.test(obj.value)
        },
        string: obj => {
          if (!obj.value) return true
          reg = /^[a-zA-Z0-9]+$/
          return reg.test(obj.value)
        },
        moblie: obj => {
          if (!obj.value) return true
          reg = /^(1[3,5,8,7]{1}[d]{9})|(((400)-(d{3})-(d{4}))|^((d{7,8})|(d{4}|d{3})-(d{7,8})|(d{4}|d{3})-(d{3,7,8})-(d{4}|d{3}|d{2}|d{1})|(d{7,8})-(d{4}|d{3}|d{2}|d{1}))$)$/
          return reg.test(obj.value)
        },
        noChinese: obj => {
          if (!obj.value) return true
          reg = /[u4e00-u9fa5]/
          return !reg.test(obj.value)
        },
        lon: obj => {
          if (!obj.value) return true
          reg = /^[-+]?(0?d{1,2}.d{1,5}|1[0-7]?d{1}.d{1,10}|180.0{1,10})$/
          return reg.test(obj.value)
        },
        lat: obj => {
          if (!obj.value) return true
          reg = /^[-+]?([0-8]?d{1}.d{1,10}|90.0{1,10})$/
          return reg.test(obj.value)
        },
        url: obj => {
          if (!obj.value) return true
          reg = /^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/
          return reg.test(obj.value)
        },
        repeat: obj => {
          if (!obj.value) return true
          return obj.value === obj.value1
        },
        email: obj => {
          if (!obj.value) return true
          reg = /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/
          return reg.test(obj.value)
        },
        password: obj => {
          if (!obj.value) return true
          reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Zd]{6,16}$/
          return reg.test(obj.value)
        },
        fixedNum: obj => {
          if (!obj.value) return true
          return obj.value.length === obj.conditions[0]
        }
      }

調用驗證方法

**這里是調用驗證函數的方法，和上面的定義結合起來。
傳入要驗證的規則，驗證的值，驗證的字段名字，如果有條件則加上條件數組(條件數組是需要我們自己去設計的)**

/**
 1.  傳入驗證規則，得到驗證結果
 2.  @param {Obj} { label, value, rules, conditions}
 3.  @param {String} label: 驗證的字段名稱
 4.  @param {String} value: 驗證的值 (驗證重復的時候可以添加value1屬性)
 5.  @param {Array} rules: 驗證的規則數組 例如： ["notnull", "length"] 如果參數必填，第一個參數為notnull
 6.  @param {Array} conditions: 條件字段 例如： ["2", "10"] ,則驗證長度錯誤會提示: 密碼的長度在2到10個字符,以傳入數組的條件去做驗證, 驗證的提示{1}開始將匹配的是當前數組
 7.  @return {obj} { result, message } 驗證結果對象
 */
// 得到驗證結果
checkResult: function (obj) {
      let result = true,
          checkType, 
          message = "驗證成功",
          validatorMethods = this.validator.methods,
          validatorMessage = this.validator.messages
      // 循環驗證
      for (let i = 0, len = obj.rules.length; i < len; i++) {
        // 當驗證的規則不存在，默認跳過這個驗證
        if (!validatorMethods[obj.rules[i]]) {
          console.log(obj.rules[i] + "規則不存在")
          break
        }
        // 得到當前驗證失敗信息
        if (!validatorMethods[obj.rules[i]](obj)) {
          checkType = obj.rules[i]
          result = false
          break
        }
      }
      // 如果驗證失敗, 得到驗證失敗的結果集
      if (!result) {
        message = validatorMessage[checkType]
        if (obj.conditions) {
          obj.conditions.forEach((item, index) => {
            message = message.replace("{" + (index + 1) + "}", item)
          })
        }
        message = message.replace("{0}", obj.label)
        return {result, message}
      }

      return {result, message}
    }

3. 完整的驗證函數

把上面的步驟拼在一起，就可以完成一個驗證函數。具體的需求和使用，可以根據項目自定義，但思路大致是這樣的。

/**
 * 傳入驗證規則，得到驗證結果
 * @param {Obj} { label, value, rules, conditions}
 *  @param {String} label: 驗證的字段名稱
 *  @param {String} value: 驗證的值 (驗證重復的時候可以添加value1屬性)
 *  @param {Array} rules: 驗證的規則數組 例如： ["notnull", "length"] 如果參數必填，第一個參數為notnull
 *  @param {Array} conditions: 條件字段 例如： ["2", "10"] ,則驗證長度錯誤會提示: 密碼的長度在2到10個字符,以傳入數組的條件去做驗證, 驗證的提示{1}開始將匹配的是當前數組
 * @return {obj} { result, message } 驗證結果對象
 */
function validate (obj) {
  let reg
  const validatorObj = {
    // 驗證定義
    validator: {
      // 驗證失敗后的提示
      messages: {
        notnull: "請輸入{0}",
        max: "長度最多為 {1} 個字符",
        min: "長度最小為 {1} 個字符",
        length: "{0}的長度在 {1} 到 {2} 個字符",
        number: "{0}必須是數字",
        string: "{0}必須是字母或者數字",
        moblie: "{0}必須是手機或者電話號碼格式",
        noChinese: "{0}不能為中文",
        lon: "{0}范圍為-180.0～+180.0（必須輸入1到10位小數）",
        lat: "{0}范圍為-90.0～+90.0（必須輸入1到10位小數）",
        url: "請輸入正確的{0}訪問地址",
        repeat: "兩次輸入的{0}不一致",
        email: "郵箱格式不正確",
        password: "請輸入由大小寫字母+數字組成的6-16位密碼",
        fixedNum: "請輸入{1}位數字"
      },
      // 驗證的方法, 返回一個布爾值
      methods: {
        notnull: obj => {
          return obj.value || obj.value === 0
        },
        max: obj => {
          if (!obj.value) return true
          return obj.conditions[0] >= obj.value.length
        },
        min: obj => {
          if (!obj.value) return true
          return obj.value.length >= obj.conditions[0]
        },
        length: obj => {
          if (!obj.value) return true
          return obj.conditions[0] <= obj.value.length && obj.value.length <= obj.conditions[1]
        },
        number: obj => {
          if (!obj.value) return true
          reg = /^[0-9]+.?[0-9]*$/
          return reg.test(obj.value)
        },
        string: obj => {
          if (!obj.value) return true
          reg = /^[a-zA-Z0-9]+$/
          return reg.test(obj.value)
        },
        moblie: obj => {
          if (!obj.value) return true
          reg = /^(1[3,5,8,7]{1}[d]{9})|(((400)-(d{3})-(d{4}))|^((d{7,8})|(d{4}|d{3})-(d{7,8})|(d{4}|d{3})-(d{3,7,8})-(d{4}|d{3}|d{2}|d{1})|(d{7,8})-(d{4}|d{3}|d{2}|d{1}))$)$/
          return reg.test(obj.value)
        },
        noChinese: obj => {
          if (!obj.value) return true
          reg = /[u4e00-u9fa5]/
          return !reg.test(obj.value)
        },
        lon: obj => {
          if (!obj.value) return true
          reg = /^[-+]?(0?d{1,2}.d{1,5}|1[0-7]?d{1}.d{1,10}|180.0{1,10})$/
          return reg.test(obj.value)
        },
        lat: obj => {
          if (!obj.value) return true
          reg = /^[-+]?([0-8]?d{1}.d{1,10}|90.0{1,10})$/
          return reg.test(obj.value)
        },
        url: obj => {
          if (!obj.value) return true
          reg = /^([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][sS]://)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/
          return reg.test(obj.value)
        },
        repeat: obj => {
          if (!obj.value) return true
          return obj.value === obj.value1
        },
        email: obj => {
          if (!obj.value) return true
          reg = /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/
          return reg.test(obj.value)
        },
        password: obj => {
          if (!obj.value) return true
          reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Zd]{6,16}$/
          return reg.test(obj.value)
        },
        fixedNum: obj => {
          if (!obj.value) return true
          return obj.value.length === obj.conditions[0]
        }
      }
    },
    // 得到驗證結果
    checkResult: function (obj) {
      let result = true,
          checkType, 
          message = "驗證成功",
          validatorMethods = this.validator.methods,
          validatorMessage = this.validator.messages
      // 循環驗證
      for (let i = 0, len = obj.rules.length; i < len; i++) {
        // 得到當前驗證失敗信息
        if (!validatorMethods[obj.rules[i]](obj)) {
          checkType = obj.rules[i]
          result = false
          break
        }
      }
      // 如果驗證失敗, 得到驗證失敗的結果集
      if (!result) {
        message = validatorMessage[checkType]
        if (obj.conditions) {
          obj.conditions.forEach((item, index) => {
            message = message.replace("{" + (index + 1) + "}", item)
          })
        }
        message = message.replace("{0}", obj.label)
        return {result, message}
      }

      return {result, message}
    }
  }
  return validatorObj.checkResult(obj)
}

export default validate

使用示例

validate({label: "username", value: "admin", rules: ["notnull", "length"], conditions: ["2", "10"]}) // 驗證username不為空且長度在2-10之間
validate({label: "pawwword", value: "lllyh111", rules: ["notnull", "password"]}) // 驗證password由大小寫字母+數字組成的6-16位密碼

驗證返回結果大概長這樣:

{result: true, message: "驗證成功"}
{result: false, message: "驗證失敗提示"}

4.在頁面上的使用

把函數放在全局，需要做驗證的地方直接調用這個函數就ojbk了。

在Elementui中的例子

    // 檢測號碼
    const checkMobile = (rule, value, callback) => {
      let check = this.$validate({label: "號碼", value, rules: ["moblie"]})
      if (!check.result) {
        callback(new Error(check.message))
      } else {
        callback()
      }
    }
    // 檢測非中文
    const checkWechat = (rule, value, callback) => {
      let check = this.$validate({label: "微信", value, rules: ["noChinese", "max"], conditions: [12]})
      if (!check.result) {
        callback(new Error(check.message))
      } else {
        callback()
      }
    }

源碼---如何使用
登錄-系統管理-用戶管理中可看到相關驗證效果

GPU云服務器云服務器 php從0開始從0開始學習php 匯編語言從0開始從0開始數據分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53488.html

從0開始，編寫一個驗證函數（工具函數）

摘要：一個驗證的過程，一般便是分為這幾步，我們可以按照這個步驟設計出自己的驗證函數。驗證的方法，返回一個布爾值調用驗證方法這里是調用驗證函數的方法，和上面的定義結合起來。為什么要寫驗證函數將驗證過程變成多個步驟完成一個基本的驗證函數 1. 為什么要寫驗證函數之前寫項目的時候，一般都是在登錄注冊，修改密碼的時候有需要些正則的需求，所以每次用到的時候都是直接從前面的代碼copy過去...

canger 2019-08-23 14:19 評論0 收藏0
JavaScript 開發人員需要知道的簡寫技巧

摘要：如果屬性名與名相同，則可以使用簡寫。其它一些語言則會發出警告或錯誤。在中，介紹了一種名為的新數組函數，可以實現循環的簡寫。總結上述是一些常用的簡寫技巧，如果有其它未提及的簡寫技巧，也歡迎大家補充。 showImg(https://segmentfault.com/img/bVXdza?w=653&h=367); 本文來源于多年的 JavaScript 編碼技術經驗，適合所有正在使用 J...

learn_shifeng 2019-08-21 17:13 評論0 收藏0
Python

摘要：最近看前端都展開了幾場而我大知乎最熱語言還沒有相關。有關書籍的介紹，大部分截取自是官方介紹。但從開始，標準庫為我們提供了模塊，它提供了和兩個類，實現了對和的進一步抽象，對編寫線程池進程池提供了直接的支持。《流暢的python》閱讀筆記《流暢的python》是一本適合python進階的書, 里面介紹的基本都是高級的python用法. 對于初學python的人來說, 基礎大概也就夠用了...

dailybird 2019-07-30 15:13 評論0 收藏0
探索兩種優雅的表單驗證——策略設計模式和ES6的Proxy代理模式

原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關注最新動態，大家一起多交流學習，共同進步，以學習者的身份寫博客，記錄點滴。在一個Web項目中，注冊，登錄，修改用戶信息，下訂單等功能的實現都離不開提交表單。這篇文章就闡述了如何編寫相對看著舒服的表單驗證代碼。假設我們正在編寫一個注冊的頁面，在點擊注冊按鈕之前，有如下幾條校驗邏輯。 ...

Bamboy 2019-08-20 16:32 評論0 收藏0

發表評論

登陸后可評論

0條評論

A Loity

男|高級講師

我要關注我要私信

TA的文章

史上最強C語言教程----函數（1）

閱讀 1877·2021-11-19 09:40
HMBCloud：半月灣美國CN2 GIA套餐，洛杉磯DC5機房，1核1G內存10G SSD硬盤年付

閱讀 2594·2021-08-30 09:46
CloudCone：美國洛杉磯Intel服務器促銷/E3-1240/16G/1TB SSD/1Gbp

閱讀 2177·2021-08-03 14:01
免費開源api

閱讀 2648·2019-08-30 10:54
初步了解表單操作

閱讀 1198·2019-08-29 16:38
JQuery插件：ScrollTo平滑滾動到頁面指定位置

閱讀 1440·2019-08-29 11:02
CSS進階篇--CSS select樣式優化含jquery代碼

閱讀 2536·2019-08-28 18:16
前端常用動畫效果和功能控制

閱讀 1679·2019-08-28 18:09

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

從0開始，編寫一個驗證函數（工具函數）

相關文章