vue--自定义指令进行验证(1)
实例代码:
<template>
<div id="app" class="app">
<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]*$/)'">
</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: 'App',
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(event){
if(el.value == '' || el.value == null){
el.style.border = "1px solid red";
console.log('我不能为空');
};
});
}
},
// 验证指令
checked:{
inserted: function(el){}
},
// 验证
validate: {
inserted:function(el,validateStr){
// 将验证规则拆分为验证数组
let validateRuleArr = validateStr.value.split("|");
// 监听失去焦点的时候
el.addEventListener('blur',function(event){
//失去焦点进行验证
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>
#app{}
.input{padding-bottom:20px;}
.app input{width: 300px; height: 35px; outline:none; background:#ddd;}
.app 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--自定义指令进行验证(1)的更多相关文章
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
随机推荐
- 关于HTML标签嵌套的问题详解
先说基础,HTML标签有两类: 1.块级元素 div.h1~h6.address.blockquote.center.dir.dl.dt.dd.fieldset.form.hr.isindex.men ...
- 安装MySQL-python: EnvironmentError:mysql config not found
1执行 sudo yum install python-devel 2 find / -name mysql_config 在/usr/bin/下发现了这个文件 3. 后修改MySQL-python- ...
- c#直接调用ssis包实现Sql Server的数据导入功能
调用ssis包实现Sql Server的数据导入功能网上已经有很多人讨论过,自己参考后也动手实现了一下,上一次笔者的项目中还用了一下这个功能.思前想后,决定还是贴一下增强记忆,高手请54. 1.直接调 ...
- mysql字段集合中如何去除其中一个元素
在一对多方案中,我们用逗号拼接进行存储,避免存储多条,或者分表,那么此时出现了存储上如果需要修改的话 就带来了难度,比如规则记录表如下 如果2号规则被删除,那么这张表的所有有2的记录也要被清除掉,此时 ...
- DokuWiki 开源wiki引擎程序
DokuWiki是一个开源wiki引擎程序,运行于PHP环境下.DokuWiki程序小巧而功能强大.灵活,适合中小团队和个人网站知识库的管理. 官网:https://www.dokuwiki.org/ ...
- 为啥RESTFULL如此重要?
为啥RESTFULL如此重要? 2014-6-3 20:13| 发布者: admin| 查看: 57| 评论: 0|来自: java365 摘要: 本文我们将讨论REST,它定义了一组体系架构原则,您 ...
- java web当中表单提交到后台出现乱码的解决方法
1.如果提交方式为post,想不乱码,只需要在服务器端设置request对象的编码即可,客户端以哪种编码提交的,服务器端的request对象就以对应的编码接收,比如客户端是以UTF-8编码提交的,那么 ...
- 开启mysql远程连接访问权限的几种方法
1.改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...
- Python进阶 学习笔记(三)
(涉及内容:定制类) __str__和__repr__ 如果要把一个类的实例变成 str,就需要实现特殊方法__str__(): class Person(object): def __init__( ...
- linux个性化定制登录信息
1./etc/motd /etc/motd即messageoftoday(布告栏信息),每次用户登录时,/etc/motd文件的内容会显示在用户的终端.系统管理员可以在文件中编辑系统活动消息,例如:管 ...