vue实现表单数据验证的实例代码_Tomcat
这篇文章主要介绍了vue实现表单数据验证的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
为el-form表单添加：rules
在data中定义规则
将定义的规则绑定在el-form-item
代码如下：
<!–登录表单区域–>
<el-form :model=\”loginForm\” label-width=\”0px\” class=\”login_form\” :rules=\”loginFormRules\”>
<!–用户名–>
<el-form-item prop=\”username\”>
<el-input v-model=\”loginForm.username\” prefix-icon=\”el-icon-user\”></el-input>
</el-form-item>
<!–密码–>
<el-form-item prop=\”password\”>
<el-input v-model=\”loginForm.password\” prefix-icon=\”el-icon-lock\” type=\”password\”></el-input>
</el-form-item>
<!–按钮区域–>
<el-form-item class=\”btns\”>
<el-button type=\”primary\”>登录</el-button>
<el-button type=\”info\”>重置</el-button>
</el-form-item>
</el-form>
<script>
export default{
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 自定义指令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实现表单数据验证的实例代码的文章就介绍到这了,更多相关vue 表单数据验证内容请搜索3399IT网以前的文章或继续浏览下面的相关文章希望大家以后多多支持3399IT网！
本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com
