0.0.1 • Published 8 years ago
react-fast-form v0.0.1
react-fast-form
React form validation,simple and free!
目前为不稳定版本,非 fast-flow 维护者请勿在公司项目中使用。
📦 Install
npm i react-fast-form --save
📄 Usage
基础
<div id="demo"></div>
var Form = require('react-fast-form')
var React = require('react')
var ReactDOM = require('react-dom')
var App = React.createClass({
componentWillMount: function () {
this.form = new Form(this)
},
getInitialState: function () {
return {value: ''}
},
onSubmit: function (e) {
// checkAll 默认触发 onBlur 校验
this.form.checkAll(function (error, errorArray) {
console.log(arguments)
})
e.preventDefault()
},
onChange: function (e) {
this.setState({value: e.target.value})
// 手动触发 onChange 时校验
this.form.triggerCheck('user', 'findNumber')
},
render: function () {
let self = this
let check = this.form.check
let checkError = this.form.checkError
return (
<div >
<input type="text"
{...check({
// 代理 props 开始 ----------->
value: self.state.value,
onChange: self.onChange,
onBlur: function() {},
onFocus: function() {},
ref: 'user',
// 代理 props 结束 ----------->
action: {
findNumber: function (callback) {
var value = self.state.value
if (/\d/.test(value)) {
callback('change: 用户名中不允许有数字');return
}
callback();return
},
onBlur: function (callback) {
// 模拟 异步
setTimeout(function (){
var value = self.state.value
if(!/\S/.test(value)) {
callback('blur: 用户名必填');return
}
if(value.length < 5) {
callback('blur: 用户名长度至少为5');return
}
if (/\d/.test(value)) {
callback('blur: 用户名中不允许有数字');return
}
callback();return
}, 500)
}
// onChange 的校验请在 self.onChange 中手动触发
}
})}
/>
<button type="button" onClick={this.onSubmit} >Submit</button>
{
checkError('user')?checkError('user').msg:null
}
</div>
)
}
})
ReactDOM.render(<App />, document.getElementById('demo'))
triggerCheck(ref, actionName) 手动触发校验
🔨 development
npm i -g fis3 --registry=https://registry.npm.taobao.org
# Install dependencies | 安装依赖
npm run dep
# > Suggested Use `yarn` replace `npm run dep` | 建议使用 `yarn` 替代 `npm run dep`
# npm i -g yarn
# npm run yi
# Server
npm run s
# Build
npm run dev
# build document ./output | 构建 gh-pages 版本 到 output/
npm run gh
# git push ./output branch:gh-pages | 将 output/** 发布到 gh-pages 分支
npm run gh-push
# build commonjs code ./output | 构建 npm 要发布的代码到 output/
npm run npm
cd ./output
npm publish
Build based on fast-boot
For npm owner: npm publish Need to be in ./output
0.0.1
8 years ago