from表单
<el-form ref="from" :model="password" :rules="rules" @submit.native.prevent label-width="80px">
<el-form-item required label="旧密码" prop="old">
<el-input type="password" v-model="password.old" placeholder="请输入旧密码"></el-input>
</el-form-item>
<el-form-item required label="新密码" prop="user">
<el-input type="password" v-model="password.user" placeholder="格式要求:长度大于7,包含下面三项:字母,数字,英文符号"></el-input>
</el-form-item>
<el-form-item required label="确认密码" prop="check">
<el-input type="password" v-model="password.check" placeholder="格式要求:长度大于7,包含下面三项:字母,数字,英文符号"></el-input>
</el-form-item>
</el-form>
结合正则表达式进行校验(包含全部的英文符号)
// 字母:
([A-Za-z]+)/
// 数字符号:
([\d]+)/
// 英文符号正则表达式:
// 分解版
[ ` , ~ , ! , @ , # , \\$ , % , \\^ , & , \\* , \\( , \\) , \- , _ , = , \\+ , \\{ , \\} , \\[ , \] , \\| , \\ , ; , ' , : , " , \\, , \\. , < , > , \\/ , \\?]+/
// 精简版
[`~!@#\\$%\\^&\\*\\(\\)\-_=\\+\\{\\}\\[\]\\|\\;':"\\,\\.<>\\/\\?]+/
export default {
data () {
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('密码不能为空'))
} else if (this.password.user && this.password.check && this.password.user !== this.password.check) {
callback(new Error('两次输入密码不一致!'))
} else {
// 字母
let alphabet = value.match(/([A-Za-z]+)/)
// 数字符号
let number = value.match(/([\d]+)/)
// 特殊字符(英文符号)
let special = value.match(/[`~!@#\\$%\\^&\\*\\(\\)\-_=\\+\\{\\}\\[\]\\|\\;':"\\,\\.<>\\/\\?]+/)
if (alphabet && number && special) {
callback()
} else {
callback(new Error('密码格式错误! (格式要求:长度大于7,包含下面三项:字母,数字,英文符号)'))
}
}
}
return {
password: {
old: '',
user: '',
check: ''
},
rules: {
old: [
{ required: true, message: '旧密码不能为空', trigger: 'blur' }
],
user: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
check: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
}
}
}
}