element form自定义校验 无法获取value
时间: 2023-08-21 15:03:38 浏览: 594
vue表单自定义校验规则介绍
element form自定义校验的时候,可以通过参数params获取当前校验的值。具体的实现方式可以参考以下代码示例:
```javascript
Vue.component('custom-input', {
template: `
<div>
<el-form-item label="Custom Input">
<el-input v-model="inputValue" :rules="[
{ validator: validateInput, trigger: 'blur' }
]"></el-input>
</el-form-item>
</div>
`,
data() {
return {
inputValue: ''
}
},
methods: {
validateInput(rule, value, callback) {
if (value === '') {
callback(new Error('Please input the value'));
} else if (value.length < 5) {
callback(new Error('The length of value should be at least 5'));
} else if (value !== this.inputValue) {
callback(new Error('The value is not matched'));
} else {
callback();
}
}
}
});
```
在上述代码中,我们定义了一个名为`custom-input`的组件,并且在该组件中使用了`element-ui`的`el-form-item`和`el-input`组件来实现一个自定义的输入框。在`el-input`组件的`rules`属性中,我们定义了一个名为`validateInput`的方法来进行校验。在该方法中,我们可以通过参数`value`获取当前的输入值,并且可以通过`this.inputValue`获取组件中存储的输入值。这样,在自定义校验的过程中,我们就可以获取到当前的输入值。
阅读全文