el-form的rules写非空校验
时间: 2024-01-11 16:05:45 浏览: 114
基于element-ui对话框el-dialog初始化的校验问题解决
5星 · 资源好评率100%
el-form的rules可以用来进行表单校验,包括非空校验。下面是一个示例,演示了如何在el-form中使用rules进行非空校验:
```html
<template>
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input-number v-model="form.age"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: null
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单校验通过,可以进行提交操作
// ...
} else {
// 表单校验不通过,需要处理错误信息
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
</script>
```
在上面的示例中,我们定义了一个包含name和age字段的表单。对于name字段,我们使用了非空校验规则,当输入框失去焦点时会进行校验。对于age字段,同样使用了非空校验规则。在提交表单时,我们调用`validate`方法进行校验,如果通过校验,则可以进行提交操作;如果校验不通过,则需要处理错误信息。
需要注意的是,el-form的rules是一个对象,对象的属性名对应表单字段名,属性值是一个数组,包含了校验规则。每个校验规则是一个对象,可以包含多个属性,例如`required`表示是否必填,`message`表示错误提示信息,`trigger`表示触发校验的方式(这里使用了blur,即失去焦点时触发校验)。
希望以上内容能对你有所帮助!如果还有其他问题,请继续提问。
阅读全文