手把手教你写一个react validator

手把手教你写一个react validator

技术杂谈小彩虹2021-08-14 22:29:51200A+A-

应用场景

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

写在前面

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

  • 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

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们