Ant Design
Validation 表单校验
表单校验。
何时使用
同表单结合使用，对表单域进行校验，提供前台校验和后台实时反馈校验，并对表单错误提供有效信息提示。
组件演示
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;
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 Form = React.createClass({
mixins: [Validation.FieldMixin],
getInitialState() {
return {
status: {
email: {},
name: {},
select: {},
radio: {},
passwd: {},
rePasswd: {},
textarea: {}
},
formData: {
email: undefined,
name: undefined,
select: undefined,
radio: undefined,
passwd: undefined,
rePasswd: undefined,
textarea: undefined
},
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();
}
},
render() {
var formData = this.state.formData;
var status = this.state.status;
return (
<form onSubmit={this.handleSubmit} className="ant-form-horizontal">
<Validation ref="validation" onValidate={this.handleValidate}>
<div className="ant-form-item">
<label className="col-7" htmlFor="name" required>用户名：</label>
<div className="col-12">
<div className={this.renderValidateStyle('name')}>
<Validator rules={[{required: true, min: 5, message: '用户名至少为 5 个字符'}, {validator: this.userExists}]}>
<input name="name" id="name" className="ant-input" 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>
</div>
</div>
<div className="ant-form-item">
<label className="col-7" htmlFor="email" required>邮箱：</label>
<div className="col-12">
<div className={this.renderValidateStyle('email', this.state.isEmailOver)}>
<Validator rules={[{required: true, type:'email', message: '请输入正确的邮箱地址'}]} trigger={this.state.emailValidateMethod}>
<input name="email" id="email" className="ant-input" 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>
</div>
</div>
<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: '请选择您的国籍'}]}>
<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>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<label className="col-7" required>性别：</label>
<div className="col-12">
<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>
</div>
</div>
<div className="ant-form-item">
<label className="col-7" htmlFor="password" required>密码：</label>
<div className="col-12">
<div className={this.renderValidateStyle('passwd')}>
<Validator rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]}>
<input name="passwd" id="password" className="ant-input" 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>
</div>
</div>
<div className="ant-form-item">
<label className="col-7" htmlFor="password2" required>确认密码：</label>
<div className="col-12">
<div className={this.renderValidateStyle('rePasswd')}>
<Validator rules={[{
required: true,
whitespace: true,
message: '请再次输入密码'
}, {validator: this.checkPass2}]}>
<input name="rePasswd" id="password2" className="ant-input" 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>
</div>
</div>
<div className="ant-form-item">
<label className="col-7" htmlFor="remark" required>备注：</label>
<div className="col-12">
<div className={this.renderValidateStyle('textarea', false)}>
<Validator rules={[{required: true, message: '真的不打算写点什么吗？'}]}>
<textarea className="ant-input" id="remark" name="textarea" value={formData.textarea} placeholder="写点什么吧">
</textarea>
</Validator>
{status.textarea.errors ? <div className="ant-form-explain">{status.textarea.errors.join(',')}</div> : null}
</div>
</div>
</div>
<div className="ant-form-item">
<div className="col-offset-7 col-12">
<button type="submit" className="ant-btn ant-btn-primary">确 定</button>
<a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
</div>
</div>
</Validation>
</form>
);
}
});
React.render(<Form />, document.getElementById('components-validation-demo-basic'));var Validation = antd.Validation;
var Validator = Validation.Validator;
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 Form = React.createClass({
mixins: [Validation.FieldMixin],
getInitialState() {
return {
status: {
pass: {},
rePass: {}
},
formData: {
pass: undefined,
rePass: undefined
},
passBarShow: false, // 是否显示密码强度提示条
rePassBarShow: false,
passStrength: 'L', // 密码强度
rePassStrength: 'L'
};
},
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;
},
getPassStrenth(value, type) {
if (value) {
var strength;
// 密码强度的校验规则自定义，这里只是做个简单的示例
if (value.length < 6) {
strength = 'L';
} else if (value.length <= 9) {
strength = 'M';
} else {
strength = 'H';
}
type === 'pass' ? this.setState({ passBarShow: true, passStrength: strength }) : this.setState({ rePassBarShow: true, rePassStrength: strength });
} else {
type === 'pass' ? this.setState({ passBarShow: false }) : this.setState({ rePassBarShow: false });
}
},
checkPass(rule, value, callback) {
this.getPassStrenth(value, 'pass');
if (this.state.formData.pass) {
this.refs.validation.forceValidate(['rePass']);
}
callback();
},
checkPass2(rule, value, callback) {
this.getPassStrenth(value, 'rePass');
if (value && value !== this.state.formData.pass) {
callback('两次输入密码不一致！');
} else {
callback();
}
},
renderPassStrengthBar(type) {
var strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength;
var classSet = cx({
'ant-pwd-strength': true,
'ant-pwd-strength-low': strength === 'L',
'ant-pwd-strength-medium': strength === 'M',
'ant-pwd-strength-high': strength === 'H'
});
var level = {
L: '低',
M: '中',
H: '高'
};
return (
<div>
<ul className={classSet}>
<li className="ant-pwd-strength-item ant-pwd-strength-item-1"></li>
<li className="ant-pwd-strength-item ant-pwd-strength-item-2"></li>
<li className="ant-pwd-strength-item ant-pwd-strength-item-3"></li>
<span className="ant-form-text">
{level[strength]}
</span>
</ul>
</div>
);
},
render() {
var formData = this.state.formData;
var status = this.state.status;
return (
<form onSubmit={this.handleSubmit} className="ant-form-horizontal">
<Validation ref="validation" onValidate={this.handleValidate}>
<div className="ant-form-item">
<label className="col-6" htmlFor="confirmPass" required>密码：</label>
<div className="col-10">
<div className={this.renderValidateStyle('pass', false)}>
<Validator rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]} trigger="onChange">
<input name="pass" id="confirmPass" className="ant-input" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.pass}/>
</Validator>
{status.pass.errors ? <div className="ant-form-explain">{status.pass.errors.join(',')}</div> : null}
</div>
</div>
<div className="col-6">
{this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
</div>
</div>
<div className="ant-form-item">
<label className="col-6" htmlFor="confirmPass2" required>确认密码：</label>
<div className="col-10">
<div className={this.renderValidateStyle('rePass', false)}>
<Validator rules={[{
required: true,
whitespace: true,
message: '请再次输入密码'
}, {validator: this.checkPass2}]}>
<input name="rePass" id="confirmPass2" className="ant-input" type="password" onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} autocomplete="off" value={formData.rePass}/>
</Validator>
{status.rePass.errors ? <div className="ant-form-explain"> {status.rePass.errors.join(', ')}</div> : null}
</div>
</div>
<div className="col-6">
{this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
</div>
</div>
<div className="ant-form-item">
<div className="col-offset-6 col-12">
<button type="submit" className="ant-btn ant-btn-primary">确 定</button>
<a href="#" className="ant-btn" onClick={this.handleReset}>重 置</a>
</div>
</div>
</Validation>
</form>
);
}
});
React.render(<Form />, document.getElementById('components-validation-demo-customize'));API
<Validation>
<Validator>
<CustomComponent>
<input />
</CustomComponent>
</Validator>
</Validation>Validation
| 属性 | 类型 | 说明 |
|---|---|---|
| onValidate | func | 当内部 Validator 开始校验时被调用。 |
| 方法 | 说明 |
|---|---|
| validate(callback) | 对所有表单域进行校验。 |
| reset() | 将表单域的值恢复为初始值。 |
| forceValidate(fields, callback) | 对指定的表单域进行校验，fields 对应每个 Validator 包裹的表单域的 name 属性值。 |
Validation.Validator
一个 Validator 对应一个表单域，校验的表单域需要声明 name 属性作为校验标识，如 <input name="username" />。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| rules | array 或者 object | 支持多规则校验，默认提供的规则详见 async-validator，同时支持用户自定义校验规则。 | |
| trigger | String | onChange | 设定如何触发校验动作。 |
rules 说明（async-validator）
示例： {type: "string", required: true, min: 5, message: "请至少填写 5 个字符。" }
type: 声明校验的值类型（如 string email），这样就会使用默认提供的规则进行校验，更多详见 type；required: 是否必填；pattern: 声明校验正则表达式；min/max: 最小值、最大值声明（对于 string 和 array 来说，针对的是其长度 length。）；len: 字符长度；enum: 枚举值，对应 type 值为enum，例如role: {type: "enum", enum: ['A', 'B', 'C']}；whitespace: 是否允许空格，true为允许；fields: 当你需要对类型为 object 或者 array 的每个值做校验时使用，详见 fields；transform: 当你需要在校验前对值做一些处理的时候；message: 自定义提示信息，更多；validator: 自定义校验规则。