一、需求说明
- 设计一个构造函数来完成任务
- 有三种类型校验:是否必填、最大最小长度、正则校验
- 当用户输入值时可触发单个字段校验,实时提示
- 当提交表单时可校验整个表单
二、需求实现
2.1 确定结构
- 这个构造函数的输入参数有两个:rules 和 formData
function Validator(rules, formData) {
let self = this
self.rules = rules // 校验规则
self.formData = formData // 表单对象
}
- 设计两个函数:单个字段校验函数 validateField,和整体校验函数 validate
2.2 实现单个字段校验函数
// 单个字段校验
Validator.prototype.validateField = function(key) {
let value = formData[key]
if (rules[key] && rules[key].length) {
for (let i = 0; i < rules[key].length; i++) {
let rule = rules[key][i]
if (rule.required) {
// 必填校验
if (!value) {
return {
valid: false,
msg: rule.message
}
}
} else if (rule.max || rule.min) {
// 最大最小长度校验
if (value && (value.length > rule.max || value.length < rule.min)) {
return {
valid: false,
msg: rule.message
}
}
} else if (rule.pattern && value) {
// 正则校验
let reg = new RegExp(rule.pattern)
if (!reg.test(value)) {
return {
valid: false,
msg: rule.message
}
}
}
}
}
return {
valid: true
}
}
2.3 实现整体校验函数
// 整体校验
Validator.prototype.validate = function() {
let res = []
Object.keys(rules).forEach(key => {
res.push(handleEachValidate(key))
})
for (let i = 0; i < res.length; i++) {
if (!res[i].valid) {
wx.showToast({
title: res[i].msg,
icon: 'none'
})
return false
}
}
return true
}
三、使用方式
- 定义一个表单对象:
data: {
formData: {
name: ''
}
}
- 在生命周期函数中,初始化 validator 实例:
onReady(){
this.initValidator()
},
// 初始化实例
initValidator() {
let rules = {
name: [
{required: true, message: '请填写姓名', trigger: handleBlur},
{min: 2, max: 20, message: '姓名大于2个字符,小于20个字符', trigger: handleBlur},
{pattern: /[\u4E00-\u9FA5]/g, message: '姓名必须是汉字', trigger: handleBlur}
]
}
this.validator = new Validator(rules, this.data.formData)
}
- 需要校验的字段,绑定一个 blur 或 change 事件处理函数(这里以 blur 事件举例)。在这个函数中,调用实例的单个字段校验函数:
handleBlur(e, id) {
let res = this.validator.validateField(id)
if (!res.valid) {
wx.showToast({
title: res.msg,
icon: 'none'
})
}
}
- 在表单提交的函数中,调用实例的整体校验函数:
handleSubmit() {
let res = this.validator.validate()
if (!res) return
// 处理后续操作
}
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结,预计会每周至少会更新一篇。
目前我们学习计划是: 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外,工作中用到的一些技术和完成的功能,我们也会及时总结更新在这里
如文章有错误或表述不清晰,欢迎各位留言反馈~~