test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 04:30:06 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

refine validation demo.

Browse Source
This commit is contained in:
SimaQ 2015-11-03 23:34:51 +08:00
parent 2b54004b7e
commit 49459897d7
4 changed files with 215 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
components/validation/demo/basic.md
View File

@ -1,21 +1,18 @@
# 基本
# Input 表单域
- order: 0
基本的表单校验例子。
每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。
**每个表单域要声明 `name` 属性作为校验的标识**，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。
表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。
---
````jsx
import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form, Input} from 'antd';
import {Validation, Button, Form, Input} from 'antd';
const Validator = Validation.Validator;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
function cx(classNames) {
@ -40,24 +37,16 @@ const Demo = React.createClass({
status: {
email: {},
name: {},
select: {},
radio: {},
passwd: {},
rePasswd: {},
textarea: {},
birthday: {},
primeNumber: {}
textarea: {}
},
formData: {
email: undefined,
name: undefined,
select: undefined,
radio: undefined,
passwd: undefined,
rePasswd: undefined,
textarea: undefined,
birthday: undefined,
primeNumber: 9
textarea: undefined
},
isEmailOver: false, // email 是否输入完毕
emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法
@ -144,22 +133,6 @@ const Demo = React.createClass({
}
},
checkBirthday(rule, value, callback) {
if (value && value.getTime() >= Date.now()){
callback(new Error('你不可能在未来出生吧!'));
} else {
callback();
}
},
checkPrime(rule, value, callback) {
if (value !== 11) {
callback(new Error('8~12之间的质数明明是11啊!'));
} else {
callback();
}
},
render() {
const formData = this.state.formData;
const status = this.state.status;
@ -195,41 +168,6 @@ const Demo = React.createClass({
</Validator>
</FormItem>
<FormItem
label="国籍："
id="select"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('select')}
help={status.select.errors ? status.select.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您的国籍'}]}>
<Select size="large" placeholder="请选择国家" style={{width:"100%"}} name="select" value={formData.select}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
<Option value="japan">日本</Option>
<Option value="korean">韩国</Option>
<Option value="Thailand">泰国</Option>
</Select>
</Validator>
</FormItem>
<FormItem
label="性别："
id="radio"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('radio')}
help={status.radio.errors ? status.radio.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您的性别'}]}>
<RadioGroup name="radio" value={formData.radio}>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
</RadioGroup>
</Validator>
</FormItem>
<FormItem
label="密码："
id="password"
@ -262,36 +200,6 @@ const Demo = React.createClass({
</Validator>
</FormItem>
<FormItem
label="生日："
id="birthday"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('birthday')}
help={status.birthday.errors ? status.birthday.errors.join(',') : null}
required>
<Validator rules={[{
required: true,
type: 'date',
message: '你的生日是什么呢?'
}, {validator: this.checkBirthday}]}>
<Datepicker name="birthday" value={formData.birthday}></Datepicker>
</Validator>
</FormItem>
<FormItem
label="8~12间的质数："
id="primeNumber"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('primeNumber')}
help={status.primeNumber.errors ? status.primeNumber.errors.join(',') : null}
required>
<Validator rules={[{validator: this.checkPrime}]}>
<InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
</Validator>
</FormItem>
<FormItem
label="备注："
id="textarea"

2
components/validation/demo/customize.md
View File

@ -1,6 +1,6 @@
# 自定义校验规则
- order: 1
- order: 2
密码校验实例。

113
components/validation/demo/multiple-select.md
View File

@ -1,113 +0,0 @@
# 多选 Select
- order: 2
多选 Select 的校验例子。
---
````jsx
var Validation = antd.Validation;
var Validator = Validation.Validator;
var Select = antd.Select;
var Option = Select.Option;
var Button = antd.Button;
function cx(classNames) {
if (typeof classNames === 'object') {
return Object.keys(classNames).filter(function(className) {
return classNames[className];
}).join(' ');
} else {
return Array.prototype.join.call(arguments, ' ');
}
}
var Form = React.createClass({
mixins: [Validation.FieldMixin],
getInitialState() {
return {
status: {
select: {}
},
formData: {
select: undefined
}
};
},
handleSubmit(e) {
e.preventDefault();
var validation = this.refs.validation;
validation.validate((valid) => {
if (!valid) {
console.log('error in form');
return;
} else {
console.log('submit');
}
console.log(this.state.formData);
});
},
handleReset(e) {
this.refs.validation.reset();
this.setState(this.getInitialState());
e.preventDefault();
},
renderValidateStyle(item, hasFeedback=true) {
var formData = this.state.formData;
var status = this.state.status;
var classes = cx({
'has-feedback': hasFeedback,
'has-error': status[item].errors,
'is-validating': status[item].isValidating,
'has-success': formData[item] && !status[item].errors && !status[item].isValidating
});
return classes;
},
render() {
var formData = this.state.formData;
var status = this.state.status;
return (
<form className="ant-form-horizontal">
<Validation ref="validation" onValidate={this.handleValidate}>
<div className="ant-form-item">
<label className="col-7" required>喜欢的颜色：</label>
<div className="col-12">
<div className={this.renderValidateStyle('select', false)}>
<Validator rules={[{required: true, message: '请选择您喜欢的颜色', type: 'array'}]}>
<Select multiple size="large" placeholder="请选择颜色" style={{width:"100%"}} name="select" value={formData.select}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
<Option value="yellow">黄色</Option>
<Option value="green">绿色</Option>
<Option value="blue">蓝色</Option>
</Select>
</Validator>
{status.select.errors ? <div className="ant-form-explain">{status.select.errors.join(',')}</div> : null}
</div>
</div>
</div>
<div className="ant-form-item">
<div className="col-offset-6 col-12">
<Button type="primary" onClick={this.handleSubmit}>确 定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重 置</Button>
</div>
</div>
</Validation>
</form>
);
}
});
ReactDOM.render(<Form />, document.getElementById('components-validation-demo-multiple-select'));
````

209
components/validation/demo/other-items.md Normal file
View File

@ -0,0 +1,209 @@
# 其他表单域校验
- order: 1
提供以下组件表单域的校验。
`Select` `Radio` `Datepicker` `InputNumber`。
---
````jsx
import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form} from 'antd';
const Validator = Validation.Validator;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
function cx(classNames) {
if (typeof classNames === 'object') {
return Object.keys(classNames).filter(function(className) {
return classNames[className];
}).join(' ');
} else {
return Array.prototype.join.call(arguments, ' ');
}
}
function noop() {
return false;
}
const Demo = React.createClass({
mixins: [Validation.FieldMixin],
getInitialState() {
return {
status: {
select: {},
multiSelect: {},
radio: {},
birthday: {},
primeNumber: {}
},
formData: {
select: undefined,
multiSelect: undefined,
radio: undefined,
birthday: undefined,
primeNumber: 9
}
};
},
renderValidateStyle(item) {
const formData = this.state.formData;
const status = this.state.status;
const classes = cx({
'error': status[item].errors,
'validating': status[item].isValidating,
'success': formData[item] && !status[item].errors && !status[item].isValidating
});
return classes;
},
handleReset(e) {
this.refs.validation.reset();
this.setState(this.getInitialState());
e.preventDefault();
},
handleSubmit(e) {
e.preventDefault();
this.setState({
isEmailOver: true
});
const validation = this.refs.validation;
validation.validate((valid) => {
if (!valid) {
console.log('error in form');
return;
} else {
console.log('submit');
}
console.log(this.state.formData);
});
},
checkBirthday(rule, value, callback) {
if (value && value.getTime() >= Date.now()){
callback(new Error('你不可能在未来出生吧!'));
} else {
callback();
}
},
checkPrime(rule, value, callback) {
if (value !== 11) {
callback(new Error('8~12之间的质数明明是11啊!'));
} else {
callback();
}
},
render() {
const formData = this.state.formData;
const status = this.state.status;
return (
<Form horizontal>
<Validation ref="validation" onValidate={this.handleValidate}>
<FormItem
label="国籍："
id="select"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('select')}
help={status.select.errors ? status.select.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您的国籍'}]}>
<Select size="large" placeholder="请选择国家" style={{width:"100%"}} name="select" value={formData.select}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
<Option value="japan">日本</Option>
<Option value="korean">韩国</Option>
<Option value="Thailand">泰国</Option>
</Select>
</Validator>
</FormItem>
<FormItem
label="喜欢的颜色："
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('multiSelect')}
help={status.multiSelect.errors ? status.multiSelect.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您喜欢的颜色', type: 'array'}]}>
<Select multiple size="large" placeholder="请选择颜色" style={{width:"100%"}} name="multiSelect" value={formData.multiSelect}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
<Option value="yellow">黄色</Option>
<Option value="green">绿色</Option>
<Option value="blue">蓝色</Option>
</Select>
</Validator>
</FormItem>
<FormItem
label="性别："
id="radio"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('radio')}
help={status.radio.errors ? status.radio.errors.join(',') : null}
required>
<Validator rules={[{required: true, message: '请选择您的性别'}]}>
<RadioGroup name="radio" value={formData.radio}>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
</RadioGroup>
</Validator>
</FormItem>
<FormItem
label="生日："
id="birthday"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('birthday')}
help={status.birthday.errors ? status.birthday.errors.join(',') : null}
required>
<Validator rules={[{
required: true,
type: 'date',
message: '你的生日是什么呢?'
}, {validator: this.checkBirthday}]}>
<Datepicker name="birthday" value={formData.birthday}></Datepicker>
</Validator>
</FormItem>
<FormItem
label="8~12间的质数："
id="primeNumber"
labelCol={{span: 7}}
wrapperCol={{span: 12}}
validateStatus={this.renderValidateStyle('primeNumber')}
help={status.primeNumber.errors ? status.primeNumber.errors.join(',') : null}
required>
<Validator rules={[{validator: this.checkPrime}]}>
<InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
</Validator>
</FormItem>
<FormItem
wrapperCol={{span: 12, offset: 7}} >
<Button type="primary" onClick={this.handleSubmit}>确定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重置</Button>
</FormItem>
</Validation>
</Form>
);
}
});
ReactDOM.render(<Demo />, document.getElementById('components-validation-demo-other-items'));
````