element ui form表单验证

最新推荐文章于 2025-07-31 16:12:34 发布

weixin_58630147

最新推荐文章于 2025-07-31 16:12:34 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js es6

本文链接：https://blog.youkuaiyun.com/weixin_58630147/article/details/117332474

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在 Vue 的 Element UI 表单中使用自定义验证规则，通过正则表达式验证邮箱和手机号的有效性，确保用户输入的格式符合规范。

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

// 组件
<el-form :model="addFrom" :rules="addRuels">
         <el-form-item label="邮箱" label-width="70px" prop="email">
          <el-input autocomplete="off" v-model="addFrom.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="70px" prop="mobile">
          <el-input autocomplete="off" v-model="addFrom.mobile"></el-input>
        </el-form-item>
</el-form>


//
export default {

data() {
 var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }

      cb(new Error('请输入合法的邮箱'))
    }

    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
   retrun {
     addRuels: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
   }
}
}