vue Element表单预验证

表单完整代码：

	<!-- 登陆表单 -->
      <el-form
        :model="form"
        :rules="login_rules"
        ref="form"
        label-width="0px"
        class="login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item  prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-key"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="login_btns">
          <el-button
            type="primary"
            @click="submitForm()"
            round
          >登陆</el-button>
          <el-button
            type="info"
            @click="resetForm()"
            round
          >重制</el-button>
        </el-form-item>
      </el-form>

绑定的完整代码

data() {
    return {
      url_logo: require("../assets/logo.png"),
      form: {
        username: "admin",
        password: "admin",
      },
      login_rules: {
        username: [
          { require: true, message: "请输入账号", trigger: "blur" },
          { min: 5, max: 10, message: "请输入5到10位账号", trigger: "blur" },
        ],
        password:[
          { require: true, message: "请输入账号", trigger: "blur" },
          { min: 5, max: 10, message: "请输入5到10位账号", trigger: "blur" },
        ],
      },
    };
  },
 methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
        this.$refs.form.resetFields();
    }
  },

先来看登陆表单

	<!-- 登陆表单 -->
      <el-form
        :model="form"
        :rules="login_rules"
        ref="form"
        label-width="0px"
        class="login_form"
      >

解析：

1.其中rules绑定login_rules 即

login_rules: {
        username: [
          { require: true, message: "请输入账号", trigger: "blur" },
          { min: 5, max: 10, message: "请输入5到10位账号", trigger: "blur" },
        ],
        password:[
          { require: true, message: "请输入账号", trigger: "blur" },
          { min: 5, max: 10, message: "请输入5到10位账号", trigger: "blur" },
        ],
      },

require: true 表明不弄为空 trigger:“blur” 为当失去焦点的时候检验
详细编写规则参考
中文翻译的编写规则
英文原文的编写规则

2.其中ref即把本form放进$refs里面，并且以login_rules命名
即:ref=“form”

在下面的代码中引用方法：
this.$refs.form.xxxx操作

再看submitForm

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

this.$refs.form即刚刚在ref中放进的对象，可以直接引用