vue实现表单数据验证的实例代码

vue实现表单数据验证的实例代码

本文主要介绍vue验证表单数据的示例代码。本文通过示例代码给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。

添加:el-form表单规则

定义数据中的规则

将定义的规则绑定到el表单项目

代码如下:

<!--登录表单区域--> <el-form:model="loginForm"label-width="0px"class="login_form":rules="loginFormRules"> <!--用户名--> <el-form-itemprop="username"> <el-inputv-model="loginForm.username"prefix-icon="el-icon-user"></el-input> </el-form-item> <!--密码--> <el-form-itemprop="password"> <el-inputv-model="loginForm.password"prefix-icon="el-icon-lock"type="password"></el-input> </el-form-item> <!--按钮区域--> <el-form-itemclass="btns"> <el-buttontype="primary">登录</el-button> <el-buttontype="info">重置</el-button> </el-form-item> </el-form> <script> exportdefault{ data(){ return{ //登录表单数据绑定对象 loginForm:{ username:'', password:'' }, //表单验证规则 loginFormRules:{ //验证用户名是否合法 username:[ {required:true,message:'请输入用户名',trigger:'blur'}, {min:3,max:10,message:'长度在3到10个字符',trigger:'blur'} ], //验证密码是否合法 password:[ {required:true,message:'请输入密码',trigger:'blur'}, {min:6,max:15,message:'长度在6到15个字符',trigger:'blur'} ] } } } } </script>

PS:我们来看看vue自定义指令输入表单中数据验证的代码

一、代码

<template> <divclass="check"> <h3>{{msg}}</h3> <divclass="input"> <inputtype="text"v-inputv-focus><span>{{msg1}}</span> </div> <divclass="input"> <inputtype="text"v-inputv-required><span>{{msg2}}</span> </div> <divclass="input"> <!--required：true/false表示这个是必填项--> <inputtype="text"v-inputv-checked="{required:true,}"><span>{{msg3}}</span> </div> <divclass="input"> <!--<inputtype="text"v-inputv-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]*$/)进行正则验证 --> <inputtype="text"v-input v-validate="'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'"placeholder="多选验证"> </div> <divclass="input"> <!-- 验证必须是数字：/^[0-9]*$/ 验证由26个英文字母组成的字符串：/^[A-Za-z]+$/ 验证手机号：/^[1][3,4,5,7,8][0-9]{9}$/; 验证邮箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; --> <inputtype="text"v-inputv-validate="'required|phone'"placeholder="验证手机号码"> </div> <divclass="input"> <inputtype="text"v-inputv-validate="'required|email'"placeholder="验证邮箱"> </div> </div> </template> <script> exportdefault{ 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="1pxsolid#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="1pxsolidred"; console.log('我不能为空'); } }) } }, //验证指令 checked:{ inserted:function(el){ returnel } }, //验证 validate:{ inserted:function(el,validateStr){ //将验证规则拆分为验证数组 letvalidateRuleArr=validateStr.value.split("|"); //监听失去焦点的时候 el.addEventListener('blur',function(){ //失去焦点进行验证 checkedfun(); }); //循环进行验证 functioncheckedfun(){ for(vari=0;i<validateRuleArr.length;++i){ letrequiredRegex=/^required$/;//判断设置了required letemailRegex=/^email$/;//判断设置了email letphoneRegex=/^phone$/;//判断设置了phone letminRegex=/min\(/;//判断设置了min最小值 letmaxRegex=/max\(/;//判断设置了max最大值 letminlengthRegex=/minlength\(/;//判断设置了minlength最大长度 letmaxlengthRegex=/maxlength\(/;//判断设置了maxlength最大长度 letregexRegex=/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(); } } } } //验证是否是必填项 functionrequired(){ if(el.value==''||el.value==null){ //console.log("不能为空"); tipMsg("不能为空"); returnfalse; } returntrue; } //验证是否是邮箱 functionemail(){ letemailRule=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/; if(!emailRule.test(el.value)){ tipMsg("请输入正确的邮箱地址"); returnfalse; } returntrue; } //验证是否是手机号码 functionphone(){ letphoneRule=/^[1][3,4,5,7,8][0-9]{9}$/; if(!phoneRule.test(el.value)){ tipMsg("请输入正确的手机号码"); returnfalse; } returntrue; } //最小值验证 functionmin(num){ if(el.value<num){ tipMsg("最小值不能小于"+num); //console.log('最小值不能小于'+num); returnfalse; } returntrue; } //最大值验证 functionmax(num){ if(el.value>num){ tipMsg("最大值不能大于"+num); //console.log('最大值不能大于'+num); returnfalse; } returntrue; } //最小长度验证 functionminlength(length){ if(el.value.length<length){ //console.log('最小长度不能小于'+length); tipMsg("最小长度不能小于"+length); returnfalse; } returntrue; } //最大长度进行验证 functionmaxlength(length){ if(el.value.length>length){ //console.log('最大长度不能大于'+length); tipMsg("最大长度不能大于"+length); returnfalse; } returntrue; } //进行正则表达式的验证 functionregex(rules){ if(!rules.test(el.value)){ tipMsg("请输入正确的格式"); returnfalse; } returntrue; } //添加提示信息 functiontipMsg(msg){ removeTips(); lettipsDiv=document.createElement('div'); letcurDate=Date.parse(newDate()); 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); } //移除提示信息 functionremoveTips(){ 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; } .checkinput{ width:300px; height:35px; outline:none; background:#ddd; } .checkspan{ padding-left:20px; } .tipsDiv{ height:27px; line-height:25px; border:1pxsolid#333; background:#333; padding:0px5px; border-radius:4px; color:#fff; font-size:16px; } .tipsDiv:before{ content:''; display:block; border-width:05px8px; border-style:solid; border-color:transparenttransparent#000; position:absolute; top:-9px; left:6px; } </style>

摘要

这就是这篇关于vue的表单数据验证的示例代码。有关vue的表单数据验证的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！