2018-05-04 08:02:31 +00:00
|
|
|
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
|
|
|
|
import createDOMForm from '../src/createDOMForm'
|
2018-05-15 01:52:44 +00:00
|
|
|
import { DatePicker, Select } from 'vue-antd-ui'
|
2018-05-04 08:02:31 +00:00
|
|
|
import { regionStyle, errorStyle } from './styles'
|
|
|
|
const { Option } = Select
|
|
|
|
|
|
|
|
const Email = {
|
|
|
|
props: {
|
|
|
|
form: Object,
|
|
|
|
},
|
|
|
|
render () {
|
|
|
|
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
|
|
|
const errors = getFieldError('email')
|
|
|
|
return (<div style={ regionStyle }>
|
|
|
|
<div>email sync validate</div>
|
|
|
|
<div>
|
|
|
|
<input {...getFieldProps('email', {
|
|
|
|
initialValue: '',
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
type: 'email',
|
|
|
|
message: <b key='err'>错误的 email 格式</b>,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
})}
|
|
|
|
/></div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{errors}
|
|
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{isFieldValidating('email') ? 'validating' : null}
|
|
|
|
</div>
|
|
|
|
</div>)
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const User = {
|
|
|
|
props: {
|
|
|
|
form: Object,
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
userExists (rule, value, callback) {
|
|
|
|
setTimeout(() => {
|
|
|
|
if (value === '1') {
|
|
|
|
callback([new Error('are you kidding?')])
|
|
|
|
} else if (value === 'yiminghe') {
|
|
|
|
callback([new Error('forbid yiminghe')])
|
|
|
|
} else {
|
|
|
|
callback()
|
|
|
|
}
|
|
|
|
}, 300)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
|
|
|
const errors = getFieldError('user')
|
|
|
|
return (<div style={ regionStyle }>
|
|
|
|
<div><span style={{ color: 'red' }}>*</span> user async validate</div>
|
|
|
|
<div>
|
|
|
|
<input {...getFieldProps('user', {
|
|
|
|
initialValue: '',
|
|
|
|
validateFirst: true,
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
validator: this.userExists,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
})}
|
|
|
|
/></div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{(errors) ? errors.join(',') : null}
|
|
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{isFieldValidating('user') ? 'validating' : null}
|
|
|
|
</div>
|
|
|
|
</div>)
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
const CustomInput = {
|
|
|
|
props: {
|
|
|
|
form: Object,
|
|
|
|
},
|
|
|
|
render () {
|
|
|
|
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
|
|
|
const errors = getFieldError('select')
|
|
|
|
return (<div style={ regionStyle }>
|
|
|
|
<div><span style={{ color: 'red' }}>*</span> custom select sync validate</div>
|
|
|
|
<div><Select
|
|
|
|
placeholder='please select'
|
|
|
|
style={{ width: '200px' }}
|
|
|
|
{...getFieldProps('select', {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<Option value='1'>1</Option>
|
|
|
|
<Option value='2'>2</Option>
|
|
|
|
</Select></div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{(errors) ? errors.join(',') : null}
|
|
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{isFieldValidating('select') ? 'validating' : null}
|
|
|
|
</div>
|
|
|
|
</div>)
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const DateInput = {
|
|
|
|
props: {
|
|
|
|
form: Object,
|
|
|
|
},
|
|
|
|
render () {
|
|
|
|
const { getFieldProps, getFieldError } = this.form
|
|
|
|
const errors = getFieldError('date')
|
|
|
|
return (<div style={ regionStyle }>
|
|
|
|
<div><span style={{ color: 'red' }}>*</span> DateInput sync validate</div>
|
|
|
|
<div style={{ width: '200px' }}>
|
|
|
|
<DatePicker
|
|
|
|
placeholder='please select'
|
|
|
|
{...getFieldProps('date', {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
type: 'object',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{(errors) ? errors.join(',') : null}
|
|
|
|
</div>
|
|
|
|
</div>)
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
function toNumber (v) {
|
|
|
|
if (v === undefined) {
|
|
|
|
return v
|
|
|
|
}
|
|
|
|
if (v === '') {
|
|
|
|
return undefined
|
|
|
|
}
|
|
|
|
if (v && v.trim() === '') {
|
|
|
|
return NaN
|
|
|
|
}
|
|
|
|
return Number(v)
|
|
|
|
}
|
|
|
|
|
|
|
|
const NumberInput = {
|
|
|
|
props: {
|
|
|
|
form: Object,
|
|
|
|
},
|
|
|
|
render () {
|
|
|
|
const { getFieldProps, getFieldError } = this.form
|
|
|
|
const errors = getFieldError('number')
|
|
|
|
return (<div style={ regionStyle }>
|
|
|
|
<div>number input</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
{...getFieldProps('number', {
|
|
|
|
initialValue: '1',
|
|
|
|
rules: [{
|
|
|
|
transform: toNumber,
|
|
|
|
type: 'number',
|
|
|
|
}],
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{(errors) ? errors.join(',') : null}
|
|
|
|
</div>
|
|
|
|
</div>)
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const Form = {
|
|
|
|
methods: {
|
|
|
|
onSubmit (e) {
|
|
|
|
console.log('submit')
|
|
|
|
e.preventDefault()
|
|
|
|
this.form.validateFieldsAndScroll({ scroll: { offsetTop: 20 }}, (error, values) => {
|
|
|
|
if (!error) {
|
|
|
|
console.log('ok', values)
|
|
|
|
} else {
|
|
|
|
console.log('error', error, values)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
reset (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
this.form.resetFields()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const { form } = this
|
|
|
|
const { getFieldProps, getFieldError } = form
|
|
|
|
return (<div style={{ margin: '20px' }}>
|
|
|
|
<h2>overview</h2>
|
|
|
|
<form onSubmit={this.onSubmit}>
|
|
|
|
<User form={ form } saveRef={this.saveRef}/>
|
|
|
|
|
|
|
|
<NumberInput form={ form }/>
|
|
|
|
|
|
|
|
<Email form={ form }/>
|
|
|
|
|
|
|
|
<CustomInput form={ form }/>
|
|
|
|
|
|
|
|
<DateInput form={ form }/>
|
|
|
|
|
|
|
|
<div style={ regionStyle }>
|
|
|
|
<div>normal required input</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
{...getFieldProps('normal', {
|
|
|
|
initialValue: '',
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
}],
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div style={errorStyle}>
|
|
|
|
{(getFieldError('normal')) ? getFieldError('normal').join(',') : null}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style={ regionStyle }>
|
|
|
|
<button onClick={this.reset}>reset</button>
|
|
|
|
|
|
|
|
<input type='submit' value='submit'/>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>)
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
export default createDOMForm({
|
|
|
|
validateMessages: {
|
|
|
|
required (field) {
|
|
|
|
return `${field} 必填`
|
|
|
|
},
|
|
|
|
},
|
|
|
|
})(Form)
|