vue3 |
您所在的位置：网站首页 › vee手机密码 › vue3 |
vue3
|
前言
为什么要进行表单校验呢？不进行表单校验会有什么危害？如何进行表单校验呢？带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~ 一、表单校验的意义 当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作 可以让用户的信息都按一定的规则来设置，方便统一管理 通过表单校验可以有效地规避不法分子进行危险输入 二、如何对表单进行校验？这里使用一个专门做表单校验的第三方包，文档：vee-validate 支持vue3.0 1. 准备在项目根目录下打开任意终端，执行命令：npm i [email protected] 2. 步骤 使用第三包提供的Form标签将表单整个区域包裹起来 使用第三方包提供的Filed标签将输入框的input替换掉 如果表单需要校验，那么必须有name属性 将校验规则通过rules绑定到需要校验的Field标签上 当用户输入的内容未通过验证规则时，错误信息是从Form标签上的插槽中解构出来的 3. 使用在任意.vue结尾的文件中 这里用到了之前封装的按钮组件和消息提示组件，各位可以点击链接看一下是如何封装的 代码如下（示例）： {{ errors.account }} {{ errors.password }} 登录 import { Form, Field } from 'vee-validate' import { ref, reactive, getCurrentInstance } from 'vue' export default { name: 'App', components: { Field, Form }, setup() { const instance = getCurrentInstance() const target = ref(null) // 表单数据 const form = reactive({ // 用户名 account: null, // 密码 password: null }) // 定义表单-用户名验证规则 const checkAccount = value => { // value是将来使用该规则的表单元素的值 // 1. 必填 // 2. 6-20个字符，需要以字母开头 // 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。 if (!value) return '请输入用户名' if (!/^[a-zA-Z]\w{5,9}$/.test(value)) return '字母开头且6-20个字符' return true } // 密码验证规则 const checkPwd = value => { if (!value) return '请输入密码' if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符' return true } // 点击登录 const handleLogin = async () => { const valid = await target.value.validate() if (valid) { // 表单验证通过，调用接口实现登录 // 以下为演示代码 return instance.proxy.$message({ text: '验证通过', type: 'success' }) } } return { target, form, checkAccount, checkPwd, handleLogin } } } // 账号容器 * { box-sizing: border-box; } .form { margin: 100px auto; padding: 50px; width: 500px; border: 1px solid #ccc; &-item { margin-bottom: 28px; .input { position: relative; height: 40px; outline: none; > i { width: 35px; height: 35px; background: #cfcdcd; color: #fff; position: absolute; left: 0; top: 0; text-align: center; line-height: 34px; font-size: 18px; } input { padding-left: 44px; border: 1px solid #cfcdcd; outline: none; height: 36px; line-height: 36px; width: 100%; &.error { border-color: #ff3040; } &.active, &:focus { border-color: skyblue; } } } > .error { position: absolute; font-size: 12px; line-height: 28px; color: #ff3040; i { font-size: 14px; margin-right: 2px; } } } .btn { float: right; } }注：以上为演示代码 校验规则较多的时候，可以将校验规则单独放入一个文件中管理，然后在需要使用的文件中导入使用即可 校验通过后需要进行的步骤，各位根据实际需求书写即可。 三、结果演示Rome was not built in a day. |
【本文地址】
今日新闻 |
推荐新闻 |