el-form 校验字符长度
时间: 2023-07-06 19:03:34 浏览: 89
可以使用 `rules` 属性来对输入框进行校验,其中通过 `validator` 函数自定义校验规则。在 `validator` 函数中,可以使用 `string.length` 获取输入框中字符的长度,然后判断其是否符合要求。
例如,要求输入框中的字符长度必须在 2 到 10 之间:
```html
<template>
<el-form ref="form" :model="formData" :rules="rules">
<el-form-item label="输入框">
<el-input v-model="formData.input"></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 {
formData: {
input: ''
},
rules: {
input: [
{ validator: this.validateInput, trigger: 'blur' }
]
}
}
},
methods: {
validateInput(rule, value, callback) {
const length = value.length;
if (length >= 2 && length <= 10) {
callback();
} else {
callback(new Error('字符长度必须在2到10之间'));
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 校验通过,执行提交操作
}
});
}
}
}
</script>
```
在上面的代码中,`validateInput` 函数用于校验输入框中的字符长度,如果长度符合要求,则通过调用 `callback()` 来通知校验通过,否则通过调用 `callback(new Error('错误信息'))` 来通知校验失败,并提示错误信息。在 `rules` 属性中,将 `validator` 属性设置为 `validateInput` 函数,表示使用该函数进行校验。在点击提交按钮时,通过调用 `this.$refs.form.validate()` 方法来触发表单的校验操作。如果所有的校验规则都通过,则回调函数中的 `valid` 参数为 `true`,表示校验通过,可以执行提交操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)