element el-input 手机号校验和邮箱校验

最新推荐文章于 2025-02-19 16:34:12 发布

原创最新推荐文章于 2025-02-19 16:34:12 发布 · 6.3k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

element 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中，利用Element UI的el-input组件进行手机号和邮箱的验证，包括正则表达式的使用及表单验证流程。

     ruleForm: {
        email: '',
        mobile: '',
      },
      rules: {    
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
           pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入正确的手机号码或者座机号',
          },
        ],
      },