element ui表单校验字数
时间: 2023-10-24 20:08:25 浏览: 92
Element UI 表单校验字数可以使用自定义校验规则来实现。下面是一个示例代码:
```javascript
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="内容" prop="content" :rules="[
{ required: true, message: '内容不能为空', trigger: 'blur' },
{ validator: validateContent, trigger: 'blur' }
]">
<el-input v-model="form.content" placeholder="请输入内容"></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: {
content: ''
}
}
},
methods: {
validateContent(rule, value, callback) {
if (value && value.length > 10) {
callback(new Error('内容不能超过10个字'))
} else {
callback()
}
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单校验通过,执行提交操作
// ...
} else {
// 表单校验不通过,提示错误信息
return false
}
})
}
}
}
</script>
```
上面的代码中,我们定义了一个表单项 `content`,并设置了两个校验规则。第一个规则是必填规则,当用户未输入内容时会提示 "内容不能为空" 的错误信息。第二个规则是自定义校验规则 `validateContent`,当用户输入的内容超过 10 个字时会提示 "内容不能超过10个字" 的错误信息。
阅读全文