在Element UI中，可以通过rules属性定义表单验证规则，并通过ref属性引用特定表单实例来触发验证。以下是一个创建自定义金额规则和必填验证的示例：
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="金额" prop="amount">
<el-input v-model.number="form.amount"></el-input>
</el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
amount: ''
},
rules: {
amount: [
{ required: true, message: '金额不能为空', trigger: 'blur' },
{ validator: this.validateAmount, trigger: 'blur' }
]
}
};
},
methods: {
validateAmount(rule, value, callback) {
if (!value) {
return callback(new Error('金额不能为空'));
}
if (!Number.isFinite(value)) {
return callback(new Error('请输入有效的数字值'));
}
if (value < 0) {
return callback(new Error('金额不能为负数'));
}
callback();
},
submitForm() {
this.$refs.formRef.validate(valid => {
if (valid) {
alert('提交成功');
} else {
console.log('表单验证失败');
return false;
}
});
}
}
};
</script>在这个例子中，我们定义了一个form对象，它有一个amount属性用于存储金额。rules对象定义了一个验证规则数组，用于amount字段。第一条规则是必填验证，第二条规则是自定义的金额验证规则。自定义规则validateAmount函数用于检查金额的有效性，例如它是否为零或负数，或者是否为一个有限数字。
提交表单时，调用this.$refs.formRef.validate方法触发表单验证，如果验证通过，则可以执行提交操作；如果验证失败，则不会执行提交操作。