vue+element-ui 自定义表单校验（用户名、密码）

最新推荐文章于 2025-07-10 20:06:27 发布

M-Didid

最新推荐文章于 2025-07-10 20:06:27 发布

阅读量1.3w

点赞数 15

CC 4.0 BY-SA版权

分类专栏： Vue.js学习文章标签：表单输入校验 vue+element-ui

本文链接：https://blog.youkuaiyun.com/qq_41251187/article/details/98609224

Vue.js学习专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element-UI进行表单验证，包括密码、手机号、用户名等字段的自定义验证规则实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue密码、手机号、用户名输入验证

1、表单中设置prop ref 和 :rules（详情见element-ui官网）用来设置验证规则,如下：

  <el-form ref="ruleForm" :rules="rules"  :model="formData" label-position="left" label-width="100px">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="formData.username" type="text" :disabled="dialogStatus==='update'? true : false"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="formData.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword" >
          <el-input v-model="formData.repassword" type="password" autocomplete="off"></el-input>
        </el-form-item>       
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" type="text" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" type="text" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

2、在data中写下具体规则，element-ui中的功能不太齐全，需要自定义，我们主要看怎么去实现自定义规则，先上rule代码

rules: {
        username: [
          { required: true, validator: validUsername, trigger: "blur" }
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" }
        ],
        repassword: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        mobile: [
          { required: true, validator: validPhone, trigger: "blur" },
          { min: 11, max: 11, trigger: "blur" }
        ],
        email: [
          { required: true, message: "必填", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱！", trigger: "blur" }
        ]
      },

代码中的validator: validUsername、validator: validatePass都是属于自定义的规则，validUsername和validatePass，validPhone,需要我们自己定义，如下：

var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!isvalidPass(value)) {
        callback(
          new Error("密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线")
        );
      } else {
        if (this.formData.repassword !== "") {
          this.$refs.ruleForm.validateField("repassword");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.formData.password) {
        callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };

    var validPhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请填写正确的手机号码"));
      }
    };

    var validUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (!isvalidUsername(value)) {
        callback(
          new Error(
            "用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为4-15个字符"
          )
        );
      }
    };

方法中有isvalidPass、isvalidPhone、isvalidUsername，这些需要我们自己写在js中，import到当前vue文件中来，如下：新建validate.js文件

在这里插入图片描述
js文件中的代码：

// 手机号验证
export function isvalidPhone(str) {
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
  return reg.test(str);
}

// 验证密码   密码，以字母开头，长度在8~18之间，只能包含字母、数字和下划线
export function isvalidPass(str) {
  const reg = /^[a-zA-Z]\w{8,18}$/;
  return reg.test(str);
}

//   验证用户名  用户名要求 数字、字母、下划线的组合，其中数字和字母必须同时存在*
export function isvalidUsername(str) {
  const reg = /^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{4,15}$/;
  return reg.test(str);
}

导入：

就可以啦！