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