怎么给HTMLform表单submit按钮绑定在pattern验证成功后才会执行的click事件函数?

Question

问题描述

HTMLform表单使用了pattern属性,同时还给submit按钮绑定click事件函数,我想在pattern验证成功后,点击submit按钮函数才会执行.怎么兼顾.

问题出现的环境背景

Form表单是用来登录的
我的想法是表单提交成功后,根据服务器的返回值操作localStorage用来记住登陆信息.但是如果给submit按钮添加click相应函数后,不论pattern验证结果是什么,他都会在每次点击后都执行这个函数,而我只想在所有表单内容通过pattern验证后点击按钮才会执行click事件函数
然后这个思路对吗?有什么解决方法吗?

相关代码

vue methods

methods: {
      hello() {
        console.log("我自己又执行了")

      }
    }

Html form 提交按钮

 <button type="submit" class="btn" id="submit" @click=hello>提交</button>

实际看到的错误信息是什么

Answer 1

Form 本身有 checkValidity 方法，你可以在 click 事件里先调一遍，验证通过了再继续执行业务逻辑。

但说实话，你用 vue 最好就别用 pattern 了，很鸡肋，vue 有大把的组件库做表单验证。