vue 自定义指令input表单的数据验证
一、代码
<template>
<div class="check" >
<h3>{{msg}}</h3>
<div class="input">
<input type="text" v-input v-focus><span>{{msg1}}</span>
</div>
<div class="input">
<input type="text" v-input v-required><span>{{msg2}}</span>
</div>
<div class="input">
<!-- required：true/false 表示这个是必填项 -->
<input type="text" v-input v-checked="{required:true,}"><span>{{msg3}}</span>
</div>
<div class="input">
<!-- <input type="text" v-input v-validate="'required|email|phone|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'">
required 验证是否是必填项
email 验证是否是邮箱
phone 验证是否是电话号码
min(5) 验证最小值
max(3) 验证最大值
minlength(6) 验证最小长度
maxlength(12) 验证最大长度
regex(/^[0-9]*$/) 进行正则验证
-->
<input type="text" v-input
v-validate="'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'" placeholder="多选验证">
</div>
<div class="input">
<!--
验证必须是数字：/^[0-9]*$/
验证由26个英文字母组成的字符串：/^[A-Za-z]+$/
验证手机号： /^[1][3,4,5,7,8][0-9]{9}$/;
验证邮箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
-->
<input type="text" v-input v-validate="'required|phone'" placeholder="验证手机号码">
</div>
<div class="input">
<input type="text" v-input v-validate="'required|email'" placeholder="验证邮箱">
</div>
</div>
</template> <script>
export default {
name: 'check',
data() {
return {
msg: '指令',
tipsBorderColor: 'red',
msg1: '最简单的指令',
msg2: '验证不能为空的指令',
msg3: '进行正则验证',
tipsMsg: '',
}
}, directives: {
// 修饰input框的指令
input: {
// 当被绑定的元素插入到DOM上的时候
inserted: function (el) {
el.style.width = "300px";
el.style.height = "35px";
el.style.lineHeight = "35px";
el.style.background = "#ddd";
el.style.fontSize = "16px";
el.style.border = "1px solid #eee";
el.style.textIndent = "5px";
el.style.textIndent = "8px";
el.style.borderRadius = "5px";
}
},
// input框默认选中的指令
focus: {
inserted: function (el) {
el.focus();
}
},
// 不能为空的指令
required: {
inserted: function (el) {
el.addEventListener('blur', function () {
if (el.value == '' || el.value == null) {
el.style.border = "1px solid red";
console.log('我不能为空');
} })
}
},
// 验证指令
checked: {
inserted: function (el) {
return el
}
},
// 验证
validate: {
inserted: function (el, validateStr) {
// 将验证规则拆分为验证数组
let validateRuleArr = validateStr.value.split("|");
// 监听失去焦点的时候
el.addEventListener('blur', function () {
//失去焦点进行验证
checkedfun();
}); // 循环进行验证
function checkedfun() {
for (var i = 0; i < validateRuleArr.length; ++i) {
let requiredRegex = /^required$/; // 判断设置了required
let emailRegex = /^email$/; // 判断设置了email
let phoneRegex = /^phone$/; // 判断设置了 phone
let minRegex = /min\(/; //判断设置了min 最小值
let maxRegex = /max\(/; //判断设置了max 最大值
let minlengthRegex = /minlength\(/; //判断设置了 minlength 最大长度
let maxlengthRegex = /maxlength\(/; //判断设置了 maxlength 最大长度
let regexRegex = /regex\(/;
// 判断设置了required
if (requiredRegex.test(validateRuleArr[i])) {
if (!required()) {
break;
} else {
removeTips();
} } // 判断设置了email
if (emailRegex.test(validateRuleArr[i])) {
if (!email()) {
break;
} else {
removeTips();
} } // 判断设置了 phone
if (phoneRegex.test(validateRuleArr[i])) {
if (!phone()) {
break;
} else {
removeTips();
} } // 判断是否设置了最小值
if (minRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
} } // 判断是否设置了最大值
if (maxRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
} } // 判断设置了最小长度
if (minlengthRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
} } // 判断设置了最大长度
if (maxlengthRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
} } // 判断测试正则表达式
if (regexRegex.test(validateRuleArr[i])) {
if (!eval(validateRuleArr[i])) {
break;
} else {
removeTips();
} } } } // 验证是否是必填项
function required() {
if (el.value == '' || el.value == null) {
// console.log("不能为空");
tipMsg("不能为空");
return false;
} return true;
} // 验证是否是邮箱
function email() {
let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (!emailRule.test(el.value)) {
tipMsg("请输入正确的邮箱地址");
return false;
} return true;
} // 验证是否是手机号码
function phone() {
let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!phoneRule.test(el.value)) {
tipMsg("请输入正确的手机号码");
return false;
} return true;
} // 最小值验证
function min(num) {
if (el.value < num) {
tipMsg("最小值不能小于" + num);
//console.log('最小值不能小于'+num);
return false;
} return true;
} // 最大值验证
function max(num) {
if (el.value > num) {
tipMsg("最大值不能大于" + num);
//console.log('最大值不能大于'+num);
return false;
} return true;
} // 最小长度验证
function minlength(length) {
if (el.value.length < length) {
//console.log('最小长度不能小于'+length);
tipMsg("最小长度不能小于" + length);
return false;
} return true;
} // 最大长度进行验证
function maxlength(length) {
if (el.value.length > length) {
//console.log('最大长度不能大于'+length);
tipMsg("最大长度不能大于" + length);
return false;
}
return true;
} // 进行正则表达式的验证
function regex(rules) {
if (!rules.test(el.value)) {
tipMsg("请输入正确的格式");
return false;
}
return true;
} // 添加提示信息
function tipMsg(msg) {
removeTips();
let tipsDiv = document.createElement('div');
let curDate = Date.parse(new Date());
tipsDiv.innerText = msg;
tipsDiv.className = "tipsDiv";
tipsDiv.id = curDate;
tipsDiv.style.position = "absolute";
tipsDiv.style.top = el.offsetTop + 45 + 'px';
tipsDiv.style.left = el.offsetLeft + 'px';
document.body.appendChild(tipsDiv);
//setTimeout(function(){
// document.getElementById(curDate).remove();
//},2000);
} // 移除提示信息
function removeTips() {
if (document.getElementsByClassName('tipsDiv')[0]) {
document.getElementsByClassName('tipsDiv')[0].remove();
} }
},
}
}
}
</script> <style> .input {
padding-bottom: 20px;
float: left;
clear: both;
margin-left: 500px;
display: block; } .check input {
width: 300px;
height: 35px;
outline: none;
background: #ddd;
} .check span {
padding-left: 20px;
} .tipsDiv {
height: 27px;
line-height: 25px;
border: 1px solid #333;
background: #333;
padding: 0px 5px;
border-radius: 4px;
color: #fff;
font-size: 16px;
} .tipsDiv:before {
content: '';
display: block;
border-width: 0 5px 8px;
border-style: solid;
border-color: transparent transparent #000;
position: absolute;
top: -9px;
left: 6px;
}
</style>
vue 自定义指令input表单的数据验证的更多相关文章
- 自定义常用input表单元素三：纯css实现自定义Switch开关按钮
自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...
- django做form表单的数据验证
我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...
- vue自定义轻量级form表单校验
遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...
- 自定义常用input表单元素二：纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
- 自定义常用input表单元素一：纯css 实现自定义checkbox复选框
最下面那个是之前写的 今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...
- Vue自定义指令 数据传递
在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...
- Vue基础-自定义事件的表单输入组件、自定义组件的 v-model
Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
随机推荐
- LightOJ-1253-Misere Nim-nim博弈
Alice and Bob are playing game of Misère Nim. Misère Nim is a game playing on k piles of stones, eac ...
- day 87 DjangoRestFramework学习一之restful规范、APIview、解析器组件、Postman等
DjangoRestFramework学习一之restful规范.APIview.解析器组件.Postman等 本节目录 一 预备知识 二 restful规范 三 DRF的APIView和解析器组 ...
- html清除浮动的6种方法示例
使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签 由于inline-bl ...
- 《转》python 9 字典，numpy
http://www.cnblogs.com/BeginMan/p/3156960.html 一.映射类型 我理解中的映射类型是:键值对的关系,键(key)映射值(value),且它们是一对多的关系. ...
- 4-MySQL拆分表
如上图,将goods表中的cate_name字段拆分一个商品分类表goods_cates,步骤如下: 1,创建商品分类表-goods_cates; create table goods_cates( ...
- TFS 忽略 文件
原文链接:http://ju.outofmemory.cn/entry/258689 让TFS忽略packages文件夹的更改 很多时候我们需要使用 Nuget 进行包管理,这时在我们的解决方案文件夹 ...
- java运行字符串代码
本文链接:https://blog.csdn.net/junlong750/article/details/50945883
- [JZOJ1900] 【2010集训队出题】矩阵
题目 题目大意 题目化简一下,就变成: 构造一个\(01\)数列\(A\),使得\(D=\sum A_iA_jB_{i,j}-\sum A_iC_i\)最大. 问这个最大的\(D\)是多少. 正解 其 ...
- 「STL」bitset正传
前言 之前一些需要转二进制来解决的题目我看到很多大佬用了bitset. 然而我并不会这东西.看上去很高级的样子…… 改题改累了来学习一下233. 正文 一.bitset的构造 bitset有三种构造方 ...
- C/C++语言实现单链表（带头结点）
彻底理解链表中为何使用二级指针或者一级指针的引用 数据结构之链表-链表实现及常用操作(C++篇) C语言实现单链表,主要功能为空链表创建,链表初始化(头插法),链表元素读取,按位置插入,(有序链表)按 ...