vue+element-ui 自定义校验规则实现邮箱验证

最新推荐文章于 2024-06-07 11:14:03 发布

原创最新推荐文章于 2024-06-07 11:14:03 发布 · 9.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

本文介绍了一种在前端表单中实现自定义邮箱和手机号验证的方法，并提供了具体的代码示例。通过使用Vue.js中的el-form组件及自定义验证规则，确保用户输入的数据格式正确。

表单

  <div class="informa">
        <div class="tetli">经营者信息</div>
        <el-form-item label="门店负责人：" prop="contacts">
          <el-input v-model="ruleForm.contacts"  placeholder="请输入门店负责人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="contactPhone">
          <el-input v-model="ruleForm.contactPhone" placeholder="请输入联系方式" type="number"></el-input>
        </el-form-item>
        <el-form-item label="门店邮箱：" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </div>

在data中自定义邮箱和手机的验证规则

 data() {
    //自定义的邮箱和手机验证规则
    let checkEmail = (rule, value,callback) =>{//验证邮箱
      const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if(this.ruleForm.email != '' && !regEmail.test(this.ruleForm.email)) {
        callback(new Error('请输入有效的邮箱')); 
      }
    }
    return {
      rules: { 
         email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },
        		{validator: checkEmail, trigger: "blur" }]}
    }