React EasyUI 表单

表单（ Form ）提供多种方法来执行带有表单字段的动作。表单（ Form ）可调用validate方法以检查表单是否有效。

属性列表

名称	数据类型	作用描述	默认值
model	Object	表单数据。	null
rules	Object	验证规则。	null
delay	number	延迟验证上次输入值。	200

rules 属性代码示例：

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."
        }
    }
}

事件列表

名称	参数	作用描述
onValidate	errors	验证字段时触发。
onChange	name,value	验证字段时触发。
onSubmit	event	提交表单时触发。

方法列表

名称	参数	返回值	作用描述
validate	none	void	验证所有表单规则。
validateField	name	void	验证指定字段的规则。

注：
- 继承： 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>