用element ui 帮我写一个vue表单验证,第一行和第二行是下拉框,第三行是数字输入框并且只能是0以上的数字
时间: 2023-12-06 17:44:25 浏览: 78
使用element-ui +Vue 解决 table 里包含表单验证的问题
好的,以下是一个基本的表单验证示例,使用了 Element UI 和 Vue.js:
```vue
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="下拉框1" prop="select1">
<el-select v-model="form.select1" placeholder="请选择">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="下拉框2" prop="select2">
<el-select v-model="form.select2" placeholder="请选择">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数字输入框" prop="number">
<el-input v-model.number="form.number" type="number" min="0"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
select1: '',
select2: '',
number: ''
},
rules: {
select1: [{ required: true, message: '请选择下拉框1', trigger: 'change' }],
select2: [{ required: true, message: '请选择下拉框2', trigger: 'change' }],
number: [
{ required: true, message: '请输入数字', trigger: 'blur' },
{ validator: this.validateNumber, trigger: 'blur' }
]
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,提交数据
console.log(this.form);
} else {
// 表单验证失败
return false;
}
});
},
validateNumber(rule, value, callback) {
if (!Number.isInteger(Number(value))) {
callback(new Error('请输入整数'));
} else if (value < 0) {
callback(new Error('请输入0或更大的数字'));
} else {
callback();
}
}
}
};
</script>
```
在上面的示例中,我们使用了 `<el-form>` 组件来创建表单,每个表单项都是一个 `<el-form-item>`,并且设置了 `prop` 属性来指定该表单项对应的数据属性名。同时,我们还为每个表单项设置了验证规则,使用了 `rules` 属性来指定。在规则中,我们使用了 `required` 规则来指定必填项,并设置了相应的提示信息。对于数字输入框,我们还使用了自定义的验证方法 `validateNumber` 来验证输入值是否为非负整数。在 `submitForm` 方法中,我们使用了 `$refs.form.validate` 方法来验证表单,如果验证通过,则提交表单数据。
阅读全文