Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manweill/mobx-form-validator
mobx-form-validator
https://github.com/manweill/mobx-form-validator
mobx mobx-form react react-native validator
Last synced: 14 days ago
JSON representation
mobx-form-validator
- Host: GitHub
- URL: https://github.com/manweill/mobx-form-validator
- Owner: Manweill
- Created: 2017-03-30T06:17:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T02:37:07.000Z (about 7 years ago)
- Last Synced: 2024-12-06T17:19:14.304Z (19 days ago)
- Topics: mobx, mobx-form, react, react-native, validator
- Language: TypeScript
- Homepage:
- Size: 32.2 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.MD
Awesome Lists containing this project
README
# mobx-form-validator
### base on [mobx-form-validate](https://github.com/tdzl2003/mobx-form-validate) and [validator](https://github.com/chriso/validator.js)
## Installation
npm i mobx-form-validator
or
yarn add mobx-form-validator
## Usage
```js
import validator from 'mobx-form-validator';
class TestModel{
@observable
@validator([
{reg1,reg2,reg3,message},
{reg1,reg2,reg3,message}
...
])
name=''
}
```
### Explame
```js
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](#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)
### Enum Types
`Ascii` `Base64` `Boolean` `CreditCard` `Currency` `DataURI` `Decimal` `Email` `Float` `HexColor` `Hexadecimal` `IP` `Int` `JSON` `MACAddress` `Numeric` `URL` `UUID`
### custom
``` js
/**
* 自定义校验，返回错误信息，如果为空则认为校验成功
* @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