js-手机号码验证
之前做表单时遇到需要进行手机号码的验证的情况。粗心的我在<a-input>里面写了type="number",最后测试的时候发现不对劲,我查了下资料并将其更改过来,过程如下首先我使用的ant-design-vue的a-input结合v-decorator,<template>...<a-form-item><a-inputallowClearplaceho
·
之前做表单时遇到需要进行手机号码的验证的情况。起初的我在<a-input>里面写了type="number"加限制位数就草草了事了,自测的时候发现不对劲,我输入小数点竟然也能输入通过,最后我查了下资料并将其更改过来,过程如下
首先我使用的ant-design-vue的a-input结合v-decorator,利用设置rules里面的required属性来将其定义为必填选项。在后面加上个验证函数。
<template>
...
<a-form-item>
<a-input
allowClear
placeholder="请输入联系方式"
v-decorator="[
'phone',
{
rules: [
{ required: true, message: '联系方式不能为空' },
{validator: check}
],
},
]"
></a-input>
</a-form-item>
</template>
之后的js中写入以下函数:
check(rule, value, callback) {
if (!value || value === '') {
callback()
}
else {
const regex = /^1[3456789]\d{9}$/;//使用此正则即可
if (!regex.test(value)) callback(new Error('请输入正确手机格式'))
else callback()
}
}
这样就大功告成啦!
更多推荐
已为社区贡献3条内容
所有评论(0)