UI组件

# Validator

# 表单验证

# 引入

import {Validator} from 'fanlelee-t-1-1'

# 参数

需要提供两个参数，data、rules。

# data对象

包含要验证的数据。

例：let data = {'email': 'xx@bb.com', ...}

# rules数组

包含验证目标及验证参数；

其中验证先后顺序按照数组元素0～n；

特殊规则：required: true会优先验证；

例：let rules = [ {key: 'email', required: true, pattern: /^.+@.+$/}, {...} ]

# 使用

import {Validator} from 'fanlelee-t-1-1'
let data = {
   'email': '',
}
let rules = [
   {key: 'email', required: true, pattern: /^.+@.+$/},
]
let validator = new Validator()
let errors = validator.validate(data, rules)
//erros: {
//        email: {
//                required: "必填"
//                }
//        }

# 提供以下几种验证：

# 1. pattern 正则

pattern: reg/'email'

import {Validator} from 'fanlelee-t-1-1'
let data = {
    'email': 'ddd',
}
let rules = [
    {key: 'email', pattern: /^.+@.+$/},
]
let validator = new Validator()
let errors = validator.validate(data, rules)
//erros: {
//        email: {
//                required: "必填"
//                }
//        }

# 2. minLength 最小长度

import {Validator} from 'fanlelee-t-1-1'
let data = {
    'email': 'ddd',
}
let rules = [
    {key: 'email', minLength: 10, pattern: 'email'}
]
let validator = new Validator()
let errors = validator.validate(data, rules)
//erros: {
//        email: {
//                minLength: "太短了",
//                pattern: "格式不正确"
//                }
//        }

# 3. maxLength 最大长度

import {Validator} from 'fanlelee-t-1-1'
let data = {
    'email': 'asdf@wwwwffffg',
}
let rules = [
    {key: 'email', maxLength: 10},
]
let validator = new Validator()
let errors = validator.validate(data, rules)
//erros: {
//        email: {
//                maxLength: "太长了"
//                }
//        }

# 自定义新规则

自定义新规则后，创建多个Validator并不会相互影响。

import {Validator} from 'fanlelee-t-1-1'
let data = {
    'email': 'asdffjfjfjffffff'
}
let validator1 = new Validator()
let validator2 = new Validator()
validator1.hasNumber = (value) => {
    if (!/\d/.test(value)) {
        return '必须含有数字'
    }
}
let rules = [{key: 'email', hasNumber: true}]
let errors1 = validator1.validate(data, rules)
// errors1: {email: {hasNumber: "必须含有数字"}}

let errors2 = validator2.validate(data, rules)
// 会抛出错误，不存在的校验器：hasNumber

# 可以全局添加新规则

Validator提供add方法来自定义全局添加新规则。

import {Validator} from 'fanlelee-t-1-1'
let data = {
    'email': 'asdffjfjfjffffff'
}
let validator1 = new Validator()
let validator2 = new Validator()
Validator.add('hasNumber' ,(value) => {
    if (!/\d/.test(value)) {
        return '必须含有数字'
    }
})
let rules = [{key: 'email', required: true, minLength: 5, maxLength: 10, hasNumber: true}]
let errors1 = validator1.validate(data, rules)
// errors1:{email: {hasNumber: "必须含有数字"}}
let errors2 = validator2.validate(data, rules)
// errors2:{email: {hasNumber: "必须含有数字"}}

← Table →