[ javascript ] 简易表单验证

只实现简单的表单验证。 

function checkRule(obj, key, rule) {
  return rule.valid ? rule.valid(obj[key]) : true
}

function validator(obj, rules) {
  for (let key in rules) {
    const rule = rules[key]
    // 如果为空
    if (obj[key] !== undefined && obj[key].length === 0) {
      return rule.empty || '请输入'
    }
    // 验证规则有效性
    if (!checkRule(obj, key, rule)) {
      return rule.error || '请输入正确的值'
    }
  }
}

测试：

const rules = {
  phone: {
    valid: value => /\d{11}/.test(value),
    empty: '请输入手机号',
    error: '请输入正确的手机号'
  },
  code: {
    valid: value => value.length === 4,
    empty: '请输入验证码',
    error: '请输入正确的验证码'
  }
}

const obj = { phone: '', code: '' }
console.log('test1:', validator(obj, rules))

obj.phone = '12323'
console.log('test2:', validator(obj, rules))

obj.phone = '13000000000'
console.log('test3:', validator(obj, rules))

obj.code = 'xz'
console.log('test4:', validator(obj, rules))

obj.code = 'xz22'
console.log('test5:', validator(obj, rules))

// 测试输出结果：

test1: 请输入手机号
test2: 请输入正确的手机号
test3: 请输入验证码
test4: 请输入正确的验证码
test5: undefined