merge conflict index.js

This commit is contained in:
zhujun24 2015-08-03 15:22:04 +08:00
commit 0a79201536
11 changed files with 646 additions and 25 deletions

View File

@ -4,11 +4,11 @@
`<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`),并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/),可以实现 label 标签和表单控件的水平排列。
如需将一行静态文本和 `<label>` 标签置于同一行,则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
如需将一行静态文本和 `<label>` 标签置于同一行,则只需为标签添加 `.ant-form-text` 类即可。
`label` 标签添加 `required` 属性,表示该项必选。
**注意**对于表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的,其高度不同于一般的表单域,需要在 `.ant-form-item` 类后再加上 `.ant-form-item-compact`
**注意**在我们的设计里,表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的,其高度不同于一般的表单域,需要在 `.ant-form-item` 类后再加上 **`.ant-form-item-compact`**
---

View File

@ -4,8 +4,6 @@
带标签的输入框:使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。
输入框组合:`.ant-inputs` 类由多个 `.ant-inputs-item` 组成,使多个 Input 可以在一行显示出来。
---
````jsx
@ -68,7 +66,7 @@ React.render(
</div>
</div>
</div>
<div className="ant-form-item has-error">
<div className="ant-form-item">
<label className="col-6">电话号码:</label>
<div className="col-16">
<div className="row">
@ -92,7 +90,6 @@ React.render(
</div>
</div>
</div>
<p className="ant-form-explain">请输入正确的电话号码</p>
</div>
</div>
</form>

View File

@ -8,7 +8,7 @@
将以上三种校验状态类添加到这些控件的父级元素即可。
另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可。
另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可,在这里校验状态类就要和 `.has-feedback` 类同级
**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
@ -39,41 +39,37 @@
<div class="ant-form-item">
<label class="col-5" for="validating">校验中:</label>
<div class="col-12">
<div class="has-feedback">
<div class="has-feedback is-validating">
<input class="ant-input" type="text" id="validating" value="我是被校验的内容"/>
<i class="anticon anticon-loading"></i>
</div>
<div class="ant-form-explain">信息审核中...</div>
</div>
</div>
</div>
<div class="ant-form-item has-success">
<div class="ant-form-item">
<label class="col-5" for="input1">成功校验:</label>
<div class="col-12">
<div class="has-feedback">
<div class="has-feedback has-success">
<input class="ant-input" type="text" id="input1" value="我是正文"/>
<i class="anticon anticon-check-circle"></i>
</div>
</div>
</div>
<div class="ant-form-item has-error">
<div class="ant-form-item">
<label class="col-5" for="input2">失败校验:</label>
<div class="col-12">
<div class="has-feedback">
<div class="has-feedback has-error">
<input class="ant-input" type="text" id="input2" value="无效选择"/>
<i class="anticon anticon-cross-circle"></i>
</div>
<div class="ant-form-explain">请输入数字和字母组合</div>
</div>
</div>
</div>
<div class="ant-form-item has-warning">
<div class="ant-form-item">
<label class="col-5" for="input3">警告校验:</label>
<div class="col-12">
<div class="has-feedback">
<div class="has-feedback has-warning">
<input class="ant-input" type="text" id="input3" value="前方高能预警"/>
<i class="anticon anticon-exclamation-circle"></i>
</div>
</div>
</div>

View File

@ -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 (
<form onSubmit={this.handleSubmit} className="ant-form-horizontal">
<Validation ref='validation' onValidate={this.handleValidate}>
<div className="ant-form-item">
<label className="col-6" for="name" required>用户名:</label>
<div className="col-12">
<div className= {this.validateStyle("name")}>
<Validator rules={[{required: true, min: 5, message: '用户名至少为 5 个字符'}, {validator: this.userExists}]}>
<input name='name' className="ant-input" value={formData.name} />
</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-6" for="email" required>邮箱:</label>
<div className="col-12">
<div className= {this.validateStyle("email")}>
<Validator rules={{type: 'email', message: '请填写正确的邮箱地址'}} trigger="onBlur">
<input name='email' className="ant-input" value={formData.email} onChange={this.setField.bind(this, 'email')}/>
</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-6" required>国籍:</label>
<div className="col-12">
<div className= {this.validateStyle("select", false)}>
<Validator rules={[{required: true, message: '请选择您的国籍'}]}>
<Select style={{width:200}} 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-6" required>性别:</label>
<div className="col-12">
<div className= {this.validateStyle("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-6" required>密码:</label>
<div className="col-12">
<div className= {this.validateStyle("passwd", false)}>
<Validator trigger="onBlur" rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]}>
<input name='passwd' className="ant-input" type="password" 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-6" required>确认密码:</label>
<div className="col-12">
<div className= {this.validateStyle("rePasswd", false)}>
<Validator trigger="onBlur" rules={[{
required: true,
whitespace: true,
message: '请再次输入密码'
}, {validator: this.checkPass2}]}>
<input name='rePasswd' className="ant-input" type="password" value={formData.rePasswd}/>
</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-6" required>备注:</label>
<div className="col-12">
<div className= {this.validateStyle("textarea", false)}>
<Validator rules={[{required: true, message: '真的不打算写点什么吗'}]}>
<textarea className="ant-input" name="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-6 col-12">
<button type="submit" className="ant-btn ant-btn-primary">确 定</button>
&nbsp;&nbsp;&nbsp;
<a href='#' className="ant-btn" onClick={this.handleReset}>重 置</a>
</div>
</div>
</Validation>
</form>
);
}
});
React.render(<Form />, document.getElementById('components-validation-demo-basic'));
````

