手把手教你寫一個react validator

應用場景

在平常工做中，作爲一個前端碼農, 常常須要與用戶"交流"， 用到最多的"通迅工具"莫過於表單了, 提及表單，那麼就少不了驗證

寫在前面

在作一件事情前， 咱們要遵循三個原則

• 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

以上示例代碼爲部分代碼，完整代碼見react-validator