Vue前端验证一个text只能输入手机号或邮箱

最新推荐文章于 2024-08-13 16:30:10 发布

LiLi_code

最新推荐文章于 2024-08-13 16:30:10 发布

阅读量1.9k

点赞数 1

分类专栏： Vue 文章标签： Vue前端邮箱验证手机号验证

本文链接：https://blog.csdn.net/LiLi_code/article/details/98069091

版权

这篇博客分享了如何在Vue项目中使用Element-UI进行文本输入验证，特别是针对手机号和邮箱的验证规则设定，提供了具体的代码示例。

摘要由CSDN通过智能技术生成

直接上代码：

element-ui 内部 text：

<el-form-item prop="username">
      <el-input v-model="ruleForm.username" placeholder="用户名" autofocus> </el-input>
</el-form-item>

检查对象：

let checkPhoneOrEmail = function (rule,value,callback) { //这个对象同时校验phone和email
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; //邮箱验证
        const reg = /(^1\d{10}$)|(^[0-9]\d{7}$)/; //手机号验证
        if (! value) {
          return callback(new Error('用户名不能为空'))
        }else{
          if(value.indexOf("@") > 0 ){ //含有字母@
            setTimeout(() => {
              if (mailReg.test(value)) {
                callback()
              } else {
                callback(new Error('邮箱格式不正确'))
              }