antd 自定义表单校验规则

最新推荐文章于 2024-04-21 11:48:20 发布

魏小菜

最新推荐文章于 2024-04-21 11:48:20 发布

阅读量604

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_44473684/article/details/127807347

版权

html部分

<a-form-item name="username">
   <a-input v-model:value="loginForm.username" :bordered="false" placeholder="请输入手机号">
      <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
   </a-input>
</a-form-item>

js部分

// 自定义校验规则
let regPhone = /^(13\d|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18\d|19[0-35-9])\d{8}$/
// 自定义表单验证
let phoneReg = async (_rule: any, value: any) => {
    if (!value) {
        return Promise.reject('请输入手机号')
      }
    if (!regPhone.test(loginForm.username)) {
        return Promise.reject('请输入正确的手机号')
      } else {
         return Promise.resolve()
      }
    }
 // 表单验证
const formRules = {
    username: [{ required: true, validator: phoneReg, trigger: 'blur' }],
    password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
              ]
}