函数式校验表单信息---validator

• 正常流程:绑定数据,定义rules,prop等.
• 在需要自定义校验数组里添加validator校验函数
• 函数有三个参数:

1. rule:当前标准
2. value:当前输入框的值
3. callback:Element传入的固定回调函数,校验完成就需要执行

• 如果校验合法直接执行,没有参数
• 如果不合法,创建一个错误对象参数new Error

出现效果

<template>
  <!-- el-form 中:model绑定的是整个表单的数据 -->
  <!-- ref:标识符 -->
  <!-- rules:校验数据 -->
  <!-- el-form-item:每个输入框 -->
  <el-form :model="form" ref="form" :rules="rules" class="form">
    <el-form-item class="form-item" prop="password">
      <el-input
        placeholder="密码"
        type="password"
        v-model="form.password"
      ></el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="checkPassWord">
      <el-input
        placeholder="确认密码"
        type="password"
        v-model="form.checkPassWord"
      >
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    //由于是在data内完成校验,所以不写在methods也可以
    const validateCheckPass = (rule, value, callback) => {
      // rule:当前标准
      //value:当前输入框的值
      // callback:Element传入的固定回调函数,校验完成就需要执行
      // 1,如果校验合法直接执行,没有参数
      // 2.如果不合法,创建一个错误对象参数new Error
      if (!value) {
        callback(new Error("请输入必填信息"));
      } else if (value != this.form.password) {
        callback(new Error("两次密码必须一致"));
      } else {
        callback();
      }
    };
    return {
      //表单数据
      form: {
        password: "", //密码
        checkPassWord: "", //确认密码
      },
      // 表单规则
      rules: {
      //密码
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        //确认密码
        checkPassWord: [
          {
            trigger: "blur",
            //这里的校验并非默认自带的校验方式
            //判断标准和提示语都需要自定义
            // 自定义校验函数validator
            validator: validateCheckPass,
          },
        ],
      },
    };
  },
  };
</script>