face
Write less code, do more things!
check 支持同步或异步自定义校验方式, 提供不同的校验的生命周期
<input {...self.form.item("user", {check: {...}})} />
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class Basic extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo1'
}
}
self.form = new FormLogic({
app: self,
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<form
onSubmit={function(e) {
e.preventDefault()
self.form.checkAll(function (fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}}
>
<input {...self.form.item('user', {
check: {
default: function (value) {
if(/\d/.test(value)){
return '不允许出现数字'
}else {
return true
}
},
change: function (value) {
return /\d/.test(value) ? '不允许出现数字' : true
},
blur: (value) => {
return /\d/.test(value) ? '不允许出现数字' : true
}
}
})} />
<pre>{self.form.error('user')}</pre>
<button type="submit" >
Submit
</button>
</form>
)
}
}
export default Basic
使用 promise 校验异步的验证
<input {...self.form.item("user", {check: {...}})} />
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class PromiseFn extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo1'
}
}
self.form = new FormLogic({
app: self,
getValue: function () { return self.state.form },
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<form
onSubmit={function(e) {
e.preventDefault()
self.form.checkAll(function (fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}}
>
<input {...self.form.item('user', {
check: function(value) {
return new Promise(function(resolve, reject) {
// mock do async something
setTimeout(function(){
if(/\d/.test(value)){
reject('不允许出现数字')
}
if(!/\S/.test(value)){
reject('用户名必填')
}
resolve()
},1000)
})
}
})} />
<pre>{self.form.error('user')}</pre>
<button type="submit" >
Submit
</button>
</form>
)
}
}
export default PromiseFn
配置不同的时机触发不一样的校验函数, 也可以用|使之共用
check: fn() check: {default:...,change:...,blur:...,focus|blur:...}
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class Time extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
price: ''
}
}
self.form = new FormLogic({
app: self,
getValue: function () { return self.state.form },
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
return (
<form
onSubmit={function(e) {
e.preventDefault()
self.form.checkAll(function (fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}}
>
价格 (10~100/元): <br/>
<input {...self.form.item('price', {
check: {
'default|blur': function(value) {
if(!/\S/.test(value)){
return '价格必填'
}
if(/[^\d]/.test(value)){
return '只能输入数字'
}
if(value < 10 || value > 100){
return '价格必须在 10 ~ 100 之间'
}
return true
},
focus: function(value) {
if(!/\S/.test(value)){
return '(获取焦点时检测)价格必填'
}
if(value < 10 || value > 100){
return '(获取焦点时检测)价格必须在 10 ~ 100 之间'
}
return true
},
change: (value) => {
return /[^\d]/.test(value) ? '(输入时检测)只能输入数字' : true
}
}
})} />
<pre>{self.form.error('price')}</pre>
<button type="submit" >
Submit
</button>
</form>
)
}
}
export default Time
<input {...self.form.item(key, {
check: () => { ... }
}/>
// 等同于
<input {...self.form.item(key, {
check:{
'default|blur': () => { ... }
}
}/>
手动调用校验函数
check(key, fn) check(keyArray, fn) checkAll(fn)
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class CheckFn extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo123',
psw: '',
repsw: '',
}
}
self.form = new FormLogic({
app: self,
getValue: function () { return self.state.form },
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
checkAll = () => {
let self = this
self.form.checkAll(function (fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}
check = (key) => {
let self = this
self.form.check(key, function(fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}
render() {
const self = this
return (
<form onSubmit={function(e){
e.preventDefault();
}}
>
user (非数字): <br/>
<input {...self.form.item('user', {
check: (value) => {
return /\d/.test(value) ? '不能存在数字' : true
}
})} />
<pre>{self.form.error('user')}</pre>
psw (必填): <br/>
<input {...self.form.item('psw', {
check: (value) => {
return !/\S/.test(value) ? '密码必填' : true
}
})} />
<pre>{self.form.error('psw')}</pre>
repsw (必填): <br/>
<input {...self.form.item('repsw', {
check: (value) => {
return value == self.form.psw ? true : '密码不一致'
}
})} />
<pre>{self.form.error('repsw')}</pre>
<button onClick={function() {
self.check('user')
}}
>check('psw')</button>
<button onClick={function() {
self.check(['user','psw'])
}}
>check(['user','psw'])</button>
<button onClick={function() {
self.checkAll()
}}
>checkAll</button>
</form>
)
}
}
export default CheckFn
校验顺序方式 : true 队列式一次校验, false 并发式一起校验
校验结束时机 : false 一个错就结束,执行回调, true 全部校验完成结束,执行回调
声明new FormLogic()时, 可以配置默认{function|object} options,
在调用check或checkAll时, 无{object} options参数, 即调用声明时配置参数
check(key, [options,] fn)
check(keyArray, [options,] fn)
checkAll([options,] fn)
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class Options extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo1'
},
queue:true,
every:true,
time: 0 // 辅助计时 忽略参数
}
self.form = new FormLogic({
app: self,
getValue: function () { return self.state.form },
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
},
options:function () {
return {
queue:self.state.queue,
every:self.state.every
}
}
/* 也可以写成
options: {
queue:true,
every:true
}
*/
})
}
checkAll = () => {
let self = this
/* 辅助计时 忽略代码 start */
let count = 0
self.setState({
time: 0
})
while(count<6){
setTimeout(()=>{
self.setState({
time: self.state.time + 1
})
console.log(self.state.time+'s')
},count*1000 + 1000)
count++
}
/* 辅助计时 忽略代码 end */
// 校验
self.form.checkAll(
function (fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
}
)
/* 也可以写成
self.form.checkAll(
{
queue:true,
every:true
},
function (fail, errors) {
...
}
)
*/
}
render() {
const self = this
return (
<form
onSubmit={function(e) {
e.preventDefault()
self.checkAll()
}}
>
user:
<input {...self.form.item('user', {
check: (value) => {
return /\d/.test(value) ? '不能存在数字' : true
}
})} />
(立即返回校验结果)
<pre>{self.form.error('user')}</pre>
psw:
<input {...self.form.item('psw', {
check: (value) => {
return new Promise((resolve, reject) => {
setTimeout(()=>{
if(!/\S/.test(value)){
reject('密码必填')
}else{
resolve()
}
},2000)
})
}
})} />
(2秒后返回校验结果)
<pre>{self.form.error('psw')}</pre>
repsw:
<input {...self.form.item('repsw', {
check: (value) => {
return new Promise((resolve, reject) => {
setTimeout(()=>{
if(value == self.form.psw){
resolve()
}else{
reject('密码不一致')
}
},3000)
})
}
})} />
(3秒后返回校验结果)
<pre>{self.form.error('repsw')}</pre>
<hr/>
queue:
<select value={self.state.queue}
onChange={function(e){
self.setState({
queue:e.target.value == 'true' ? true : false
})
}}
>
<option value={true} >true</option>
<option value={false} >false</option>
</select>
every:
<select value={self.state.every}
onChange={function(e){
self.setState({
every:e.target.value == 'true' ? true : false
})
}}
>
<option value={true} >true</option>
<option value={false} >false</option>
</select>
{' ( 辅助计时,方便对比: '+ self.state.time+' s ) '}
<button type="submit" >
Submit
</button>
</form>
)
}
}
export default Options
<input {...self.form.item("user", {disabled: <Boolean> })} />
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class Disabled extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
form: {
user: 'nimo1'
},
disabled:false
}
self.form = new FormLogic({
app: self,
getValue: function () { return self.state.form },
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
checkAll = () => {
let self = this
self.form.checkAll(function (fail, errors) {
console.log(fail, errors)
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}
render() {
const self = this
return (
<form
onSubmit={function(e) {
e.preventDefault()
self.checkAll()
}}
>
<input {...self.form.item('user', {
disabled: self.state.disabled,
check: (value) => {
return new Promise((resolve, reject) => {
if(/\d/.test(value)){
reject('user 不允许出现数字')
}else{
resolve()
}
})
}
})} />
disabled:
<input type="checkbox"
checked={self.state.disabled}
onChange={function(){
self.setState({
disabled:!self.state.disabled
})
}}
/>
<pre>{self.form.error('user')}</pre>
<button type="submit" >
Submit
</button>
</form>
)
}
}
export default Disabled
clear() clear(key) clear(keyArray)
import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
import safeExt from 'safe-extend'
class Clear extends Component {
constructor (props) {
super(props)
const self = this
self.state = {
type: 'company',
form: {
user: 'nimo1',
company_name: '123'
}
}
self.form = new FormLogic({
app: self,
getValue: function () {
return self.state.form
},
onSync: function (value) {
let state = self.state
state.form = value
self.setState({
form: value
})
}
})
}
render() {
const self = this
console.log('self.form.data',self.form.data)
return (
<div>
<select
name="type"
value={self.state.type}
onChange={function(e){
self.setState({
type:e.target.value
})
}}
>
<option value="">其他</option>
<option value="company">公司注册</option>
<option value="person">个人注册</option>
</select>
<form
onSubmit={function(e) {
e.preventDefault()
self.form.checkAll(function (fail, errors) {
if (fail) {
alert(errors[0].data)
self.refs[errors[0].item.ref].focus()
return
}
alert('success')
})
}}
>
{
self.state.type
? (<div>
名字:
<input {...self.form.item('user', {
check: {
default: function (value) {
if(/\d/.test(value)){
return '名字 不允许出现数字'
}else {
return true
}
},
change: function (value) {
return /\d/.test(value) ? '名字 不允许出现数字' : true
},
blur: (value) => {
return /\d/.test(value) ? '名字 不允许出现数字' : true
}
}
})} />
<pre>{self.form.error('user')}</pre>
</div>) : null
}
{
self.state.type == 'company'
? (<div>
公司名字:
<input {...self.form.item('company_name', {
check: {
default: function (value) {
if(/\d/.test(value)){
return '公司名字 不允许出现数字'
}else {
return true
}
},
change: function (value) {
return /\d/.test(value) ? '公司名字 不允许出现数字' : true
},
blur: (value) => {
return /\d/.test(value) ? '公司名字 不允许出现数字' : true
}
}
})} />
<pre>{self.form.error('company_name')}</pre>
</div>) : null
}
<button type="submit" >
Submit
</button>
</form>
<hr/>
<button
onClick={function(){
self.setState({
type:''
})
self.form.clear()
}}
>clear()</button>
<button
onClick={function(){
self.setState({
type:'person'
})
self.form.clear('company_name')
}}
>clear('company_name')</button>
<pre>
{JSON.stringify(self.form.data, null, 4)}
</pre>
</div>
)
}
}
export default Clear