Vue+Element-UI表单验证

实现效果如下：

<template>
  <div class="body">
    <!-- 注册表单 -->
    <el-form ref="form" :model="form" class="form" :rules="rules">
      <!-- 账号 -->
      <el-form-item label="账号" label-width="80px" prop="account">
        <el-input v-model="form.account" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码" label-width="80px" prop="password">
        <el-input
          v-model="form.password"
          placeholder="密码需同时包含数字与字母，至少8位"
        ></el-input>
      </el-form-item>
      <!-- 确认密码 -->
      <el-form-item label="确认" label-width="80px" prop="confirm">
        <el-input v-model="form.confirm" placeholder="请确认密码"></el-input>
      </el-form-item>
      <!-- 登录按钮 -->
      <el-form-item>
        <el-button type="primary" @click="register" class="button"
          >注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        account: "",
        password: "",
        confirm: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: this.validateAccount, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: this.validatePassword, trigger: "blur" },
        ],
        confirm: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: this.validateConfirm, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 注册
    register() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("注册！");
        }
      });
    },
    // 手机号校验
    validateAccount(rule, value, callback) {
      const reg = /^[1][3-9][0-9]{9}$/;
      if (value === "" || value === undefined || value == null) {
        callback();
      } else {
        if (!reg.test(value) && value !== "") {
          callback(new Error("请输入正确的手机号码"));
        } else {
          callback();
        }
      }
    },
    // 密码校验
    validatePassword(rule, value, callback) {
      if (!/^(?=.*[A-Za-z])(?=.*\d).{8,}$/.test(value)) {
        callback(new Error("密码需同时包含数字与字母，至少8位"));
      } else {
        callback();
      }
    },
    // 确认密码校验
    validateConfirm(rule, value, callback) {
      if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    },
  },
};
</script>

<style scoped>
.body {
  position: fixed;
  width: 100%;
  height: 100%;
}

.form {
  width: 30%;
  margin: 7% auto;
  padding-right: 45px;
  padding-top: 2%;
  padding-bottom: 2%;
  border-radius: 5px;
  box-shadow: 0 0 5px 1px #999;
}

.button {
  width: 91.5%;
  margin-left: 45px;
  margin-top: 2%;
}
</style>

在这个例子中，通过在 data 中添加 rules 属性来定义表单验证规则，然后在模板中使用 :rules 属性将这些规则应用到相应的表单项上。validateAccount、validatePassword 和 validateConfirm 是自定义的验证方法，用于验证密码和确认密码的规则。最后，在注册按钮点击时，通过 this.$refs.form.validate() 来触发表单验证。