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

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

在这里插入图片描述

使用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;
    },

猜你喜欢

转载自blog.csdn.net/weixin_45108907/article/details/112271246
今日推荐