View File

@ -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 (
<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" 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' className="ant-input" type="password" 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" 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' className="ant-input" type="password" 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>
&nbsp;&nbsp;&nbsp;
<a href='#' className="ant-btn" onClick={this.handleReset}>重 置</a>
</div>
</div>
</Validation>
</form>
);
}
});
React.render(<Form />, document.getElementById('components-validation-demo-customize'));
````
<style>
.ant-pwd-strength {
display: inline-block;
margin-left: 8px;
line-height: 32px;
height: 32px;
vertical-align: middle;
}
.ant-pwd-strength-item {
float: left;
margin-right: 1px;
margin-top: 12px;
width: 19px;
height: 8px;
line-height: 8px;
list-style: none;
background-color: #f3f3f3;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ant-pwd-strength-item-1 {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.ant-pwd-strength-item-2 {
width: 20px;
}
.ant-pwd-strength-item-3 {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
margin-right: 8px;
}
.ant-pwd-strength-low .ant-pwd-strength-item-1, .ant-pwd-strength-medium .ant-pwd-strength-item-1, .ant-pwd-strength-high .ant-pwd-strength-item-1 {
background-color: #FAC450;
}
.ant-pwd-strength-medium .ant-pwd-strength-item-2, .ant-pwd-strength-high .ant-pwd-strength-item-2 {
background-color: rgba(135, 208, 104, .6);
}
.ant-pwd-strength-high .ant-pwd-strength-item-3 {
background-color: #87D068;
}
</style>

View File

@ -0,0 +1,3 @@
import Validation from 'rc-form-validation';
export default Validation;

View File

@ -0,0 +1,63 @@
# Validation
- category: Components
- chinese: 表单校验
- order: 19
---
表单校验。
## 何时使用
同表单结合使用,对表单域进行校验。
## API
```html
<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](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`: 自定义校验规则。

View File

@ -27,7 +27,8 @@ var antd = {
Radio: require('./components/radio'),
RadioGroup: require('./components/radio/group'),
Notification: require('./components/notification'),
Alert: require('./components/alert')
Alert: require('./components/alert'),
Validation: require('./components/validation')
};
module.exports = antd;

View File

@ -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.1.0",

View File

@ -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";
}
}

View File

@ -4,11 +4,9 @@
}
// 输入框的不同校验状态
.@{css-prefix}input {
border-color: @border-color;
&:focus {
border-color: @border-color;
box-shadow: 0 0 0 2px tint(@border-color, 80%);
}
&:not([disabled]):hover {
border-color: @border-color;
}