vue 怎样根据后端返回来制定检验规则 如后端返回0 则只能包含特殊字符,大写字母,小写字母,数字一种即可,如后端返回1则只能两种,如后端返回2则必须只能三种,如返回3则必须包含四种检验规则 并给出提示
时间: 2023-06-14 17:04:34 浏览: 84
你可以使用 Vue 的自定义指令来实现这个功能。首先,在组件中定义一个名为 `v-validate` 的自定义指令,如下所示:
```javascript
Vue.directive('validate', {
bind: function (el, binding) {
let value = binding.value
if (value === 0) {
el.setAttribute('pattern', '^[a-zA-Z0-9~!@#$%^&*()_+`\\-={}|\\[\\]\\\\;\':",./<>?]*$')
el.setAttribute('title', '只能包含特殊字符,大写字母,小写字母,数字一种')
} else if (value === 1) {
el.setAttribute('pattern', '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d~!@#$%^&*()_+`\\-={}|\\[\\]\\\\;\':",./<>?]*$')
el.setAttribute('title', '只能包含特殊字符,大写字母,小写字母,数字两种')
} else if (value === 2) {
el.setAttribute('pattern', '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[~!@#$%^&*()_+`\\-={}|\\[\\]\\\\;\':",./<>?])[a-zA-Z\\d~!@#$%^&*()_+`\\-={}|\\[\\]\\\\;\':",./<>?]*$')
el.setAttribute('title', '必须只能包含特殊字符,大写字母,小写字母,数字三种')
} else if (value === 3) {
el.setAttribute('pattern', '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[~!@#$%^&*()_+`\\-={}|\\[\\]\\\\;\':",./<>?])[a-zA-Z\\d~!@#$%^&*()_+`\\-={}|\\[\\]\\\\;\':",./<>?]{8,}$')
el.setAttribute('title', '必须包含特殊字符,大写字母,小写字母,数字四种')
}
}
})
```
然后,在需要进行检验的表单元素上使用 `v-validate` 指令,并传入后端返回的检验规则值,如下所示:
```html
<template>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-validate="validateRule">
</div>
</template>
<script>
export default {
data() {
return {
validateRule: 2 // 后端返回的检验规则值
}
}
}
</script>
```
这样,当 `validateRule` 的值发生变化时,`v-validate` 指令会根据后端返回的检验规则值来设置相应的检验规则和提示信息。当用户在表单元素中输入时,如果不符合检验规则,就会显示相应的提示信息。
阅读全文