element UI 表单验证——修改密码为例

<template>
    <div id="changePwd">
      <el-form :model="changePwd" status-icon :rules="rules2" ref="changePwd" label-width="100px" style="margin:20px auto;width:40%;min-width:300px;">
        <el-form-item label="原密码" prop="pass">
          <el-input type="password" v-model="changePwd.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passNew">
          <el-input type="password" v-model="changePwd.passNew" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="changePwd.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('changePwd')">提交</el-button>
          <el-button @click="resetForm('changePwd')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {
        name: "changePwd",
      data:function() {
          var validatePass3=(rule, value, callback)=>{
            if (value!=this.customer.password) {
              callback(new Error('密码错误，请重新输入！'));
            }else if (value.length<6 || value >16){
              callback(new Error('密码长度不符！'));
            } else{
              callback();
            }
          };
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          }else if (value.length<6 || value >16){
            callback(new Error('密码长度不符！'));
          } else {
            if (this.changePwd.checkPass != '') {
              this.$refs.changePwd.validateField('checkPass');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          }else if (value.length<6 || value >16){
            callback(new Error('密码长度不符！'));
          } else if (value !== this.changePwd.passNew) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          changePwd: {
            pass:'',
            passNew: '',
            checkPass: '',
          },
          admin:{
            id:'0',
            username: '',
            sex:'',
            birthDate:'',
            phone:'',
            password:'',
            mail:'',
          },
          rules2: {
            pass:[
              {required:true,validator:validatePass3,trigger:'blur'},
              {min:6,max:16,message:'长度在6到16个字符',trigger:'blur'}
            ],
            passNew: [
              { required:true,validator: validatePass, trigger: 'blur' },
              {min:6,max:16,message:'长度在6到16个字符',trigger:'blur'}
            ],
            checkPass: [
              { required:true,validator: validatePass2, trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$confirm(
                "确认修改",
                {
                  type:"warning"
                }
              ).then(()=>{
                this.admin.password=this.changePwd.passNew; //赋值新密码
                let params=this.$qs.stringify({
                  'admin':this.admin
                });
                this.$http({
                  url:'/"updateAdmin',
                  data:params,
                  method:'post'
                })
              }).then(res=>{
                if(res.status==200){
                  this.$message({
                    type:"info",
                    message:"修改成功"
                  });
                }
              }).catch(()=>{
                this.$message({
                  type:"info",
                  message:"已取消修改"
                });
              });
            } else {
              alert("请先按要求填写信息！")
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      },
      created:function () {
        this.admin=this.$store.state.loginUser;
      }
    }
</script>

<style scoped>

</style>

el-form-item中的prop是el-form中rule值中的验证规则。
el-form的refs属性值和this.$refs[refs属性值].validate，一致。