js，vue，element 密碼設定密碼最小長度8個字元,必須包含數字大小寫字母,特殊符號
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("[`[email protected]#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
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("[`[email protected]#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
// this.contains_other = /[`[email protected]#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？] /.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 可自行改動一下，，核心點在於正則的校驗以及長度的校驗