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'}
]

通过控制台即可查看输出结果。