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>
    );
  }

最后上一张效果图

以上示例代码为部分代码，完整代码见react-validator（https://github.com/febobo/react-validator）

更多相关技术文章，请访问HTML中文网！