1.先说一下原生js的几个正则：
this.contains_lovercase = /[a-z]/.test(this.password); //小写
this.contains_number = /\d/.test(this.password); //数字
this.contains_uppercase = /[A-Z]/.test(this.password); //大写
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
2.在写入vue代码中需要设置一些样式及判断，本人也是参考了网上其他友人的代码，如有冒犯请见谅
html中：
<input type="password" v-model="passwordOld" placeholder="请输入原密码" />
<div class="input_container" style="marginTop:10px">
<input type="password" @input="p_len" v-model="password" placeholder="请输入新密码" />
<span v-bind:class="{ valid_password_length: valid_password_length , show_password_length: typed}" class="password_length">{{password_length}}</span>
<div class="valid_password_container" v-bind:class="{show_valid_password_container : valid_password }">
<svg width="100%" height="100%" viewBox="0 0 140 100">
<path class="tick" v-bind:class="{checked: valid_password }"
d="M10,50 l25,40 l95,-70" />
</svg>
</div>
</div>
<div class="lnu_container">
<p v-bind:class="{ lovercase_valid: contains_lovercase }">小写字母</p>
<p v-bind:class="{ number_valid: contains_number }">数字</p>
<p v-bind:class="{ uppercase_valid: contains_uppercase }">大写字母</p>
<p v-bind:class="{ uppercase_valid: contains_other }">特殊字符</p>
</div>
<input type="password" v-model="passwordAgain" placeholder="请再次输入新密码" />
<div style="marginTop:10px">
<p style="color:red;fontSize:10px">温馨提示：密码最小长度8个字符,必须包含数字大小写字母,特殊符号</p>
<el-button @click="passwordTpl = false">取消</el-button>
<el-button type="primary" @click="passwordTrue">确定</el-button>
</div>
css中：
/* 设置勾号大小 */
.el-checkbox__inner::after {
height: 13px;
left: 8px;
}
/* 设置选择框大小 */
.el-checkbox__inner {
width: 20px;
height: 20px;
}
input[type="password"]::-webkit-input-placeholder {
color: rgba(71, 87, 98, 0.8);
}
input[type="password"]::input-placeholder {
color: rgba(71, 87, 98, 0.8);
}
.input_container {
display: block;
margin: 0 auto;
width: 390px;
height: auto;
position: relative;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
}
input[type="password"] {
width: 320px;
height: auto;
border: 1px solid transparent;
background: #EEEEEE;
color: #475762;
font-size: 15px;
border-radius: 4px;
padding: 12px 5px;
overflow: hidden;
outline: none;
-webkit-transition: all .1s;
transition: all .1s;
}
input[type="password"]:focus {
border: 1px solid #2196F3;
}
.password_length {
padding: 2px 10px;
position: absolute;
top: 50%;
right: 35px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: #FBD490;
color: rgba(71, 87, 98, 0.8);
border-radius: 4px;
font-size: 13px;
display: none;
-webkit-transition: all .1s;
transition: all .1s;
}
.valid_password_length {
background: #00AD7C;
color: rgba(255, 255, 255, 0.9);
}
.show_password_length {
display: block;
}
.lnu_container {
display: block;
margin: 10px auto;
width: 320px;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.lnu_container p {
width: 100px;
height: auto;
font-size: 12px;
line-height: 1.2;
text-align: center;
border-radius: 2px;
color: rgba(71, 87, 98, 0.8);
background: -webkit-linear-gradient(left, #00AD7C 50%, #eee 50%);
background: linear-gradient(to right, #00AD7C 50%, #eee 50%);
background-size: 201% 100%;
background-position: right;
-webkit-transition: background .3s;
transition: background .3s;
}
.lovercase_valid,
.number_valid,
.uppercase_valid {
background-position: left !important;
color: rgba(255, 255, 255, 0.9) !important;
}
.valid_password_container {
display: block;
margin: 10px auto;
border-radius: 4px;
position: absolute;
background: #00AD7C;
width: 20px;
height: 20px;
visibility: hidden;
opacity: 0;
right: 0px;
top: 0%;
}
.show_valid_password_container {
visibility: visible;
opacity: 1;
}
.tick {
width: 100%;
height: 100%;
fill: none;
stroke: white;
stroke-width: 25;
stroke-linecap: round;
stroke-dasharray: 180;
stroke-dashoffset: 180;
}
.checked {
-webkit-animation: draw 0.5s ease forwards;
animation: draw 0.5s ease forwards;
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
data中：
passwordOld: "",
passwordAgain: "",
password: null,
password_length: 0,
typed: false,
contains_lovercase: false,
contains_number: false,
contains_uppercase: false,
valid_password_length: false,
valid_password: false,
contains_other: false
methods中：
p_len: function() {
this.password_length = this.password.length;
if (this.password_length > 7) {
this.valid_password_length = true;
} else {
this.valid_password_length = false;
}
if (this.password_length > 0) {
this.typed = true;
} else {
this.typed = false;
}
this.contains_lovercase = /[a-z]/.test(this.password); //小写
this.contains_number = /\d/.test(this.password); //数字
this.contains_uppercase = /[A-Z]/.test(this.password); //大写
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
// this.contains_other = /[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？] /.test(this.password);//特殊字符
this.contains_other = pattern.test(this.password)
if (this.contains_lovercase && this.contains_number && this.contains_uppercase && this.contains_other && this.valid_password_length) {
this.valid_password = true;
} else {
this.valid_password = false;
}
// Check if the password is valid
// if (this.contains_lovercase == true && this.contains_number == true) {
// this.valid_password = false;
// if (
// this.contains_uppercase == true &&
// this.valid_password_length == true
// )
// this.valid_password = true;
// } else {
// this.valid_password = false;
// }
},
passwordTplBtn() {
this.passwordOld = "";
this.passwordAgain = "";
this.password = "";
this.passwordTpl = true
},
baseEditBtn() {
this.baseEditPasswTpl = true
},
passwordTrue() {
if (!this.passwordOld) {
this.$message({
message: "请输入原密码",
type: "error"
})
return
}
if (!this.password || !this.passwordAgain || this.password != this.passwordAgain) {
this.$message({
message: "密码不一致！",
type: "error"
})
return
}
if (this.valid_password == false) {
this.$message({
message: "密码不符合要求请重新输入！",
type: "error"
})
return
} else {
var that = this
this.$axios
.post("xxxxxxxxxx", {
username: that.info.username,
userkey: that.passwordOld,
newuserkey: that.password
})
.then(function(data) {
console.log(data);
if (data.data.state == 1) {
that.$message({
message: "修改成功！",
type: "success"
});
that.password = {}
that.passwordTpl = false;
// that.searchBtn();
} else {
alert(data.data.message);
}
})
.catch(function(response) {
console.log(response);
});
}
},
注意适用的框架，如果不是vue element 可自行改动一下，，核心点在于正则的校验以及长度的校验