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("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")

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 可自行改动一下，，核心点在于正则的校验以及长度的校验