继承
none
用法
<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>
属性
名称 | 类型 | 描述 | 默认 |
---|---|---|---|
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 |
方法
名称 | 参数 | 返回值 | 描述 |
---|---|---|---|
validate | none | void |
验证所有表单规则。
代码实例: this.$refs.form.validate((valid) => { //... }) |
validateField | 名称 | void |
验证指定字段的规则。
代码实例: this.$refs.form.validateField('addr', (valid) => { //... }) |
事件
名称 | 参数 | 描述 |
---|---|---|
validate | valid | 验证字段时触发 |