vue rules表单验证 有文字 还是校验失败
时间: 2024-11-11 07:22:54 浏览: 29
Vue.js 中的 `v-model` 和 `v-bind:class` 结合可以用于实现表单字段的规则验证。当你在 HTML 表单上使用 `v-model` 绑定输入值,并在模板中设置 `v-bind:class` 根据验证结果动态添加或移除 CSS 类名,就可以实现验证状态的展示。
例如,如果你有一个必填项,你可以这样编写:
```html
<input v-model="form.field" :class="{ 'is-invalid': !form.field }">
```
这里,`is-invalid` 类会在用户未输入内容时添加,表示校验失败。如果 `form.field` 为空,则 `!form.field` 为真,显示错误状态。
对于包含文本提示的验证,你可以使用自定义指令(custom directive),比如 `required`:
```javascript
Vue.directive('required', {
bind(el, binding, vnode) {
el.addEventListener('input', function (e) {
if (!this.value) {
el.classList.add('is-required');
vnode.context.$emit('invalid', 'Please enter some text.');
} else {
el.classList.remove('is-required');
}
});
},
update(value) {
// 更新时检查是否仍需显示错误
},
unbind() {
// 移除事件监听
}
})
```
然后在模板中使用:
```html
<input type="text" v-model="form.field" required>
<span v-if="$emit('invalid') && $emit('invalid').message">{{ $emit('invalid').message }}</span>
```
当验证失败时,`invalid` 事件会被触发,并传递错误信息。
阅读全文