表单验证组件

基本思路

var data = {
  email: 'xxx',
  password: 'xxx'
}
var rules = {
  email: {
    pattern: 'email'
  },
  password: {
    minLength: 6,
    maxLength: 20
  }
}
validate(data, rules)
errors = {
  email: {
    pattern: '格式不对',
  },
  password: {
    minLength: '太短',
    maxLenth: undefined
  }
}

上面的代码存在着一个问题：
有时候用户会按顺序校验，他希望先校验email再校验password，而我们上面的rules是对象形式，对象形式不能确定先后顺序，有可能我们在遍历的时候先遍历到了password，结果用户输入完成的时候先提示了password

• 改进：将对象换成数组的形式
  因为数组遍历可以确定先后顺序

var rules = {
  {key: 'email', pattern: 'email', required: true},
  {key: 'password', minLength: 6, maxLength: 20}
}
validate(data, rules)
errors = {
  email: {
    required: '必填',
    pattern: '格式不对'
  },
  password: {
    minLength: '太短',
    maxLength: undefined
  }
}

• 创建validate.js

export default function validate(data, rules) {
    let errors = {}
    rules.forEach(rule=>{
        let value = data[rule.key]
        if(rule.required && !value && value !== 0){
            errors[rule.key] = {required: '必填'}
        }
        if(rule.pattern && rule.pattern === 'email'){
            if(/^.+@.+$/.test(value) === false){
                errors[rule.key]= {pattern: 'email格式不正确'}
            }
        }
    })
    return errors
}

• 添加validate.spec.js单元测试

import chai, {expect} from 'chai'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'
import validate from '../../src/validate.js'
import {describe} from "mocha";
chai.use(sinonChai)


describe('validate', () => {
    it('存在.', () => {
        expect(validate).to.exist
    })
    it('test 1',()=>{
        let data = {
            email: ''
        }
        let rules = [
            {key: 'email', required: true},
        ]
        let errors = validate(data, rules)
        expect(errors.email.required).to.eq('必填')
    })
    it('test email is number 0',()=>{
        let data = {
            email: 0
        }
        let rules = [
            {key: 'email', required: true},
        ]
        let errors = validate(data, rules)
        expect(errors.email).to.not.exist
    })
    it('test 3',()=>{
        let data = {
            email: '@gmail.com'
        }
        let rules = [
            {key: 'email', pattern: 'email'},
        ]
        let errors = validate(data, rules)
        expect(errors.email.pattern).to.eq('email格式不正确')
    })
})