Git Product home page Git Product logo

mobx-form-validator's Introduction

mobx-form-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

参数 说明 类型
before 校验前转换,返回要转换的值,如果返回空,则取当前值 (value) => any
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;

mobx-form-validator's People

Watchers

cooclsee avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.