Vue 두 필드 의 암호 수정 기능 구현

1.머리말
『8195』본 고 는 전문 인《Vue Element-ui 폼 검사 규칙,어떤 것 을 알 고 있 습 니까??》이다.다 중 필드 연합 검사 의 전형 적 인 응용
*8195:8195:비밀 번 호 를 수정 할 때 보통 두 번 의 비밀번호 가 일치 하 는 지 확인 하고 2 개의 속성 필드 와 관련된다.2 개의 속성 필드 와 유사 한 경우:
4.567917.날짜 시간 범위,둘 다 값 이 있 으 면 종료 시간>=시작 시간 을 요구 합 니 다수량 관계:수량 하한 선<=수량 상한 선『8195』는 두 속성 치가 모두 가 변 적 인 것 이 특징 이다.본 고 는 두 번 의 암호 의 일치 성 응용 을 검증 하여 가 변 속성 값 의 필드 간 의 공동 검증 의 전형 적 인 해결 방안 을 제시 하고 자 한다.
2.방안 실현
2.1 실현 코드
『8195』먼저 폼 의 코드 를 드 립 니 다.

<template>
  <div id="contentwrapper">
    <h5 class="heading" align=left>     /     </h5>
    <!--     -->
    <el-divider></el-divider>    
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="     ：" prop="oldPasswd">
        <el-input v-model="form.oldPasswd" :type="password">
          <!-- input        slot="suffix"  ，         -->
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-input>
      </el-form-item>   
      <el-form-item label="     ：" prop="newPasswd">
        <el-input v-model="form.newPasswd" :type="password">
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-input>
      </el-form-item>   
      <el-form-item label="    ：" prop="confirmPasswd">
        <el-input v-model="form.confirmPasswd" :type="password">
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-input>
      </el-form-item>   
      <el-form-item>
        <el-button type="primary" style="width:160px" size="small" @click="submit()">  </el-button>
        <el-button type="primary" style="width:160px" size="small" @click="cancel()">  </el-button>
      </el-form-item>      
    </el-form>
  </div>
