vue3前端开发-小兔鲜项目-form表单的统一校验

vue3前端开发-小兔鲜项目-form表单的统一校验!实际上,为了安全起见,用户输入的表单信息,要满足我们的业务需求,参数类型等种种标准之后,才会允许用户向服务器发送登录请求。为此,有必要进行一次form表单的全局校验。也为后面的是否发送登录业务请求作为判定依据。


1:使用钩子函数,ref.获取到form的表单对象。

之前我分享的内容文章里介绍过这个ref是一个钩子函数,用它,可以获取到标签对象的内容。

2:给登录按钮绑定一个函数:doLogin

内容比较简单,看代码就懂了。


复制代码
//form实例对象的统一校验,
const formRef = ref(null)
const doLogin = ()=>{
    //调用实例方法
    formRef.value.validate((valid)=>{
        console.log(valid)
    })
}

有了这个基础数据,我们后面就可以写登录发送请求的判定逻辑了。

相关推荐
多看书少吃饭14 分钟前
从 ScriptProcessor 到 AudioWorklet:Electron 桌面端录音实践总结
前端·javascript·electron
user714226596457818 分钟前
react中useMemo和useCallback的使用场景
前端
JS_GGbond22 分钟前
前端水印实战:给你的页面穿上“隐形盔甲”
前端
Sthenia26 分钟前
如何用 Chrome DevTools 定位 Long Task:一份从零到实战的排查笔记
前端·性能优化
用户222645989434137 分钟前
CSS单位全解析:从像素到视口的响应式设计
前端
Mapmost38 分钟前
【实景三维】还再为渲染发愁?手把手教你大场景如何实现“精细”与“流畅”平衡!
前端
钱多多81040 分钟前
Vue版本降级操作指南(解决依赖冲突与版本不一致问题)
前端·javascript·vue.js·前端框架
门思科技40 分钟前
门思科技正式开放 ThinkLink 纯国产化物联网平台免费部署方案
javascript·科技·物联网
San3042 分钟前
深度解析 React 组件化开发:从 Props 通信到样式管理的进阶指南
前端·javascript·react.js
AAA阿giao43 分钟前
深度解析 React 项目架构:从文件结构到核心 API 的全面拆解
前端·javascript·react.js