不对是在校验输入文本中必须有total"、"gap" 和 "haven" 这三个字段
时间: 2023-07-21 21:04:44 浏览: 43
如果你想要校验输入文本中是否包含特定的字段("total"、"gap"和"haven"),你可以使用自定义校验器来实现。下面是一个示例代码:
```html
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item prop="inputText" label="输入文本">
<el-input v-model="form.inputText"></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: {
inputText: ''
},
rules: {
inputText: [
{ required: true, message: '请输入文本', trigger: 'blur' },
{ validator: this.validateInputText, trigger: 'blur' }
]
}
};
},
methods: {
validateInputText(rule, value, callback) {
if (value.includes('total') && value.includes('gap') && value.includes('haven')) {
callback();
} else {
callback(new Error('输入文本必须包含 "total"、"gap" 和 "haven" 字段'));
}
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单校验通过,执行提交操作
console.log('表单校验通过');
} else {
// 表单校验不通过
console.log('表单校验不通过');
}
});
}
}
};
</script>
```
在上面的示例中,我们定义了一个表单对象 `form`,其中包含一个 `inputText` 属性来存储输入的文本。然后,我们定义了校验规则 `rules`,其中 `inputText` 属性的校验规则包括必填规则和自定义的校验器规则。
在 `validateInputText` 方法中,我们使用自定义的校验器来判断输入文本是否包含 "total"、"gap" 和 "haven" 字段。如果输入文本包含这三个字段,就调用 `callback()` 方法表示校验通过;否则,调用 `callback(new Error('输入文本必须包含 "total"、"gap" 和 "haven" 字段'))` 方法表示校验不通过。
最后,在 `submitForm` 方法中,我们通过 `$refs.form.validate()` 方法对整个表单进行校验。如果表单校验通过,就可以执行提交操作;否则,可以进行相应的错误处理。
希望这个例子能够满足你的需求!如果有任何问题,请随时提问。