前端表单验证交互_RealizeInnerSelf丶

未知 02-07 2987

文章目录前端表单验证交互效果1（暂未配套代码）使用 vue watch 与自定义 css 模仿 Vuelidate 框架官方表单验证效果代码（仅做思路参考）关于数据校验Vuelidatevalidator.jsVeeValidateVccValidate 补充知识

前端表单验证交互效果1（暂未配套代码）

使用 vue watch 与自定义 css 模仿 Vuelidate 框架官方表单验证效果

关键思路：（看了代码就能结合起来了）

动态监听输入内容的改变，动态校验其数据的合法性不合法，给元素添加 class，该 class 给 label、input 标签修改样式，并附带动画，并显示错误信息合法了，移除该 class，恢复默认样式，隐藏错误信息

如何在显示错误信息与不显示错误信息时不移动其他页面元素

没有信息时，输入框 margin-bottom 2rem有错误信息时，边框 margin-bottom 0rem，错误信息margin-bottom 2rem 代码（仅做思路参考）

里面还是有些冗余样式代码

其实 input 的 onchange 事件也可以做这么一件事

数据符合格式的展示样式 css 被我注释掉了

css 代码里的重要的是不同情况下的颜色变化（文字、边框）、动画（输入框晃动）（字体大小、之类的不重要）

<template> <div class="fatherDiv"> <div class="form-group" :class="{ 'form-group--error': showErr, 'form-group--success': dataOk }" > <label class="form__label">姓名</label> <input class="form__input" v-model="inputData" placeholder="请输入姓名..." /> </div> <div class="error" v-if="showErr">{{dataErrMsg}}</div> </div> </template> <script> export default { data() { return { showErr: false, inputData: "", dataOk: false, dataErrMsg: "", }; }, watch: { inputData: function (val, oldVal) { console.log("new: %s, old: %s", val, oldVal); // 在这里做一个数据的校验 if (val.length > 5) { this.showErr = true; this.dataOk = false; this.dataErrMsg = "最多支持4个字符哦~"; } else if (val.length < 1) { this.showErr = true; this.dataOk = false; this.dataErrMsg = "此字段为必填字段，请输入..."; } else { this.showErr = false; this.dataOk = true; } }, }, }; </script> <style scoped> .fatherDiv { text-align: start; width: 300px; margin: 0 auto; } /* --------- 默认状态 ----------- */ .form__label { font-size: 0.8125rem; color: #4b6372; margin-bottom: 0.3125rem; margin-left: 0.875rem; display: block; font-family: "Lato", sans-serif; } .form-group .form__input { margin-bottom: 0; } .form__input { font-family: "Lato", sans-serif; font-size: 0.875rem; font-weight: 300; color: #374853; line-height: 2.375rem; min-height: 2.375rem; position: relative; border: 1px solid #e8e8e8; border-radius: 5px; background: #fff; padding: 0 0.8125rem; width: 100%; transition: border 0.1s ease; box-sizing: border-box; outline: none; } /* 鼠标悬浮，输入框边框变色 */ .form__input:hover { border-color: #cfcfcf; } /* ----------- 错误相关样式 -------- */ .form-group--error { animation-name: shakeError; animation-fill-mode: forwards; animation-duration: 0.6s; animation-timing-function: ease-in-out; } @keyframes shakeError { 0% { transform: translateX(0); } 15% { transform: translateX(0.375rem); } 30% { transform: translateX(-0.375rem); } 45% { transform: translateX(0.375rem); } 60% { transform: translateX(-0.375rem); } 75% { transform: translateX(0.375rem); } 90% { transform: translateX(-0.375rem); } 100% { transform: translateX(0); } } .form-group--error .form__label, .form-group--error .form__label--inline { color: #f04124; } .form-group--error + .error { color: #f57f6c; } .form-group--error input, .form-group--error input:focus, .form-group--error input:hover { border-color: #f79483; /* 隐藏浏览器的聚焦边框效果 */ outline: none; } /* 正确样式-数据符合格式的样式，个人认为可以不设置 */ .form-group--success .form__label, .form-group--success .form__label--inline { color: #2eec96; } .form-group--success input, .form-group--success input:hover { border-color: #2eec96; outline: none; } /* .form-group--success input:focus { border-color: #cfcfcf; } */ </style> 关于数据校验

简单的自己校验，如果项目中有许多需要校验的字段，一般借助第三方框架去做

第三方框架有很多，暂时还没去系统学习，下面留个链接与相关博客

Vuelidate

vue官方推荐，有中文文档

基于vue.js 2.0表单验证vuelidate插件介绍及使用（好像有样式代码，图片展示）

validator.js

官网

element-ui 内置的验证框架，似乎很强

VeeValidate

vue官方推荐，官网

一顿了解下来，好像用的最多，更新也十分频繁，star 也很多

vue中使用vee-validator表单校验