下面是一个简单的示例,该示例要求密码必须同时包含大写字母、小写字母、数字和特殊字符,并且长度至少为8位:
<template>
<el-form ref="form" :rules="rules">
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" show-password></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
password: ''
},
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
if (regex.test(value)) {
callback()
} else {
callback(new Error('密码必须同时包含大写字母、小写字母、数字和特殊字符,长度至少为8位'))
}
},
trigger: 'blur'
}
]
}
}
}
}
</script>
在上面的示例中,rules 对象包含了一个名为 password 的验证规则数组,该规则要求密码字段必须为非空,并且必须符合正则表达式 /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@!%*?&]{8,}$/,该正则表达式要求密码必须同时包含大写字母、小写字母、数字和特殊字符,长度至少为8位。如果密码不符合该规则,则会显示一个错误消息。