vue中 確認密碼/重復輸入/再次輸入密碼的校驗（基於iviewUI框架）

首先需要效果

（1）正常效果

（2）輸入有誤時

(3)格式正確，但兩次密碼不一致時

(4)校驗通過

代碼部分

<div class="changeMain">
      <p class="changeTips">密碼設置規則</p>
      <p class="changeTips changeRules">6-16位字符，同時包括數字、大小寫字母和特殊字符四種組合； 特殊字符需在“~ @ # $ % * _ - + = : , . ?”范圍內選擇。</p>
      <Form ref="formValidate" class="changeForm" :model="formValidate" :rules="ruleValidate" :label-width="80">
         <FormItem label="新密碼" prop="password" :label-width="100">
             <Input v-model="formValidate.password" class="changeInput" type="password" placeholder="請輸入密碼"></Input>
             <Icon type="ios-checkmark-circle" v-if="changeFlag == 1" color="#35B449"/>
             <Icon type="md-close-circle" v-else-if="changeFlag == 2" color="#f00"/>
         </FormItem>
         <FormItem label="重復密碼" prop="againPassword" :label-width="100">
             <Input v-model="formValidate.againPassword" class="changeInput" type="password" placeholder="請輸入密碼"></Input>
             <Icon type="ios-checkmark-circle" v-if="changeAgainFlag == 1" color="#35B449"/>
             <Icon type="md-close-circle" v-else-if="changeAgainFlag == 2" color="#f00"/>
         </FormItem>
         <FormItem class="changeBtnbox">
            <Button type="primary">確定</Button>
            <Button style="margin-left: 30px">取消</Button>
        </FormItem>
     </Form>
    </div>

邏輯部分

export default {
  data () {
    // 密碼驗證
    const pwdCheck = async(rule, value, callback) => {
      let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~@#$%\*-\+=:,\\?\[\]\{}]).{6,16}$/
      if (value.length < 6) {
        this.changeFlag = 2;
        return callback(new Error('密碼不能少於6位！'));
      } else if (value.length > 16) {
        this.changeFlag = 2;
        return callback(new Error('密碼最長不能超過16位！'));
      } else if (!reg.test(value)) {
        this.changeFlag = 2;
        return callback(new Error('密碼輸入有誤，請檢查格式是否正確！'));
      } else {
        this.changeFlag = 1;
        callback()
      }
    }
    // 重復密碼驗證
    const pwdAgainCheck = async(rule, value, callback) => {
      if (value.length < 1) {
        this.changeAgainFlag = 2;
        return callback(new Error('重復密碼不能為空！'));
      } else if(this.formValidate.password != this.formValidate.againPassword){
        this.changeAgainFlag = 2;
        return callback(new Error('兩次輸入密碼不一致！'));
      }else{
        this.changeAgainFlag = 1;
        callback()
      }
    };
    return {
      changeFlag: 0,
      changeAgainFlag: 0,
      formValidate: {
          password: '',
          againPassword: ''
      },
      ruleValidate: {
          password: [
              { required: true, validator: pwdCheck, trigger: 'blur' }
          ],
          againPassword: [
              { required: true, validator: pwdAgainCheck, trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
      handleSubmit (name) {
          this.$refs[name].validate((valid) => {
              if (valid) {
                  this.$Message.success('Success!');
              } else {
                  this.$Message.error('Fail!');
              }
          })
      },
      handleReset (name) {
          this.$refs[name].resetFields();
      }
  }
}