vue实现密码的表单验证~(旧密码,新密码,重复新密码)

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1. template中



 
 

原密码:

{{ changePswData.oldPsw_pswLog_noBlank }}

新密码:

{{ changePswData.newPsw_pswLog_noBlank }}

{{ changePswData.pswLog_pattern }}

重复新密码:

{{ changePswData.againNewPsw_pswLog_noBlank }}

{{ changePswData.pswLog_equality }}

2. data中

            changePswData: {
                    changePswModel: false,

                    oldPsw: '',
                    oldPsw_pswLog_noBlank: '密码不能为空,请重新输入',
                    oldPsw_pswLog_noBlank_Flag: 'none',

                    newPsw: '',
                    newPsw_pswLog_noBlank: '密码不能为空,请重新输入',
                    newPsw_pswLog_noBlank_Flag: 'none',
                    pswLog_pattern: '密码由5-20位数字字母组成,请重新输入',
                    pswLog_pattern_Flag: 'none',

                    againNewPsw: '',
                    againNewPsw_pswLog_noBlank: '密码不能为空,请重新输入',
                    againNewPsw_pswLog_noBlank_Flag: 'none',
                    pswLog_equality: '两次输入密码不相等,请重新输入',
                    pswLog_equality_Flag: 'none'
                }

3.methods中


// 打开Model框
            changePsw: function () {
                this.changePswModel = true;
            },
// 验证输入框
            oldPswValid: function() {
                console.log(this.changePswData.oldPsw)
                if(this.changePswData.oldPsw != ''){
                    this.changePswData.oldPsw_pswLog_noBlank_Flag = 'none'
                }else{
                    this.changePswData.oldPsw_pswLog_noBlank_Flag = 'block'
                }
            },
            oldPswValid_focus: function() {
                this.changePswData.oldPsw_pswLog_noBlank_Flag = 'none'
            },
            newPswValid: function() {
                console.log(this.changePswData.newPsw)
                if(this.changePswData.newPsw != ''){
                    this.changePswData.newPsw_pswLog_noBlank_Flag = 'none';
                    let pattern = /^[a-zA-Z0-9]{6,20}$/;
                    if(!pattern.test(this.changePswData.newPsw)){
                        this.changePswData.pswLog_pattern_Flag = 'block';
                    }else{
                        this.changePswData.pswLog_pattern_Flag = 'none';
                    }
                }else{
                    this.changePswData.newPsw_pswLog_noBlank_Flag = 'block'
                }
            },
            newPswValid_focus: function() {
                this.changePswData.newPsw_pswLog_noBlank_Flag = 'none';
                this.changePswData.pswLog_pattern_Flag = 'none';
            },
            againNewPswValid: function() {
                console.log(this.changePswData.againNewPsw)
                if(this.changePswData.againNewPsw != ''){
                    this.changePswData.againNewPsw_pswLog_noBlank_Flag = 'none';
                    if(this.changePswData.againNewPsw != this.changePswData.newPsw){
                        this.changePswData.pswLog_equality_Flag = 'block'
                    }else{
                        this.changePswData.pswLog_equality_Flag = 'none'
                    }
                }else{
                    this.changePswData.againNewPsw_pswLog_noBlank_Flag = 'block'
                }
            },
            againNewPswValid_focus: function() {
                this.changePswData.againNewPsw_pswLog_noBlank_Flag = 'none';
                this.changePswData.pswLog_equality_Flag = 'none'
            },

// 修改密码
             changePswOk: function () {
                let self = this;
                console.log(self.validPsw())
                if(self.validPsw() == 1){
                    axios.post('#', {
                        password: self.changePswData.oldPsw,
                        newPassword: self.changePswData.newPsw
                    }).then(function (response) {
                        let data = response.data.data;
                        let status = response.data.status;
                        if(status == '0'){
                            self.$Message.success(data);
                        }
                    }).catch(function (error) {
                        self.$Message.error('修改密码失败,请重新修改!');
                    })
                }else{
                    self.$Message.error('修改密码失败,请重新修改!');
                }
            },
            changePswCancel: function () {

            }

转载于:https://my.oschina.net/yj1993/blog/1809434

你可能感兴趣的:(vue实现密码的表单验证~(旧密码,新密码,重复新密码))