React EasyUI 表單

2020-06-24 12:04 更新

表單( Form )提供多種方法來執(zhí)行帶有表單字段的動(dòng)作。 表單( Form )可調(diào)用validate方法以檢查表單是否有效。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
model Object 表單數(shù)據(jù)。 null
rules Object 驗(yàn)證規(guī)則。 null
delay number 延遲驗(yàn)證上次輸入值。 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."
        }
    }
}

事件列表

名稱 參數(shù) 作用描述
onValidate errors 驗(yàn)證字段時(shí)觸發(fā)。
onChange name,value 驗(yàn)證字段時(shí)觸發(fā)。
onSubmit event 提交表單時(shí)觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
validate none void 驗(yàn)證所有表單規(guī)則。
validateField name void 驗(yàn)證指定字段的規(guī)則。

注:
- 繼承: 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>
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)