domainId: [{ required: true, message: "域不能为空", trigger: "blur" }],
时间: 2023-07-19 15:15:15 浏览: 160
这是一个基于 `element-ui` 的表单校验规则,其中包括了一个 `required` 规则,表示该字段必填,如果为空,就会显示错误信息 `"域不能为空"`,触发方式是 `blur`,即当该字段失去焦点时进行校验。
你可以将这个校验规则应用到你的表单中,例如:
```html
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="域" prop="domainId">
<el-select v-model="form.domainId" placeholder="请选择" @change="handleChange">
<el-option
v-for="item in domainList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
domainId: ''
},
domainList: [
{ id: 1, name: '域1' },
{ id: 2, name: '域2' },
{ id: 3, name: '域3' }
],
rules: {
domainId: [{ required: true, message: "域不能为空", trigger: "blur" }]
}
}
},
methods: {
handleChange() {
// 在该方法中可以手动触发校验
this.$refs.form.validateField('domainId');
}
}
}
</script>
```
在上面的代码中,`rules` 对象中的 `domainId` 属性就是用来校验域选择框的值的。当用户未选择任何域时,会显示错误信息 `"域不能为空"`。
需要注意的是,当用户选择域后,需要手动触发校验,可以在 `@change` 事件中调用 `validateField` 方法进行校验。
阅读全文