当前位置: 首页> 汽车> 车展 > H5项目使用vant组件的手机号校验

H5项目使用vant组件的手机号校验

时间:2025/7/27 2:22:16来源:https://blog.csdn.net/weixin_47389477/article/details/140157596 浏览次数: 0次

前言:
在开发h5项目的时候遇到手机号校验,原本想采用后台管理那种校验方式(validator函数写校验手机号逻辑)猛然间发现,可以在使用行内使用pattern属性

在这里插入图片描述

用法如下

<van-form @submit="onSubmit"><van-cell-group inset><van-fieldv-model="userPhone"name="手机号"label="手机号"placeholder="手机号":rules="[{ required: true, message: '请填写手机号' },{message:'手机格式错误',pattern:new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)}]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/></van-cell-group><div style="margin: 16px;"><van-button round block type="primary" native-type="submit">提交</van-button></div>
</van-form>
...

这样写方便快捷,同样能达到校验效果

关键字:H5项目使用vant组件的手机号校验

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: