diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md
new file mode 100644
index 0000000000..271534b8d2
--- /dev/null
+++ b/components/validation/demo/basic.md
@@ -0,0 +1,240 @@
+# 基本
+
+- 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.RadioGroup;
+
+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: {
+ email: {},
+ name: {},
+ select: {},
+ radio: {},
+ passwd: {},
+ rePasswd: {},
+ textarea: {}
+ },
+ formData: {
+ email: undefined,
+ name: undefined,
+ select: undefined,
+ radio: undefined,
+ passwd: undefined,
+ rePasswd: undefined,
+ textarea: undefined
+ }
+ };
+ },
+
+ validateStyle(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;
+ },
+
+ handleReset(e) {
+ this.refs.validation.reset();
+ this.setState(this.getInitialState());
+ e.preventDefault();
+ },
+
+ 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);
+ });
+ },
+
+ userExists(rule, value, callback) {
+ if (!value) {
+ callback();
+ } else {
+ setTimeout(function () {
+ if (value === 'yiminghe') {
+ callback([new Error('抱歉，该用户名已被占用。')]);
+ } else {
+ callback();
+ }
+ }, 1000);
+ }
+ },
+
+ checkPass(rule, value, callback) {
+ if (this.state.formData.passwd) {
+ this.refs.validation.forceValidate(['rePasswd']);
+ }
+ callback();
+ },
+
+ checkPass2(rule, value, callback) {
+ if (value !== this.state.formData.passwd) {
+ callback('两次输入密码不一致！');
+ } else {
+ callback();
+ }
+ },
+
+ render() {
+ var formData = this.state.formData;
+ var status = this.state.status;
+
+ return (
+
+ );
+ }
+});
+
+React.render(
, document.getElementById('components-validation-demo-basic'));
+````
diff --git a/components/validation/demo/customize.md b/components/validation/demo/customize.md
new file mode 100644
index 0000000000..be71cf5ce7
--- /dev/null
+++ b/components/validation/demo/customize.md
@@ -0,0 +1,249 @@
+# 自定义校验规则
+
+- order: 1
+
+密码校验实例。
+
+---
+
+````jsx
+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, ' ');
+ }
+}
+
+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 (
+
+
+
+
+
+
+ {level[strength]}
+
+
+
+ );
+ },
+
+ render() {
+ var formData = this.state.formData;
+ var status = this.state.status;
+
+ return (
+
+ );
+ }
+});
+
+React.render(
, document.getElementById('components-validation-demo-customize'));
+````
+
+
diff --git a/components/validation/index.jsx b/components/validation/index.jsx
new file mode 100644
index 0000000000..00589d9285
--- /dev/null
+++ b/components/validation/index.jsx
@@ -0,0 +1,3 @@
+import Validation from 'rc-form-validation';
+
+export default Validation;
diff --git a/components/validation/index.md b/components/validation/index.md
new file mode 100644
index 0000000000..9fe0001496
--- /dev/null
+++ b/components/validation/index.md
@@ -0,0 +1,63 @@
+# Validation
+
+- category: Components
+- chinese: 表单校验
+- order: 19
+
+---
+
+表单校验。
+
+## 何时使用
+
+同表单结合使用，对表单域进行校验。
+
+## API
+
+```html
+
+
+
+
+
+
+```
+
+
+### Validation
+
+| 属性 | 类型 | 说明 |
+|-----------|---------------|--------------------|
+| onValidate | func | 当内部 Validator 开始校验时被调用。 |
+
+| 方法 | 说明 |
+|------------|----------------|
+| validate(callback) | 对所有表单域进行校验。 |
+| reset() | 将表单域的值恢复为初始值。 |
+| forceValidate(fields, callback) | 对指定的表单域进行校验，fields 对应每个 Validator 包裹的表单域的 name 属性值。|
+
+### Validation.Validator
+
+一个 Validator 对应一个表单域，校验的表单域需要声明 `name` 属性作为校验标识，如 `
`。
+
+| 属性 | 类型 | 默认值 | 说明 |
+|-----------|---------------|--------------------|
+| rules | array 或者 object | | 支持多规则校验，默认提供的规则详见 [async-validator](https://github.com/yiminghe/async-validator)，同时支持用户自定义校验规则。|
+| trigger | String | onChange | 设定如何触发校验动作。 |
+
+### rules 说明（[async-validator](https://github.com/yiminghe/async-validator)）
+
+示例： `{type: "string", required: true, min: 5, message: "请至少填写 5 个字符。" }`
+
+- `type` : 声明校验的值类型（如 string email），这样就会使用默认提供的规则进行校验，更多详见 [type](https://github.com/yiminghe/async-validator#user-content-type)；
+- `required`: 是否必填；
+- `pattern`: 声明校验正则表达式；
+- `min` / `max`: 最小值、最大值声明；
+- `len`: 字符长度；
+- `enum`: 枚举值，对应 type 值为 `enum`，例如 `role: {type: "enum", enum: ['A', 'B', 'C']}`；
+- `whitespace`: 是否允许空格， `true` 为允许；
+- `fields`: 当你需要对类型为 object 或者 array 的每个值做校验时使用，详见 [fields](https://github.com/yiminghe/async-validator#deep-rules)；
+- `transform`: 当你需要在校验前对值做一些处理的时候；
+- `message`: 自定义提示信息，[更多](https://github.com/yiminghe/async-validator#messages)；
+- `validator`: 自定义校验规则。
diff --git a/index.js b/index.js
index 400eb576af..0675ac188b 100644
--- a/index.js
+++ b/index.js
@@ -26,7 +26,8 @@ var antd = {
EnterAnimation: require('./components/enter-animation'),
Radio: require('./components/radio'),
RadioGroup: require('./components/radio/group'),
- Alert: require('./components/alert')
+ Alert: require('./components/alert'),
+ Validation: require('./components/validation')
};
module.exports = antd;
diff --git a/package.json b/package.json
index 907a006adc..761ce60f13 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
"rc-collapse": "~1.2.3",
"rc-dialog": "~4.4.0",
"rc-dropdown": "~1.1.1",
+ "rc-form-validation": "~2.4.7",
"rc-input-number": "~2.0.1",
"rc-menu": "~3.4.2",
"rc-notification": "~1.0.1",
diff --git a/style/components/form.less b/style/components/form.less
index 36e64e8fa4..2c08df511b 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -260,15 +260,88 @@ form {
}
// Validation state
+.has-success, .has-warning, .has-error, .is-validating {
+ &.has-feedback:after {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ font-family: "anticon" !important;
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ font-size: 14px;
+ }
+}
+
.has-success {
.form-control-validation(@success-color; @input-hover-border-color;);
.@{css-prefix}input {
border-color: @input-border-color;
+ box-shadow: none;
+ }
+
+ &.has-feedback:after {
+ content: '\e614';
+ color: @success-color;
}
}
+
.has-warning {
.form-control-validation(@warning-color; @warning-color;);
+
+ &.has-feedback:after {
+ content: '\e628';
+ color: @warning-color;
+ }
+
+ // ant-select
+ .@{selectPrefixCls} {
+ &-selection {
+ border-color: @warning-color;
+ box-shadow: 0 0 0 2px tint(@warning-color, 80%);
+ }
+ &-arrow {
+ color: @warning-color;
+ }
+ }
+
+ // ant-datepicker
+ .@{prefixCalendarClass}-picker-icon:after {
+ color: @warning-color;
+ }
}
+
.has-error {
.form-control-validation(@error-color; @error-color;);
+
+ &.has-feedback:after {
+ content: '\e628';
+ color: @error-color;
+ }
+
+ // ant-select
+ .@{selectPrefixCls} {
+ &-selection {
+ border-color: @error-color;
+ box-shadow: 0 0 0 2px tint(@error-color, 80%);
+ }
+
+ &-arrow {
+ color: @error-color;
+ }
+ }
+
+ // ant-datepicker
+ .@{prefixCalendarClass}-picker-icon:after {
+ color: @error-color;
+ }
+}
+
+.is-validating {
+ &.has-feedback:after {
+ display: inline-block;
+ .animation(loadingCircle 1s infinite linear);
+ content:"\e610";
+ }
}
diff --git a/style/mixins/form.less b/style/mixins/form.less
index bf9ffddade..edd5b36c97 100644
--- a/style/mixins/form.less
+++ b/style/mixins/form.less
@@ -5,10 +5,8 @@
// 输入框的不同校验状态
.@{css-prefix}input {
border-color: @border-color;
- &:focus {
- border-color: @border-color;
- box-shadow: 0 0 0 2px tint(@border-color, 80%);
- }
+ box-shadow: 0 0 0 2px tint(@border-color, 80%);
+
&:not([disabled]):hover {
border-color: @border-color;
}