Skip to content

Latest commit

 

History

History
131 lines (104 loc) · 3.55 KB

README.md

File metadata and controls

131 lines (104 loc) · 3.55 KB
Raw

mobx-form-validator

base on mobx-form-validate and validator

Installation

npm i mobx-form-validator or yarn add mobx-form-validator

Usage

import validator from 'mobx-form-validator';

class TestModel{
  @observable
  @validator([
    {reg1,reg2,reg3,message},
    {reg1,reg2,reg3,message}
    ...
  ])
  name=''
}

Explame

export default class RegisterForm {
  @observable
  @validator([{
    required: true
  }])
  userName = ''

  @observable
  nickName = ''

  @observable
  @validator([{
    required: true, lengths: [1, 15], message: '请输入1-15位的密码！'
  }])
  password = ''

  @observable
  @validator([{
    custom: (target, targetValue, source) => {
      if (targetValue != source.password) {
        return message = '两次输入的密码不一样'
      }
    }
  }])
  passwordConfirm = ''


  @observable
  @validator([{
    required: true, message: "请输入邮箱地址"
  }, {
    type: 'Email', message: '请输入正确的邮箱地址！'
  }])
  email = ''

  @observable
  @validator([{
    pattern: /^1[3578]\d{9}$/, message: '请输入正确的手机号码！'
  }])
  mobilePhone = ''

  @observable
  @validator([{
     max: 200, min: 0, message: '年龄介乎0~200之间！'
  }])
  age = ''

const form = new RegisterForm();
console.log(form.validateErrorUserName);          // userName is required
console.log(form.validateErrorPassword);          // 请输入1-15位的密码
console.log(form.validateErrorPasswordConfirm);   // 两次输入的密码不一样
console.log(form.validateErrorEmail);             // 请输入正确的邮箱地址！
console.log(form.validateErrorMobilePhone);       // 请输入正确的手机号码！
console.log(form.validateErrorAge);               // 年龄介乎0~200之间！
console.log(form.isValid);                        // false

API

参数 说明 类型
beforeValidate 校验前转换,返回要转换的值，如果返回空，则取当前值 (value) => any
compare 与当前对象的某一字段进行全等对比 string
custom 自定义校验，返回错误信息，如果为空则认为校验成功 (target, targetValue, source) => string | undefined
lengths 字符串货数组长度 eg: length:[6,15] number[]
max 最大值 number
message 提示信息 string
min 最小值 number
pattern 正则表达式 RegExp
required 是否必填 boolean
type 数据类型 Enum Types

Enum Types

Ascii Base64 Boolean CreditCard Currency DataURI Decimal Email Float HexColor Hexadecimal IP Int JSON MACAddress Numeric URL UUID

custom

 /**
   * 自定义校验，返回错误信息，如果为空则认为校验成功
   * @param target 要校验的属性字段
   * @param targetValue 要检验的值
   * @param source 要校验的属性所属的对象
   */
  custom: (target, targetValue, source) => string | undefined;

Change Log

1.3.2

2017-11-08

  • add before method rename to beforeValidate
  • fix Enum Type
  • fix index.d.ts pathc

1.3.0

2017-08-10

  • Features
    • add compore method