login登录密码验证html vue

login登录密码验证

<el-row>
    <el-col>新密码</el-col>
    <el-col :span="12"><el-input type="password" size="mini" v-model="newPassword" @input="inputNewPassWord"></el-input></el-col>
</el-row>
<div>{{newPasswordErr}}</div>

methods:{
    inputNewPassWord() {
            
            var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,30}');
            //&& this.newPassword表示判断密码是否为空
            if(!regex.test(this.newPassword) && this.newPassword) {
                this.validatePWd(this.newPassword);
            }else {
                this.newPasswordErr = ''
            }
        },
    // 密码提交验证
    validatePWd(newPassword) {
            if(!newPassword.match(/[0-9]/g)) {
                this.newPasswordErr = '密码应包含数字'
                return false
            }
            else if(!newPassword.match(/[a-zA-Z]/g)) {
                this.newPasswordErr = '密码应包含字母'
                return false
            } 
            else if(!newPassword.match(/[~#@^%&!*]/g)) {
                this.newPasswordErr = '密码应包含特殊字符'
                return false
            } else if(!newPassword.match('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{9,30}')){
                this.newPasswordErr = '密码应包涵字母、数字、特殊字符9-30位'
                return false
            }else {
                this.newPasswordErr = ''
            }
            return true
        },      
}

涉及的知识点：

@input

1.@input 一般用于监听事件

只要输入的值变化了就会触发input

JavaScript match() 方法

定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

语法

stringObject.match(searchvalue)
stringObject.match(regexp)

参数	描述
searchvalue	必需。规定要检索的字符串值。
regexp	必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

返回值

存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。