antd-vue form 表单手机号验证

清云随笔

于 2023-11-03 16:35:18 发布

阅读量1k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/zq18877149886/article/details/134206264

版权

本文介绍了如何在Vue3中使用Vuetify组件和自定义规则，对手机号输入进行实时验证，包括必填项和格式检查，并利用`useForm`和`validate`函数处理验证过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


      <a-form-item label="手机号" v-bind="validateInfos.phone_number">
        <a-input
          placeholder="请输入手机号"
          v-model:value="modelRef.phone_number"
        ></a-input>
      </a-form-item>


const rulesRef = reactive({
  phone_number: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change", // 触发校验的时机，这里设置为失焦时校验
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入有效的手机号",
      trigger: "change",
    },
  ],
});


const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
  onValidate: (...args) => console.log(...args),
});

async function onSubmit() {
  try {
    let res = await validate();
  } catch (error) {
    console.log("error", error);
    return false;
  }
}