vue中的表单手机号和邮箱自定义验证规则

最新推荐文章于 2025-02-24 15:09:48 发布

light多学一点

最新推荐文章于 2025-02-24 15:09:48 发布

阅读量2.1k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lucklymm/article/details/125806654

版权

本文介绍了在ElementUI或Element-Plus中进行表单验证的方法，特别是针对手机号和邮箱的自定义验证。通过在`el-form`中设置`rules`和`data`中的验证规则，利用`pattern`字段定义了手机号和邮箱的正则表达式，确保输入符合规范。在提交表单时，这些验证规则将自动触发，提供良好的用户体验。

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

前言

我们在开发过程中使用element UI 或者element-plus 中的表单的时候，会使用到表单验证，比如手机号和邮箱的验证；

手机号和邮箱的自定义验证

使用很简单，我们首先要在el-form中使用rules,然后再data中定义rules,使用pattern子定义验证逻辑字段

<el-dialog :title="title" v-model="open" width="720px" append-to-body>
      <el-form ref="useRef" :model="form" :rules="rules" label-width="100px">
		<el-row>
          <el-col :span="24">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入手机号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" clearable/>
            </el-form-item>
          </el-col>
          <el-row/>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">保 存</el-button>
        </div>
      </template>
    </el-dialog>
	  <script setup>
	  	const data = reactive({
		form = {
			mobile:undefined,
			email:undefined
		},
		rules: {
    		mobile:[{required:true,message: "请输入手机号码", trigger: "blur"},
      		{pattern:/(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
      		message: '输入的手机号码格式不正确，请重新输入',trigger:'blur'}],
    		email:[
      		{pattern:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
       		 message:'请输入正确的邮箱格式',trigger:'blur'}]
    		}
		});
	const {form} = toRefs(data);
	  <script/>