很多form表单和其它场景,在提交前或进入下一步前需要校验逻辑,这里总结了一个通用方法:
const form = { name: '', age: 20, time: ['2100-01-01', '2100-01-01'] } const validForm = () => { // 校验状态总结 let valid = { status: true, message: '' } // 解构、重命名等操作 const { name, age, time: [timeStart, timeEnd] } = form // 校验逻辑集合。 const validList = [ ['name字段不能为空!', () => name], ['age字段值不能大于19!', () => age <= 19], ['name字段长度大于4时,age字段不能小于等于10!', () => name.length > 4 && age > 10], [ 'age字段为19时,time字段的开始时间必须小于于当前时间,结束时间必须大于当前时间', () => { if (age === 19) { return +new Date(timeStart) < +new Date() && +new Date(timeEnd) > +new Date() } else { return true } } ] ] // 按数组顺序往下校验,遇到一个不成功就退出 for (const list of validList) { if (!list[1]()) { valid.status = false valid.message = list[0] break } } if (!valid.status) alert(valid.message) return valid.status } // 提交函数 const submit = () => { if (!validForm()) return false alert('提交成功') } submit() // 提示:name字段不能为空 form.name = 'william' submit() // 提示:age字段值不能大于19 form.age = 8 submit() // 提示:name字段长度大于4时,age字段不能小于10 form.age = 19 submit() // 提示:age字段为19时,time字段的开始时间必须小于于当前时间,结束时间必须大于当前时间 form.time = ['2018-01-01', '2100-01-01'] submit() // 提交成功
标签:01,name,自定义,age,校验,js,字段,form From: https://www.cnblogs.com/wiliam/p/18096990