element-ui 表單重復密碼驗證 之動態傳參

<template>
  <div id="test">
    <el-form  :model="form" :rules="rule" ref="form" label-width="100px" id="form">
        <el-form-item   label="賬戶" prop="name" >
            <el-input v-model="form.name" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item   label="密碼" prop="password" >
            <el-input v-model="form.password" prefix-icon="el-icon-key" show-password="true"></el-input>
        </el-form-item>
        <el-form-item   label="再次輸入密碼" prop="checkPass" >
            <el-input v-model="form.checkPass" prefix-icon="el-icon-key" show-password="true"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="submit('form')">test</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Validator from '../staticModule/validator.js'
var tPas = {password: 1};
export default {
  name: "test",
  data:() => ({
    form: {
      name: '',
      password: '',
      checkPass: ''
    },
    rule: {
      name: [
        { validator: Validator.validateNull, trigger: 'blur' }
      ],
      password: [
        { validator: Validator.validateNull, trigger: 'blur' }
      ]

    },
  }),


  methods: {
    submit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit');
        }else{
          console.log('error submit');
        }
      });
    }

  },
  watch: {
      'form.password': [
        function handler1(){
            console.log(this.form.password+'p');
            tPas = this.form;
            this.$set(this.rule,'checkPass',[{validator:Validator.validateEqNotNull.bind(tPas), trigger: 'blur'}]);
            console.log(tPas.password+'t');
          }
      ]


  }
}
</script>
<style lang="css" scoped>
.el-form{
  position: relative;
  top: 150px;
  left:30%;
}
.el-form-item{
  width: 300px;
}
</style>

　　validator.js如下

...
validateEqNotNull: function(rule,value,callback){
    if(value === ''){
       callback(new Error("輸入不能為空！"))
    }else if(value != this.password){
      console.log(value+'#');
      console.log(this.password+'!');
      callback(new Error("兩次輸入不一致"));
    }else{
      callback()
    }
  }
...

　　其驗證的思路就是對表單中rules 綁定的 data 值 rule,進行動態的驗證方法的添加。

可以看到上面我使用了bind函數，為什么還要在watch 方法中動態添加呢， 通過，console 控制台的輸出可以發現，如果不在watch 中動態添加的話，bind 函數的值tPas 雖然會在watch 中改變，但是驗證的時候並沒有bind 進去。查看源碼后，可以看到 form 表單是watch error 的 並設置了immeditate: true. 這個執行的順序是優先於我在watch 中添加的對tPas 值動態改動的。因此我在watch 中將該驗證方式放在后面執行。

如果需要嘗試bind 函數,請將 最上面代碼中

this.addRule('checkPass',[{validator:Validator.validateEqNotNull.bind(tPas), trigger: 'blur'}]);  注釋掉，
在rule 中，將該段代碼的內容放置於rule 驗證方式中

//注意加

，
checkPass: [
{validator:Validator.validateEqNotNull.bind(tPas), trigger: 'blur'}
]

通過控制台即可查看輸出結果。