修改密码
- 所有密码规则校验(比如:6-20位,且必须包含字母和数字!)
- 新密码不能与原密码相同
- 确认密码必须与新密码一致
vue 部分
// template
<el-form ref="formData" :model="formData" :rules="formRules" label-width="100px">
<el-form-item label="原密码" prop="password"> <el-input v-model="formData.password" placeholder="请输入原密码" type="password" />
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="formData.newPassword" placeholder="新密码和原密码不能相同" type="password" />
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="formData.confirmPassword" placeholder="确认密码和新密码保持一致" type="password" />
</el-form-item>
</el-form>
// script
data () {
return {
formData: {
password: "",
newPassword: "",
confirmPassword: ""
},
formRules: {
password: [{
validator: (rule, value, callback) => {
this.$verify.password(value, callback, this.formData, this.$refs.formData);
},
trigger: "blur"
}],
newPassword: [{
validator: (rule, value, callback) => {
this.$verify.newPassword(value, callback, this.formData, this.$refs.formData);
},
trigger: "blur"
}],
confirmPassword: [{
validator: (rule, value, callback) => {
this.$verify.confirmPassword(value, callback, this.formData, this.$refs.formData);
},
trigger: "blur"
}]
}
};
}
自定义js部分
// /common/scripts/customValiate.js
/*
* @Descripttion: 自定义表单验证方法
* @param { $formData } <el-form :model="formData"></el-form>
* @return { $formEl } <el-form ref="formEl"></el-form>
* @Author: yeming
* @Date: 2018-06-05 15:51:42
*/
import Vue from 'vue';
const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
const errorText = "6-20位,且必须包含字母和数字!";
const customValiate = {
install (Vue) {
Vue.prototype.$verify = {
password: (value, callback, $formData, $formEl) => {
if (value) {
value = value.trim();
if (!regex.test(value)) {
return callback(new Error(errorText));
} else {
return callback();
}
} else { // 不能为空
return callback(new Error(errorText));
}
},
newPassword: (value, callback, $formData, $formEl) => {
if (value) {
value = value.trim();
if (!regex.test(value)) {
return callback(new Error(errorText));
} else if ($formData.password === $formData.newPassword) {
return callback(new Error("新密码与原密码相同!"));
} else {
return callback();
}
} else {
return callback(new Error(errorText));
}
},
confirmPassword: (value, callback, $formData, $formEl) => {
if (value) {
value = value.trim();
if (!regex.test(value)) {
return callback(new Error(errorText));
} else if ($formData.confirmPassword !== $formData.newPassword) {
return callback(new Error("两次输入密码不一致!"));
} else {
return callback();
}
} else {
return callback(new Error(errorText));
}
}
};
}
};
Vue.use(customValiate);
main.js 引入
import "@/common/scripts/customValiate";