</template>
<script>
  import {passwordValidator} from '@/common/validator.js'
  export default {
    data() {
      //           
      const comparePasswdValidator = (rule, value, callback) =>{
        //         
        var getvaluesMethod = rule.getValuesMethod;
        //   getvaluesMethod  ，     
        var formData = getvaluesMethod();
        
        //      ，        ，     
        if (formData.newPasswd == '' || formData.confirmPasswd == ''){
          return callback();
        }

        // ===========================================================
        //       

        //      ，  
        if (formData.newPasswd == formData.confirmPasswd){
          //           
          //               ，                 
          this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
          callback();
        }else{
          callback(new Error('       '));
        }
      }

      return {
        form : {
          oldPasswd : '',
          newPasswd : '',
          confirmPasswd : ''
        },
        //    Input  
        password:"password",  
        //    Input    
        icon:"el-input__icon el-icon-view", 
        //       
        rules: {
          oldPasswd : [
            {required: true, message: "      ", trigger: 'blur'}
          ],          
          newPasswd : [
            {required: true, message: "       ", trigger: 'blur'},
            {min: 6, max: 18, message: "   6-18 ", trigger: 'blur'},
            {validator: passwordValidator, trigger: 'blur'},
            {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
          ],     
          confirmPasswd : [
            {required: true, message: "        ", trigger: 'blur'},
            {min: 6, max: 18, message: "    6-18 ", trigger: 'blur'},
            {validator: passwordValidator, trigger: 'blur'},
            {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
          ],                   
        },        
      }
    },
    methods: {
      //       ，                  
      getValuesMethod(){
        return this.form;
      },

      //         
      showPassword(){
        //            
        if( this.password=="text"){
            this.password="password";
            //    
            this.icon="el-input__icon el-icon-view";
        }else {
            this.password="text";
            this.icon="el-input__icon el-icon-stopwatch";
        }
      },
      
      //   
      submit(){
        let _this = this;
        this.$refs['form'].validate(valid => {
          //      true，        false
          if (valid) {
            _this.instance.changePasswd(_this.$baseUrl,_this.form).then(res => {
              if (res.data.code == _this.global.SucessRequstCode){
                //       
                alert("         ！");
                //      
                this.$router.push({
                  path: '/home',
                });                
              }else{
                if (!_this.commonFuncs.isInterceptorCode(res.data.code)){
                  alert(res.data.message);
                }
              }              
            }).catch(error => {
              console.log(error);
            }); 
          }          
        })
      },

      //   
      cancel(){
        //      
        this.$router.push({
          path: '/home',
        });            
      }
    }
  }
</script>  

가 져 온 외부 검사 기 passwordValidator 는/src/common/validator.js 파일 에서 코드 는 다음 과 같 습 니 다.

/*      */
export function passwordValidator(rule, value, callback) {
  const reg =/^[_a-zA-Z0-9@.#%&*!\-\$^]+$/;
  if(value == '' || value == undefined || value == null){
    callback();
  } else {
    if (!reg.test(value)){
      callback(new Error('       、          ：@.#%&*!_-$^'));
    } else {
      callback();
    }
  }
}

2.2 코드 설명
2.2.1 규칙 설정:

  //       
    rules: {
      oldPasswd : [
        {required: true, message: "      ", trigger: 'blur'}
      ],          
      newPasswd : [
        {required: true, message: "       ", trigger: 'blur'},
        {min: 6, max: 18, message: "   6-18 ", trigger: 'blur'},
        {validator: passwordValidator, trigger: 'blur'},
        {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
      ],     
      confirmPasswd : [
        {required: true, message: "        ", trigger: 'blur'},
        {min: 6, max: 18, message: "    6-18 ", trigger: 'blur'},
        {validator: passwordValidator, trigger: 'blur'},
        {validator: comparePasswdValidator,trigger: 'blur','getValuesMethod':this.getValuesMethod},
      ],                   
    },        

*8195°중점 은 new Passwd 와 confirm Passwd 속성 입 니 다.두 개 는 같은 규칙 집합 을 설정 하고 검사 규칙 은 모두 다음 과 같 습 니 다.

값 이 비어 있 으 면 안 됩 니 다

길이 6-18 위

암호 검사 기 passwordValidator 의 규칙 에 부합 합 니 다.즉,비밀 번 호 는 영문 자모,숫자 와 다음 문자 로 구성 되 어 있 습 니 다.@.\#%&*! -$^

암호 검사 기 compare PasswdValidator 를 비교 합 니 다.이 검사 기 는 사용자 정의 속성 getValuesMethod 를 추 가 했 습 니 다.속성 값 은 this 의 getValuesMethod 방법 입 니 다.방법 명 이 아니 라 방법 입 니 다.이 규칙 은 methods 에 getValuesMethod 방법 이 있 고 copare PasswdValidator 검사 기 를 실현 하도록 요구 합 니 다

*8195:8195:이런 규칙 들 이 함께 작용 하고 모든 규칙 은 검 사 를 통 해 속성 검 사 를 통과 해 야 통과 하 며 검 측 순 서 는 배열 의 선후 순서에 따라 집행 된다.
*8195°검사 규칙 에서 new Passwd 와 confirm Passwd 속성 은 모두 같은 copare Passwd Validator 를 설정 합 니 다.두 필드 의 속성 값 이 모두 가 변 적 이기 때 문 입 니 다.compare Passwd Validator 는 규칙 의 마지막 줄 에 있 습 니 다.즉,앞의 검사 규칙 을 먼저 만족 시 켜 야 합 니 다.
2.2.2 getValuesMethod 방법

//       ，                  
  getValuesMethod(){
    return this.form;
  },

『8195』getValuesMethod 방법 으로 data 의 form 데이터 대상 을 되 돌려 줍 니 다.이것 은 매우 날 카 로 운 조작 으로 전체 데이터 프로 브 를 제공 하 는 것 과 같 습 니 다.검사 기 에서 data 의 form 데이터 대상 을 방문 할 수 있 고 form 의 v-modal 모델 로 인해 데이터 의 실시 성 을 확보 할 수 있 습 니 다.즉,다른 속성 을 얻 지 못 할 까 봐 걱정 하지 않 아 도 됩 니 다.getValues Method 방법 은 데이터 바 인 딩 의 다른 방향 을 제공 합 니 다.
2.2.3 compare PasswdValidator 검사 기

  //           
  const comparePasswdValidator = (rule, value, callback) =>{
    //         
    var getvaluesMethod = rule.getValuesMethod;
    //   getvaluesMethod  ，     
    var formData = getvaluesMethod();
    
    //      ，        ，     
    if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      return callback();
    }

    // ===========================================================
    //       

    //      ，  
    if (formData.newPasswd == formData.confirmPasswd){
      //           
      //               ，                 
      this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      callback();
    }else{
      callback(new Error('       '));
    }
  }

  설정 한 사용자 정의 규칙 속성'getValuesMethod'는 this.getValuesMethod 를 가리 키 는 방법 이기 때문에 이 속성 은 방법 으로 호출 할 수 있 습 니 다.

 //         
    var getvaluesMethod = rule.getValuesMethod;
    //   getvaluesMethod  ，     
    var formData = getvaluesMethod();

『8195』방법 속성의 호출 결 과 는 this.form 을 가리 키 는 데이터 대상 을 되 돌려 주 므 로 이 대상 의 속성 을 마음대로 방문 할 수 있 습 니 다.
『8195』는 두 가 지 를 비교 하기 전에 한 사람 이 비어 있 는 것 을 발견 하면 돌아온다.현재 속성 입력 값 이후 엔 드 속성 에 입력 값 이 없 을 수 있 으 므 로 비교 해 서 는 안 됩 니 다.

//      ，        ，     
    if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      return callback();
    }

두 번 의 비밀번호 비교:

  // ===========================================================
    //       

    //      ，  
    if (formData.newPasswd == formData.confirmPasswd){
      //           
      //               ，                 
      this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      callback();
    }else{
      callback(new Error('       '));
    }

  두 번 의 비밀 번 호 를 비교 하고 두 개의 비밀번호 가 일치 하면 경고 알림 을 출력 합 니 다.일치 하면 먼저 엔 드 에 대한 경고 알림 을 삭제 해 야 합 니 다.이때 엔 드 에'두 번 의 비밀번호 가 일치 하지 않 습 니 다'라 는 알림 이 있 을 수 있 기 때 문 입 니 다.

//               ，                 
      this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);

8195,8195,clearValidate 방법 은 element-form 의 방법 으로 하나 이상 의 검사 규칙 속성 에 대한 이상 알림 을 제거 하 는 역할 을 합 니 다.
이때'오 살'상황 이 발생 할 수 있 습 니까?즉,제거 작업 은 엔 드 에 대한 다른 이상 알림 도 제거 합 니 다.이때 두 번 의 암호 가 같 고 두 번 의 검사 규칙 이 같다 는 것 을 감안 하면 이 검사 규칙 은 마지막 에 있 기 때문에 검 측 순서 로 볼 때 마지막 으로 실 행 된 것 입 니 다.즉,본 검사 기 를 실 행 했 을 때 다른 검 사 는 모두 통과 되 었 습 니 다.따라서 이런'오 살'은 일어나 지 않 는 다.실제 집행 효과 도 마찬가지다.
또한 주의해 야 할 것 은 위의 clearValidate 호출 문 구 를 다음 코드 로 대체 할 수 없습니다.

  //        
          if (rule.field == 'newPasswd')
          {
            //        newPasswd
            this.$refs['form'].validateField('confirmPasswd');
          }else{
            this.$refs['form'].validateField('newPasswd');
          }

*8195:이 때 검 사 를 실행 하고 있 습 니 다.다시 엔 드 검 사 를 호출 하면 엔 드 에 compare Passwd Validator 를 호출 할 수 있 습 니 다.엔 드 검사 결과 두 번 의 암호 가 일치 하 는 것 을 발견 하면 엔 드(엔 드 의 엔 드,즉 자체)검 사 를 다시 호출 하여 순환 하여 스 택 을 호출 합 니 다.따라서 검사 기 코드 에 서 는 vaidate Field 방법 을 사용 하지 않도록 합 니 다.
2.3 효과 검증
『8195』아래 는 효과 그림 입 니 다.
초기 상태:

  비밀 번 호 를 수정 하고 입력 초점 에서 벗 어 납 니 다.

새 암호 입력 상자 에 들 어가 서 입력 하지 않 고 입력 초점 에서 벗 어 납 니 다.

*8195:비밀 번 호 를 확인 하고 끝 에 있 는 문자'8'을 삭제 하 며 입력 초점 에서 벗 어 났 습 니 다.이때 다시 초기 상태 로 돌 아 왔 습 니 다.
Vue 두 필드 의 공동 검증 전형 적 인 예 인 비밀번호 수정 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 비밀번호 수정 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!