Vue - 表单验证

<template>
  <div>
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="addForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="addForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="addForm.mobile"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="resetForm">重置</el-button>
    <el-button type="primary" @click="addUser">确定</el-button>
  </div>
</template>

<script>
export default {
  data() {
    //====自定义校验规则====
    //验证邮箱的规则
    var checkEmail = (rules, value, callback) => {
      //验证邮箱的正则表达式
      const regEmail = /^([a-zA-A0-9_-])+@([a-zA-A0-9_-])+(\.[a-zA-A0-9_-])+/;
      if (regEmail.test(value) == true) {
        //合法的邮箱
        return callback();
      } else {
        callback(new Error("请输入合法的邮箱"));
      }
    };
    //验证手机号的规则
    var checkMobile = (rules, value, callback) => {
      //验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value) == true) {
        //合法的手机号
        return callback();
      } else {
        callback(new Error("请输入合法的手机号"));
      }
    };

    return {
      addForm: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "请输入用户名的长度在 3 到 10 个字符之间",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码的长度在 6 到 15 个字符之间",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          //自定义规则
          { validator: checkEmail, trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          //自定义规则
          { validator: checkMobile, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    resetForm() {
      this.$refs.addFormRef.resetFields();
    },
    addUser() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
</style>

:rules="addFormRules" 表单绑定验证对象
prop="" 绑定验证属性