iview2----- 表单密码验证

╰+哭是因爲堅強的太久メ 2021-11-05 14:02 332阅读 0赞

<Form ref="loginForm" :model="form" :rules="rules">
      <FormItem label="新密码" prop="password">
           <Input v-model="formItem.password" type="password"/>
      </FormItem>
      <FormItem label="再次输入新密码密码" prop="pwdCheck">
           <Input v-model="formItem.pwdCheck" type="password"/>
      </FormItem>
    </Form>
     
    export default {
        name: 'login',
        data() {
            const userNameCheck = (rule, value, callback) => {
            let str = value;
            let regExps = new RegExp(/^1[34578]\d{9}$/);
              if (str == null || str.length < 11) {
                callback(new Error('手机号不能少于11位'));
              }else if(!regExps.test(this.form.userNameAgain)){
                callback(new Error('手机号格式不正确'));
              }else{
                callback()
              }
            };
          const pwdCheck = (rule, value, callback) => {
            let str = value;
            let reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
              if (str == null || str.length < 6) {
                callback(new Error('密码至少6位,同时包含字母和数字'));
              }else if(!reg.test(str)){
                callback(new Error('密码至少6位,同时包含字母和数字'));
              }else{
                callback()
              }
            };
          const pwdCheckValidate = (rule, value, callback) => {
            let str = value;
              if (str == null || str.length < 6) {
                callback(new Error('密码至少6位,同时包含字母和数字'));
                this.compare = true;
              }else if(this.form.newPassword != this.form.passWordAgain){
                callback(new Error('两次输入密码不一致'));
                this.compare = true;
              }else{
                this.compare = false;
                callback()
              }
            };
            return {
                form: {
                    userName: '',
                    password: '',
                    code:'',
                    userNameAgain: '',
                    codeAgain: '',
                    newPassword:'',
                    passWordAgain:'',
                },
                 rules: {
                    userName: [
                        { required: true, validator: userNameCheck, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, validator: pwdCheck, trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' }
                    ],
                    userNameAgain: [
                        { required: true, validator: userNameCheck, trigger: 'blur' }
                    ],
                    codeAgain: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, validator: pwdCheck, trigger: 'blur' }
                    ],
                    passWordAgain: [
                        { required: true, validator: pwdCheckValidate, trigger: 'blur' }
                    ],
                }
           }  
        } 
    }