vant组件使用van-field解决邮箱校验问题

最新推荐文章于 2022-10-08 15:01:02 发布

weixin_45108907

最新推荐文章于 2022-10-08 15:01:02 发布

阅读量5.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45108907/article/details/112271246

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在 vant 组件库中使用 van-field，结合 formatter 方法，实现用户输入邮箱时的实时校验，确保用户在返回上一页时仍能保留正确的编辑资料。

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

需求：用户在返回到上一页的时候，保存用户的编辑资料，所以用户在输入邮箱的时候，校验是否正确

在这里插入图片描述

使用van-field

 <van-form>
	 <van-field
	       maxlength="25"
	       v-model="param.email"
	       label="邮箱"
	       placeholder="请输入邮箱ID"
	       :formatter="formatter"
	       :error-message="errorText"       
	        />
  </van-form>

用formatter做校验即可

 formatter(val) {
      const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;

      if (!val) return '';
      // return reg.test(val);
      if (!reg.test(val)) {
        this.errorText = '请输入正确的邮箱';
      } else {
        this.errorText = '';
      }
      return val;
    },