Vue EasyUI 表单

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

属性列表

名称	数据类型	作用描述	默认值
model	Object	表单数据。	null
rules	Object	验证规则。	null

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

事件列表

名称	参数	作用描述
validate	valid	验证字段时触发。

方法列表

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

• validate方法代码实例：

this.$refs.form.validate((valid) => {
    //...
})

• validateField方法代码实例：

this.$refs.form.validateField('addr', (valid) => {
    //...
})

注：
- 继承： None 。

使用方法：

• 配合使用其他组件（ TextBox 、 ComboBox 、 CheckBox ）快速自定义一个表单。

<Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
  <div style="margin-bottom:20px">
    <Label for="name" align="top">Name:</Label>
    <TextBox inputId="name" name="name" v-model="user.name"></TextBox>
    <div class="error">{{getError('name')}}</div>
  </div>
  <div style="margin-bottom:20px">
    <Label for="email" align="top">Email:</Label>
    <TextBox inputId="email" name="email" v-model="user.email"></TextBox>
    <div class="error">{{getError('email')}}</div>
  </div>
  <div style="margin-bottom:20px">
    <Label for="hero" align="top">Select a hero:</Label>
    <ComboBox inputId=hero name="hero" :data="heroes" v-model="user.hero"></ComboBox>
    <div class="error">{{getError('hero')}}</div>
  </div>
  <div style="margin-bottom:20px">
    <CheckBox inputId="accept" name="accept" v-model="user.accept"></CheckBox>
    <Label for="accept">Accept Me</Label>
  </div>
  <div style="margin-bottom:20px">
    <LinkButton :disabled="false" @click="submitForm()">Submit</LinkButton>
  </div>
</Form>