Научите вас, как написать валидатор реакции

внешний интерфейс React.js

Сценарии применения

В повседневной работе, как фронтенд-фермеру кода, мне часто приходится "общаться" с пользователями. Наиболее часто используемым "инструментом общения" является форма. Когда дело доходит до форм, верификация незаменима.

написать впереди

Прежде чем что-то делать, мы должны следовать трем принципам

  • ПОЧЕМУ почему
  • кто это сделает
  • КАК как это сделать

Не объясняя вышеперечисленных трех слов (испытывайте на себе), продолжаем спускаться вниз

Прежде чем мы напишем валидатор, давайте немного подумаем и проследим за ходом мысли.

  1. Создайте пул и поместите все значения, введенные пользователем, которые необходимо проверить
  2. Постройте город, чтобы проверить (защитить), является ли ввод пользователя законным.

Что ж, общая процедура — это два вышеуказанных пункта, и с небольшой поддержкой мы можем реализовать простой валидатор на основе реакции.

В заголовок

  • Сначала постройте город
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 //默认不显示错误信息
  }
}
  • Незаконный ввоз и битва за город

Мы представили сообщение гарнизона внешнему миру, и большая часть работы по защите от внешних врагов выполняется им.

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)
        }
      }
    }
  }
}
  • как его правильно использовать

Ниже нам нужно только отправить нам защитников сообщений

  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

Категории