vue 怎样根据后端返回来制定检验规则 如后端返回0 则任意包含 特殊字符,大写字母,小写字母,数字一种即可,如后端返回1则需包含两种,如后端返回2则需要包含三种,如返回3则需要包含四种检验规则 并给出提示
时间: 2023-06-14 22:05:22 浏览: 81
vue的学习代码-vue的指令部分 如 vue-if、vue-for、vue-model、vue-bind...
在 Vue 中,可以使用自定义校验规则来实现根据后端返回值制定校验规则的功能。
首先,需要在表单项中添加一个自定义校验函数,代码类似如下:
```html
<el-form-item label="密码">
<el-input type="password" v-model="password" :rules="[{ validator: validatePassword, trigger: 'blur' }]"></el-input>
</el-form-item>
```
其中,`:rules` 属性绑定了一个数组,数组中包含了一个校验函数 `validatePassword` 和触发校验的事件 `trigger`。
然后,实现 `validatePassword` 函数,代码类似如下:
```javascript
validatePassword(rule, value, callback) {
const level = this.passwordLevel // 后端返回的密码强度等级
let pattern, message
switch (level) {
case 0:
pattern = /^.*$/ // 任意字符
message = '密码强度较弱,请包含特殊字符、大写字母、小写字母、数字中的一种或多种'
break
case 1:
pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]*$/ // 至少包含两种字符
message = '密码强度一般,请包含特殊字符、大写字母、小写字母、数字中的两种或多种'
break
case 2:
pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]*$/ // 至少包含三种字符
message = '密码强度较强,请包含特殊字符、大写字母、小写字母、数字中的三种或多种'
break
case 3:
pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]*$/ // 包含四种字符
message = '密码强度很高,请保持'
break
default:
pattern = /^.*$/ // 默认任意字符
message = '密码强度未知'
break
}
if (!pattern.test(value)) {
callback(new Error(message))
} else {
callback()
}
}
```
在 `validatePassword` 函数中,根据后端返回的密码强度等级 `level` 制定不同的校验规则,然后使用正则表达式 `pattern` 进行校验,并根据校验结果调用 `callback` 函数返回校验结果和提示信息。
注意,需要在 Vue 组件中定义一个 `passwordLevel` 变量,用于存储后端返回的密码强度等级。
```javascript
data() {
return {
password: '',
passwordLevel: 0 // 后端返回的密码强度等级
}
}
```
这样就能实现根据后端返回值制定校验规则的功能了。
阅读全文