前言前段时间，老大搭好了Vue的开发环境，于是我们愉快地从JQ来到了Vue。这中间做的时候，在表单验证上做的不开心，看到vue的插件章节，感觉自己也能写一个，因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢？ vue-validator呀。我想了下，一个是表单验证是个高度定制化的东西，这种网上找到的插件为了兼顾各个公司的需求，所以加了很多功能，这些我们不需要。事实证明，vue-validator有50kb，而我写的va.js只有...
这段时间开发的时候使用到了这个表单校验插件，用起来比较麻烦就不说了，还有较严重的缺陷。自己最终还是抽空把这个插件进行了一些优化，虽然优化的方式和当初自己定下的方向不怎么相同，但是就使用体验上来说还是提高了很多。 1. 实际开发中遇到的问题 在上面的文章中提及了一些表单插件的问题，主要针对的是插件开发本身存在的问题。下面我总结下使用中存在的问题: 每个使用表单校验的元素都需要添加 v-check 类名，比较麻烦。 必...
这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。 1.vue插件开发 关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和loading，messageBox插件都是利...
综述名称：vee-validate 用途：简单的 Vue.js 表单验证插件 官网：地址 github:地址特别提示配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面，通用性强安装单页安装npm install vee-validate --save浏览器安装 <!-- unpkg --><script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script> 引入项目单页引入import Vue from vue; import VeeValidate from vee-vali...
前言 很久没有写文章了，学习了一下webpack，基础的一些组件，今天带来form表单验证组件（element.iviewui）的一期教程（作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 （QQ群技术讨论）838293023备注（github进来的 github 技术文档 技术文档会持续更新 效果图 1.原理解释考虑 我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂，没关系继续往下看。 2.派发和...
vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法 子组件： //内容部分<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"><FormItem label="Age" prop="age"><Input type="text" v-model="formCustom.age" number></Input></FormItem><FormItem><Button type="primary" @click="handleSubmit(formCustom)">Submit</Button><Button @click="handleReset(formCustom)" style="marg...
vue-form-check （基于vue的表单验证）具体实现代码如下所述： 安装 // 安装 npm i vue-form-check -S引用 // 引用(eg. 在工程的main.js下) import vueFormCheck from vue-form-check Vue.use(vueFormCheck)调用 this.$checkForm(current, config) @params current 是当前校验对象 config 是校验规则对象 config.alias 别名 config.type 配置项数据类型 config.required 是否必填 config.rule 正则校验 config.depend 先决...
最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！ 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ，基于此封装了一些 可复用的代码。 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 。双剑合璧 天下无...
亲测可用 学习vee-validate，首先可以去阅读官方文档，更为详细可以阅读官网中的规则。 一、安装 您可以通过npm或通过CDN安装此插件。 1. NPM npm install vee-validate --save2. CDN <script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script> <script>Vue.use(VeeValidate); // good to go. </script>或者你可以使用ES6导入它： import Vue from vue; import VeeValidate from vee-validate;Vue....
在登入页面，我们往往需要通过输入验证码才能进行登入，那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步：自定义一个生产随机验证码的组件，其本质是使用canvas绘制，详细代码如下： <template><div class="s-canvas"><canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas></div> </template> <script> export default {name: SIdentify,props: {identifyCode: {type: String,de...
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 ?html中给el-form增加 :rules="rules" ?html中在el-form-item 中增加属性 prop="名称" ?js中直接在data中定义rules:{} ?html部分 <el-form ref="form" :rules="rules" :model="form" label-width="300px"><el-form-item label="发货地址：" prop="fAdderss"><el-input class="inp" v-model="form.fAdderss" auto-complete="true"></el-input><el-button type="prima...
前端项目中经常会下拉或者选项卡，如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义，而且都写在一起后人很难维护。 Vue核心在于组件，如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。如图： selects文件夹中，index只负责公共数据（当然公共数据也可以写在其他文件，只留一个入口文件），而comp文件夹中的几个组件则通过动态加载。 动态加载子组件：component // 给下拉框绑定下拉列表的索引...
初学框架vue搭配vux使用发现这个UI库使用有些力不从心。下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。 1.使用x-input组件可知，官方只给了三种类型的is-type验证器，分别是：email,china-name,china-mobile，其他需要自己自定义验证器，怎么写验证器？ 解决方法：自定义is-type验证器（试验过可以在valid使用正则验证） <x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />...
Vue项目遇到要表单验证了吧，对我来说表单验证是个很纠(dan)结(teng)的内容，各种判断凌乱到飞起。往常使用jquery的validate插件做表单验证方便吧，你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍，点击查看)。但是我们是做vue项目也，不到实在解决不了还是建议不要引入，因为Vue自己就有表单验证的插件，那就是vee-validate。 我在这并不是详细讲解vee-validate的使用功能，只是快速了解如何在项目...
绑定的值与规则指定的值一定要相同------- 第一步： <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">加上rules ref 第二部： <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>加上prop 第三部： rules: { name: [ { required: true, message: 请输入活动名称, trigger: blur }, { min: 3, max: 5, message: 长...