自定义验证

html

<!-- 表单 -->
      <el-form :model="user" ref="userForm" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="user.username" prefix-icon="el-icon-user" clearable
            >></el-input
          >
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="user.password"
            type="password"
            prefix-icon="el-icon-lock"
            clearable
            show-password
            >></el-input
          >
        </el-form-item>

        <el-form-item class="btn">
          <el-button
            type="primary"
            size="small"
            @click="submitForm('userForm')"
            :loading="loading"
            >{{ loading ? "登录中" : "登录" }}</el-button
          >
          <el-button size="small" @click="resetForm('userForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

js

import { validateName, validatePass } from "./validation.js";
import login from "@/api/login.js";

export default {
  name: "Login",
  data() {
    return {
      // 用户数据
      user: {
        username: "student",
        password: "123",
      },
      // 表单验证
      rules: {
        username: [{ validator: validateName, trigger: "change" }],
        password: [{ validator: validatePass, trigger: "change" }],
      },
      //登录loading
      loading: false,
    };
  },
  methods: {
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 登录
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return false;
        this.loading = true;
        const loginVl = await login(this.user);
        this.loading = false;
        if (loginVl.meta.code != 1) return this.$message.error("登录失败");
        this.$message.success("登录成功");
        this.$router.push("/home");
        
      });
    },
  },
};

验证规则validation.js文件

// 表单验证
export function validateName(rule, value, callback) {
    let rules = /^[a-zA-Z0-9_-]{2,10}$/;
    if (value === '') {
        callback(new Error('账号不能为空'));
    } else if (!rules.test(value)) {
        callback(new Error('账号为2到10位(字母，数字，下划线，减号)'));
    } else {
        callback()
    }
}

export function validatePass(rule, value, callback) {
    if (value === '') {
        callback(new Error('密码不能为空'));
    } else {
        callback()
    }
}