前言:
在开发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>
...
这样写方便快捷,同样能达到校验效果