继承
LocaleBase
用法
<Form model={user} onChange={this.handleChange.bind(this)}>
<div style={{ marginBottom: '20px' }}>
<Label htmlFor="name" align="top">Name:</Label>
<TextBox inputId="name" name="name" value={user.name}></TextBox>
</div>
<div style={{ marginBottom: '20px' }}>
<Label htmlFor="email" align="top">Email:</Label>
<TextBox inputId="email" name="email" value={user.email}></TextBox>
</div>
<div style={{ marginBottom: '20px' }}>
<Label htmlFor="hero" align="top">Select a hero:</Label>
<ComboBox inputId="hero" data={heroes} name="hero" value={user.hero}></ComboBox>
</div>
<div style={{ marginBottom: '20px' }}>
<CheckBox inputId="accept" name="accept" checked={user.accept}></CheckBox>
<Label htmlFor="accept" style={{width:100}}>Accept Me</Label>
</div>
<div style={{ marginBottom: '20px' }}>
<LinkButton onClick={this.handleSubmit.bind(this)}>Submit</LinkButton>
</div>
</Form>
属性
名称 | 类型 | 描述 | 默认 |
---|---|---|---|
model | Object | 表单数据。 | null |
rules | Object |
表单验证规则
代码实例:
rules: { name: ["required", "length[5,10]"], email: "email", hero: "required", addr: { "required":true, "myrule":{ "validator": (value) => { if (...){ return true; } else { return Promise(resolve => { //... resolve(true); }); } }, "message": "my error message." } } } |
null |
delay | number | 延迟验证上次输入值。 | 200 |
方法
名称 | 参数 | 返回值 | 描述 |
---|---|---|---|
validate | none | void | 验证所有表单规则 |
validateField | name | void | 验证指定字段的规则。 |
事件
名称 | 参数 | 描述 |
---|---|---|
onChange | name,value | 验证字段时触发。 |
onValidate | errors | 验证字段时触发。 |
onSubmit | event | 提交表单时触发。 |