Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 b9bee331 编写于 作者: S SimaQ
浏览文件
操作

更新 validation demo.

上级 c2e56746
隐藏空白更改
内联 并排
Showing with 193 addition and 164 deletion
components/form/index.md
浏览文件 @ b9bee331
......@@ -46,7 +46,7 @@
### Form.ValueMixin
双向数据绑定，当表单控件的输入值改变时，更新 formData。
Mixin：当表单控件的输入值改变时，更新 formData。
**你需要为每个输入控件声明 `name` 属性**
......@@ -72,10 +72,10 @@
```html
<Form.Input
prefixCls={string} // 样式类名前缀，默认是 ant，通常您不需要设置。
type={string} // input 类型，保留原生 input 标签的 type 属性值，新增 static，详见例子。
type={string} // 【必须】声明 input 类型，保留原生 input 标签的 type 属性值，新增 static，详见例子。
value={any} // value 值 。
id={number|string} // id。
size={'large'|'small'} // 控件大小。
size={'large'|'default'|'small'} // 控件大小，默认值为 default。
defaultValue={any} // 设置初始默认值。
disabled={bool} // 是否禁用状态，默认为 false。
addonBefore={node} // 带标签的 input，设置前置标签。
......
components/validation/demo/basic.md
浏览文件 @ b9bee331
......@@ -20,6 +20,7 @@ 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') {
......@@ -35,7 +36,7 @@ function noop() {
return false;
}
var Form = React.createClass({
var Demo = React.createClass({
mixins: [Validation.FieldMixin],
getInitialState() {
......@@ -123,7 +124,7 @@ var Form = React.createClass({
callback();
} else {
setTimeout(function () {
if (value === 'Jasonwood') {
if (value === 'JasonWood') {
callback([new Error('抱歉，该用户名已被占用。')]);
} else {
callback();
......@@ -169,147 +170,163 @@ var Form = React.createClass({
var status = this.state.status;
return (
<form className="ant-form-horizontal">
<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>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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}/>
</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>
{status.passwd.errors ? <div className="ant-form-explain">{status.passwd.errors.join(',')}</div> : null}
</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>
</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>
</div>
<div className="ant-form-item">
<label className="col-7" htmlFor="birthday" required>生日：</label>
<div className="col-12">
<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="生日："
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>
</div>
<div className="ant-form-item">
<label className="col-7" htmlFor="birthday" required>8~12间的质数：</label>
<div className="col-12">
<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="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>
</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>
</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>
</div>
</Form.Item>
<div className="ant-form-item">
<div className="col-offset-7 col-12">
<Button type="primary" onClick={this.handleSubmit}>确 定</Button>
<Form.Item
wrapperClassName="col-offset-7 col-12" >
<Button type="primary" onClick={this.handleSubmit}>确 定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重 置</Button>
</div>
</div>
<Button type="ghost" onClick={this.handleReset}>重 置</Button>
</Form.Item>
</Validation>
</form>
</Form>
);
}
});
ReactDOM.render(<Form />, document.getElementById('components-validation-demo-basic'));
ReactDOM.render(<Demo />, document.getElementById('components-validation-demo-basic'));
````
components/validation/demo/customize.md
浏览文件 @ b9bee331
......@@ -12,6 +12,7 @@
var Validation = antd.Validation;
var Validator = Validation.Validator;
var Button = antd.Button;
var Form = antd.Form;
function cx(classNames) {
if (typeof classNames === 'object') {
......@@ -27,7 +28,7 @@ function noop() {
return false;
}
var Form = React.createClass({
var Demo = React.createClass({
mixins: [Validation.FieldMixin],
getInitialState() {
......@@ -151,57 +152,68 @@ var Form = React.createClass({
var status = this.state.status;
return (
<form className="ant-form-horizontal">
<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 className="row">
<div className="col-18">
<Form.Item
label="密码："
id="confirmPass"
labelClassName="col-6"
wrapperClassName="col-18"
required>
<div className={this.renderValidateStyle('pass', false)}>
<Validator rules={[{required: true, whitespace: true, message: '请填写密码'}, {validator: this.checkPass}]} trigger="onChange">
<Form.Input name="pass" id="confirmPass" 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>
</Form.Item>
</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 className="row">
<div className="col-18">
<Form.Item
label="确认密码："
id="confirmPass2"
labelClassName="col-6"
wrapperClassName="col-18"
required>
<div className={this.renderValidateStyle('rePass', false)}>
<Validator rules={[{
required: true,
whitespace: true,
message: '请再次输入密码'
}, {validator: this.checkPass2}]}>
<Form.Input name="rePass" id="confirmPass2" 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>
</Form.Item>
</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="primary" onClick={this.handleSubmit}>确 定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重 置</Button>
</div>
</div>
<Form.Item
wrapperClassName="col-offset-6 col-12"
required>
<Button type="primary" onClick={this.handleSubmit}>确 定</Button>
&nbsp;&nbsp;&nbsp;
<Button type="ghost" onClick={this.handleReset}>重 置</Button>
</Form.Item>
</Validation>
</form>
</Form>
);
}
});
ReactDOM.render(<Form />, document.getElementById('components-validation-demo-customize'));
ReactDOM.render(<Demo />, document.getElementById('components-validation-demo-customize'));
````
<style>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或