手把手教你寫一個react validator

JS每日一題發表於2017-09-28
React

應用場景

在日常工作中，做為一個前端碼農, 經常需要與使用者"交流"， 用到最多的"通迅工具"莫過於表單了, 說起表單，那麼就少不了驗證

寫在前面

在做一件事情前， 我們要遵循三個原則

  • WHY 為什麼要做
  • WHO 誰來做
  • HOW 怎麼做

不解釋上面三個詞(自行體會)，我們繼續往下走

我們寫validator 之前， 先稍微思考一下, 順一下思路

  1. 造一個池子，把使用者輸入的所有需要驗證的值統統放進去
  2. 建一座城池，用來檢驗(防禦)使用者的輸入是否合法

好了， 大概套路就是上面兩點， 再配合些許支援我們就能實現一個簡單的基於react 的驗證器

進入正題

  • 先造城池
const utils = {
  testRegex: (value, regex) => value.toString().match(regex),
  rules: {
    required: {
      message: 'The :attribute field is required',
      rule: val => utils.testRegex(val, /.+/),
    },
  },
}複製程式碼

我們先徹了一面阻止使用者輸入為空的牆

  • 再建池子
class ReactValidator {
  constructor() {
    this.fields = [] // 用來存放表示使用者輸入唯一的識別符號
    this.showMessage = false //預設不顯示錯誤資訊
  }
}複製程式碼
  • 非法輸入與城池之戰

我們對外暴露一個守城將message，絕大部分抵禦外敵的工作都由它來完成

class ReactValidator {
  message(field, value, testString, customClass, customErrors = {}) {
    // 我們預設使用者輸入的都是合法的
    this.fields[field] = true
    let tests = testString.split('|')
    let rule, options, message
    for (let i = 0; i < tests.length; i++) {
      // 過濾一下不存在的值
      value = this.filterEmptyValue(value)
      // 獲取約定的規則
      rule = this.getRule(tests[i])
      options = this.getOptions(tests[i])

      // 檢測是否合法
      if (!this.isValid(value, rule, options)) {
        //不合法將池子裡標識設為false
        this.fields[field] = false
        if (this.showMessage) {
          // 如果使用者自定義的錯誤的提示誤就取使用者的，否則取預設的 
          message =
            customErrors[rule] ||
            customErrors.default ||
            this.rules[rule].message.replace(':attribute', field)
          // 返回錯誤資訊
          if (
            options.length > 0 &&
            this.rules[rule].hasOwnProperty('messageReplace')
          ) {
            let replaceMessage = this.rules[rule].messageReplace(
              message,
              options,
            )
            return this.createErrorEle(replaceMessage, customClass)
          }

          return this.createErrorEle(message, customClass)
        }
      }
    }
  }
}複製程式碼
  • 如何正確的使用它

如下,我們只需要派出我們守城將message 

  render: function() {
    return (
      <div className="container card my-4">
        <div className="card-block">
          <div className="form-group">
            <label>required</label>
            <input className="form-control" name="required" value={this.state.require} onChange={this.setStateFromInput} />
            {this.validator.message('required', this.state.required, 'required|max:12|min:6','',{
              default: 'required不能為空',
              min: '不能少於6個字元',
              max: '不能大於12個字元'
            })}
          </div>
          <button className="btn btn-primary" onClick={this.submitForm}>Submit</button>
        </div>
      </div>
    );
  }複製程式碼
  • 最後上一張效果圖

demo
demo

以上示例程式碼為部分程式碼，完整程式碼見react-validator

相關文章