vue---表单校验rules校验电话号码、邮箱等

最新推荐文章于 2025-03-06 15:18:36 发布

maidu_xbd

最新推荐文章于 2025-03-06 15:18:36 发布

阅读量1.3w

点赞数 15

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/maidu_xbd/article/details/104494321

版权

vue 专栏收录该内容

107 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用el-form组件结合自定义校验规则进行表单验证，包括用户名、姓名、密码、手机号及邮箱的格式检查。

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

如下为el-form加入rules检验【:rules="userInfoFormRules"】

规则定义如下：

export default {
  data() {
    return {
userInfoFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          },
          {
            validator: function(rule, value, callback) {
              if (
                /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                  value
                ) == false
              ) {
                callback(new Error("邮箱格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      
    };
  }
}

也可以从外部引入校验规则，参考：vue---表单校验-rules外部引入自定义校验(validator)