vue 表单rules验证邮箱，手机号

最新推荐文章于 2024-06-04 14:59:00 发布

张云，

最新推荐文章于 2024-06-04 14:59:00 发布

阅读量958

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/buzhidjiaosha/article/details/132275869

版权

本文介绍了在前端使用ElementUI实现邮箱和手机号输入框的验证，包括正则表达式规则和异步验证机制，确保用户输入的有效性。

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

验证邮箱，手机号

 <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
    <el-form-item label="邮箱" class="email" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
       <el-form-item label="手机号" class="phone" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
 </el-form>


  data() {
    var checkPhone = (rule, value, callback) => {
      const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
      setTimeout(() => {
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error('请请正确输入手机号码!'))
        }
      }, 100)
    }
    var checkEmail = (rule, value, callback) => {//邮箱校验
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空!'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式!'))
          }
        }, 100)
    }
    return {
	    Rules: {
	  		email: [{ required: true, trigger: 'blur', validator: checkEmail }],
	        phone: [{required: true, trigger: 'blur', validator: checkPhone }],
		}
	}
  },