react怎么实现表单验证

react实现表单验证

手把手教你写一个react validator

应用场景

在日常工作中，做为一个前端码农, 经常需要与用户"交流"，用到最多的"通迅工具"莫过于表单了, 说起表单，那么就少不了验证

写在前面

在做一件事情前，我们要遵循三个原则

WHY 为什么要做

WHO 谁来做

HOW 怎么做

不解释上面三个词(自行体会)，我们继续往下走

我们写validator 之前，先稍微思考一下, 顺一下思路

造一个池子，把用户输入的所有需要验证的值统统放进去

建一座城池，用来检验(防御)用户的输入是否合法

好了，大概套路就是上面两点，再配合些许支持我们就能实现一个简单的基于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>
    );
  }

最后上一张效果图