mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 00:49:39 +08:00
333 lines
11 KiB
Markdown
333 lines
11 KiB
Markdown
# 基本
|
||
|
||
- order: 0
|
||
|
||
基本的表单校验例子。
|
||
|
||
每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。
|
||
|
||
表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。
|
||
|
||
---
|
||
|
||
````jsx
|
||
var Validation = antd.Validation;
|
||
var Validator = Validation.Validator;
|
||
var Select = antd.Select;
|
||
var Option = Select.Option;
|
||
var Radio = antd.Radio;
|
||
var RadioGroup = antd.Radio.Group;
|
||
var Button = antd.Button;
|
||
var Datepicker = antd.Datepicker;
|
||
var InputNumber = antd.InputNumber;
|
||
var Form = antd.Form;
|
||
|
||
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;
|
||
}
|
||
|
||
var Demo = React.createClass({
|
||
mixins: [Validation.FieldMixin],
|
||
|
||
getInitialState() {
|
||
return {
|
||
status: {
|
||
email: {},
|
||
name: {},
|
||
select: {},
|
||
radio: {},
|
||
passwd: {},
|
||
rePasswd: {},
|
||
textarea: {},
|
||
birthday: {},
|
||
primeNumber: {}
|
||
},
|
||
formData: {
|
||
email: undefined,
|
||
name: undefined,
|
||
select: undefined,
|
||
radio: undefined,
|
||
passwd: undefined,
|
||
rePasswd: undefined,
|
||
textarea: undefined,
|
||
birthday: undefined,
|
||
primeNumber: 9
|
||
},
|
||
isEmailOver: false, // email 是否输入完毕
|
||
emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法
|
||
};
|
||
},
|
||
|
||
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;
|
||
},
|
||
|
||
handleEmailInputBlur() {
|
||
this.setState({
|
||
isEmailOver: true
|
||
});
|
||
},
|
||
|
||
handleEmailInputFocus() {
|
||
if (this.state.isEmailOver) {
|
||
this.setState({
|
||
emailValidateMethod: 'onChange'
|
||
});
|
||
}
|
||
},
|
||
|
||
handleReset(e) {
|
||
this.refs.validation.reset();
|
||
this.setState(this.getInitialState());
|
||
e.preventDefault();
|
||
},
|
||
|
||
handleSubmit(e) {
|
||
e.preventDefault();
|
||
this.setState({
|
||
isEmailOver: true
|
||
});
|
||
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);
|
||
});
|
||
},
|
||
|
||
userExists(rule, value, callback) {
|
||
if (!value) {
|
||
callback();
|
||
} else {
|
||
setTimeout(function () {
|
||
if (value === 'JasonWood') {
|
||
callback([new Error('抱歉，该用户名已被占用。')]);
|
||
} else {
|
||
callback();
|
||
}
|
||
}, 800);
|
||
}
|
||
},
|
||
|
||
checkPass(rule, value, callback) {
|
||
if (this.state.formData.passwd) {
|
||
this.refs.validation.forceValidate(['rePasswd']);
|
||
}
|
||
|
||
callback();
|
||
},
|
||
|
||
checkPass2(rule, value, callback) {
|
||
if (value && value !== this.state.formData.passwd) {
|
||
callback('两次输入密码不一致！');
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
|
||
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() {
|
||
var formData = this.state.formData;
|
||
var status = this.state.status;
|
||
|
||
return (
|
||
<Form horizontal>
|
||
<Validation ref="validation" onValidate={this.handleValidate}>
|
||
<Form.Item
|
||
label="用户名："
|
||
id="name"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('name')}>
|
||
<Validator rules={[{required: true, min: 5, message: '用户名至少为 5 个字符'}, {validator: this.userExists}]}>
|
||
<Form.Input type="text" name="name" id="name" value={formData.name} placeholder="实时校验，输入 JasonWood 看看" />
|
||
</Validator>
|
||
{status.name.isValidating ? <div className="ant-form-explain">正在校验中...</div> : null}
|
||
{status.name.errors ? <div className="ant-form-explain">{status.name.errors.join(',')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="邮箱："
|
||
id="email"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('email', this.state.isEmailOver)}>
|
||
<Validator rules={[{required: true, type:'email', message: '请输入正确的邮箱地址'}]} trigger={this.state.emailValidateMethod}>
|
||
<Form.Input type="email" name="email" id="email" value={formData.email} placeholder="onBlur 与 onChange 相结合" onBlur={this.handleEmailInputBlur} onFocus={this.handleEmailInputFocus} />
|
||
</Validator>
|
||
{status.email.errors ? <div className="ant-form-explain">{status.email.errors.join(',')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="国籍："
|
||
id="select"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('select', false)}>
|
||
<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>
|
||
{status.select.errors ? <div className="ant-form-explain">{status.select.errors.join(',')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="性别："
|
||
id="radio"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('radio', false)}>
|
||
<Validator rules={[{required: true, message: '请选择您的性别'}]}>
|
||
<RadioGroup name="radio" value={formData.radio}>
|
||
<Radio value="male">男</Radio>
|
||
<Radio value="female">女</Radio>
|
||
</RadioGroup>
|
||
</Validator>
|
||
{status.radio.errors ? <div className="ant-form-explain">{status.radio.errors.join(',')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="密码："
|
||
id="password"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('passwd')}>
|
||
<Validator rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]}>
|
||
<Form.Input name="passwd" id="password" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.passwd}/>
|
||
</Validator>
|
||
{status.passwd.errors ? <div className="ant-form-explain">{status.passwd.errors.join(',')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="确认密码："
|
||
id="password2"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('rePasswd')}>
|
||
<Validator rules={[{
|
||
required: true,
|
||
whitespace: true,
|
||
message: '请再次输入密码'
|
||
}, {validator: this.checkPass2}]}>
|
||
<Form.Input name="rePasswd" id="password2" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.rePasswd} placeholder="两次输入密码保持一致"/>
|
||
</Validator>
|
||
{status.rePasswd.errors ? <div className="ant-form-explain"> {status.rePasswd.errors.join(', ')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="生日："
|
||
id="birthday"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('birthday', false)}>
|
||
<Validator rules={[{
|
||
required: true,
|
||
type: 'date',
|
||
message: '你的生日是什么呢?'
|
||
}, {validator: this.checkBirthday}]}>
|
||
<Datepicker name="birthday" value={formData.birthday}></Datepicker>
|
||
</Validator>
|
||
{status.birthday.errors ? <div className="ant-form-explain"> {status.birthday.errors.join(', ')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="8~12间的质数："
|
||
id="primeNumber"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('primeNumber', false)}>
|
||
<Validator rules={[{validator: this.checkPrime}]}>
|
||
<InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
|
||
</Validator>
|
||
{status.primeNumber.errors ? <div className="ant-form-explain"> {status.primeNumber.errors.join(', ')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="备注："
|
||
id="textarea"
|
||
labelClassName="col-7"
|
||
wrapperClassName="col-12"
|
||
required>
|
||
<div className={this.renderValidateStyle('textarea', false)}>
|
||
<Validator rules={[{required: true, message: '真的不打算写点什么吗？'}]}>
|
||
<Form.Input type="textarea" placeholder="随便写" id="textarea" name="textarea" value={formData.textarea} />
|
||
</Validator>
|
||
{status.textarea.errors ? <div className="ant-form-explain">{status.textarea.errors.join(',')}</div> : null}
|
||
</div>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
wrapperClassName="col-offset-7 col-12" >
|
||
<Button type="primary" onClick={this.handleSubmit}>确 定</Button>
|
||
|
||
<Button type="ghost" onClick={this.handleReset}>重 置</Button>
|
||
</Form.Item>
|
||
</Validation>
|
||
</Form>
|
||
);
|
||
}
|
||
});
|
||
|
||
ReactDOM.render(<Demo />, document.getElementById('components-validation-demo-basic'));
|
||
````
|