vue校验密码的三种写法
一、在el-form(element ui中的form表单)中使用:rules=“rules” 实现1.在项目的src/utils文件夹下创建validate.js文件validate.js文件中内容为:/*** @param value* 测试密码是否满足条件,包括四种类型*/export function validPassword(value) {const num = /^.*[0-9]+
·
一、在el-form(element ui中的form表单)中使用:rules=“rules” 实现
1.在项目的src/utils文件夹下创建validate.js文件
validate.js文件中内容为:
/**
* @param value
* 测试密码是否满足条件,包括四种类型
*/
export function validPassword(value) {
const num = /^.*[0-9]+.*/
const low = /^.*[a-z]+.*/
const up = /^.*[A-Z]+.*/
const spe = /^.*[^a-zA-Z0-9]+.*/
const passLength = value.length > 5 && value.length < 21
return num.test(value) && low.test(value) && up.test(value) && spe.test(value) && passLength
}
2.在需要校验密码的vue文件内import引入validate.js中的validPassword函数
import { validPassword } from '@/utils/validate'
3.在需要校验密码的vue文件中的data定义校验函数,调用validPassword 函数
const validatePassword = (rule, value, callback) => {
if (validPassword(value)) callback()
else callback(new Error('密码6-20位,必须包含大写字母,小写字母,数字及特殊字符'))
}
4.在需要校验密码的vue文件中的form表单中写:rules=“rules”
5.在rules中通过validator: validatePassword使用自定义校验规则
password: [
{ required: true, trigger: "blur",validator: validatePassword},
],
二、使用this.$prompt实现
/** 重置密码按钮操作 */
handleResetPwd(row) {
this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
inputPattern: /^.*(?=.{6,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@#$%^&*?\(\)]).*$/,
inputErrorMessage: "'密码6-20位,必须包含大写字母,小写字母,数字及特殊字符'",
}).then(({ value }) => {
resetUserPwd(row.userId, value).then(response => {
this.msgSuccess("修改成功,新密码是:" + value);
});
}).catch(() => {});
},
prompt() 弹出个输入框
三、a-input(ant-design-vue)中使用
前两步同一
<a-input
placeholder="请输入新密码"
type="password"
v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码!'},{
validator: validateToNextPassword,
},]}]" />
validateToNextPassword (rule, value, callback) {
if (validPassword(value)) callback()
else callback(new Error('密码8-20位,必须包含大写字母,小写字母,数字及特殊字符'))
}
更多推荐
已为社区贡献2条内容
所有评论(0)