应用场景
在日常工作中,做为一个前端码农, 经常需要与用户"交流", 用到最多的"通迅工具"莫过于表单了, 说起表单,那么就少不了验证
写在前面
在做一件事情前, 我们要遵循三个原则
- 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