【vue插件篇】vue-form-check 表单验证
##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 是否必填、非空验证常用不同类型初始化为空条件1、number 类型: Infinity, -Infinity2、array 类型: []3、string 类型: ''4、object 类型: {}5、function 类型: new Function()// null 和 undefined 赋值之后就不是相应的类型,会不通过,不可用6、undefined 类型: undefined7、null 类型: null// 特殊情况,可通过将 boolean, regexp 转换为 string 类型进行验证8、boolean 类型: 初始化默认为false,无法触发非空检验9、regexp 类型: 初始化默认为/(?:)/,无法触发非空检验config.rule 正则校验
config.depend 先决条件(省事可以在callback里直接判断,推荐写,true校验本项;false不校验本项)
config.callback 灵活校验(rule同时出现,只处理callback,参数是当前值,true校验通过;false校验不通过)@return object 对象
不通过的话 {alias: '电话', type: 'rule'} alias是配置的别名,type可以是['type'|'required'|'rule']
校验通过的话 {} 空对象ps. 验证表单可以写在mixin里,这里简单处理直接写在组件里了
复制代码
Component
// 使用例子
new Vue({data() {return {params: {id: '1234',person: {name: 'jackie',age: '27',phone: '18266666666',home: ['罗湖区田心村']}}}},methods: {submit() {//...console.log('submit success');},check() {let obj = this.$checkForm(this.params, {id: {alias: 'id',type: 'string'},// 必填校验'person.name': {alias: '学校',type: 'string',required: true},// 正则校验'person.phone': {alias: '电话',type: 'string',rule: /^1[345678][0-9]{9}$/},// 灵活校验,如数值、日期区间验证'person.age': {alias: '年龄',callback(value) {if (value < 30 && value > 18) {return true;}return false;}},// 先决校验,如果电话等于以下,校验地址信息'person.home': {alias: '方向',type: 'array',required: true,depend() {if (this.params.person.phone === '18210517463') {return true;}return false;}}});const length = Object.keys(obj).length;if (length === 0) {return this.submit();}switch (obj.type) {case 'type':this.$alert(`${obj.alias}的类型定义错误`, '提示');break;case 'required':this.$alert(`${obj.alias}是必填项`, '提示');break;case 'rule':this.$alert(`${obj.alias}的输入不符合规范`, '提示');break;default:break;}}}
});
复制代码
【vue插件篇】vue-form-check 表单验证相关推荐
- 没有form的表单验证_PHP动态生成表单,内置17种常用组件并且支持表单验证!
FormBuilder 是一个开源的PHP表单生成器,可以快速生成现代化的form表单.还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件 github | 文档 环境需求 ...
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- Validation-jQuery表单验证插件使用方法
作用 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持. 使用前的布置 ...
- 使用 jQuery Validate 进行表单验证
jQuery Validate简介 jQuery Validate 插件提供了强大的表单验证功能,能够让客户端表单验证变得更简单,同时它还提供了大量的可定制化选项,以满足应用程序的各种需求.该插件捆绑 ...
- react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
- flask-wtf表单验证--修改邮箱密码
一.介绍 使用Flask-wtf可以很方便用户进行对应字段的验证,即验证过程自动化,使用主要包含三个步骤: 创建 Flask-wtf 表单,设置相关的属性和验证条件 在前端利用form直接显示对应 ...
- JavaScript通用表单验证函数
表单定义: < form name = " form1 " action = "" style = " behavior:url('form ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
最新文章
- Linux环境thinkphp配置以及数据源驱动修改
- PNAS顶刊文:情侣分手3个月前就有预兆!聊天记录还能反映分手后遗症
- PMP知识点(九、风险管理)
- 解决vscode安装后无法启动的问题
- 基于规则的应用程序开发实战(转载与MSDN)
- Apache Spark 2.0: 机器学习模型持久化
- 交互规则_您必须永不中断的10条交互设计规则
- day38-数据库应用软件
- 开源软件史上最大收购案!IBM340亿美元收购Linux分销商Red Hat
- MyBatis使用动态SQL语句
- RN开发系列<8>--Redux(1)入门篇
- JAVA实现网页版斗地主_Java实现斗地主案例
- MATLAB绘制奈奎斯特图:nyquist命令
- 服务器安装谷歌浏览器
- Win10下安装centos7双系统
- 《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》——1.2 微信公众账号注册...
- python 网格策略_Python版简单网格策略
- input标签绑定click事件无反应
- 【初等数论】整除、公约数、同余与剩余系
- 发布golang第三方包