在vue中做自定义表单验证

简介: 在vue中做自定义表单验证

公共common文件夹下建立validate.js

/* 是否邮编*/exportfunctionvalidateMail(rule, value,callback) {
constreg=/^[1-9][0-9]{5}$/;
if(value==''||value==undefined||value==null){
callback();
  }else {
if ((!reg.test(value)) &&value!='') {
callback(newError('请输入正确的邮编'));
    } else {
callback();
    }
  }
}
/* 是否手机号码或者固话*/exportfunctionvalidatePhoneTwo(rule, value, callback) {
constreg=/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
if (value==''||value==undefined||value==null) {
callback();
  } else {
if ((!reg.test(value)) &&value!='') {
callback(newError('请输入正确的电话号码或者固话号码'));
    } else {
callback();
    }
  }
}
/* 是否固话*/exportfunctionvalidateTelphone(rule, value,callback) {
constreg=/0\d{2}-\d{7,8}/;
if(value==''||value==undefined||value==null){
callback();
  }else {
if ((!reg.test(value)) &&value!='') {
callback(newError('请输入正确的固话(格式:区号+号码,如010-1234567)'));
    } else {
callback();
    }
  }
}
/* 是否手机号码*/exportfunctionvalidatePhone(rule, value,callback) {
constreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if(value==''||value==undefined||value==null){
callback();
  }else {
if ((!reg.test(value)) &&value!='') {
callback(newError('请输入正确的电话号码'));
    } else {
callback();
    }
  }
}
/* 是否身份证号码*/exportfunctionvalidateIdNo(rule, value,callback) {
constreg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(value==''||value==undefined||value==null){
callback();
  }else {
if ((!reg.test(value)) &&value!='') {
callback(newError('请输入正确的身份证号码'));
    } else {
callback();
    }
  }
}
/* 是否邮箱*/exportfunctionvalidateEMail2(rule, value,callback) {
constreg=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if(value==''||value==undefined||value==null){
callback();
  }else{
if (!reg.test(value)){
callback(newError('请输入正确的邮箱地址'));
    } else {
callback();
    }
  }
}

在自己所需的.vue文件中引入全部,或者按需引入

import {validateIdNo,validatePhone,validateEMail2,validateMail} from'./validate.js'

在template中绑定rules,prop写rules里对应的值,如下

<el-formref="role" :model="role"label-width="120px" :rules="rules"><el-form-itemlabel="来信人"prop="fromName"><el-inputv-model="role.fromName"></el-input></el-form-item><el-form-itemlabel="邮箱"prop="email"><el-inputtype="email"v-model="role.email"></el-input></el-form-item><el-form-itemlabel="来信目的"prop="objectiveType"><el-selectv-model="role.objectiveType"class="handle-select mr10"><el-optionv-for="item in purposeList" :key="item.id" :label="item.dict.name" :value="item.id"></el-option></el-select></el-form-item><el-form-itemlabel="手机号"prop="phone"><el-inputv-model="role.phone"></el-input></el-form-item><el-form-itemlabel="固定电话"prop="fixedPhone"><el-inputv-model="role.fixedPhone"></el-input></el-form-item><el-form-itemlabel="地址"prop="address"><el-inputv-model="role.address"></el-input></el-form-item><el-form-itemlabel="邮编"prop="postcode"><el-inputv-model="role.postcode"></el-input></el-form-item><el-form-itemlabel="标题"prop="title"><el-inputv-model="role.title"></el-input></el-form-item><el-form-itemlabel="内容"prop="content"><el-inputtype="textarea" :rows="3"v-model="role.content"></el-input></el-form-item><el-form-itemlabel="是否公开"prop="isPublic"><el-selectv-model="role.isPublic"class="handle-select mr10"><el-optionkey="1"label="公开"value="1"></el-option><el-optionkey="2"label="不公开"value="0"></el-option></el-select></el-form-item><el-form-itemlabel="选择部门"prop="deptId"><el-cascader      :options="sponsor"change-on-select      :show-all-levels="false"v-model="role.deptId"placeholder="选择部门"></el-cascader></el-form-item><el-form-itemlabel="来信人身份证"prop="fromIdCard"><el-inputv-model="role.fromIdCard"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="submitFormAdd('role')"></el-button><el-button@click="dialogVisible = false"></el-button></el-form-item></el-form>

rules写在data里,完成

rules: {
fromName: [
    { required: true, message: "请输入来信人", trigger: "blur" }
  ],
email: [{ required: true, message: "请输入邮箱", trigger: "blur" },{validator:validateEMail2,trigger:"blur"}],
objectiveType: [
    { required: true, message: "请输入来信目的", trigger: "blur" }
  ],
phone: [
    { required: true, message: "请输入来信人手机号", trigger: "blur" },{validator:validatePhone,trigger:"blur"}
  ],
// fixedPhone: [{ required: true, message: "请输入来信人固定电话", trigger: "blur" }],address: [{ required: true, message: "请输入地址", trigger: "blur" }],
postcode: [{ required: true, message: "请输入邮编", trigger: "blur" },{validator:validateMail,trigger:"blur"}],
title: [{ required: true, message: "请输入来信题目", trigger: "blur" }],
content: [
    { required: true, message: "请输入来信内容", trigger: "blur" }
  ],
isPublic: [{ required: true, message: "必填选项", trigger: "blur" }],
status: [{ required: true, message: "选择状态", trigger: "blur" }],
deptId: [
    { required: true, message: "请输入来信部门id", trigger: "blur" }
  ],
fromIdCard: [
    { required: true, message: "请输入来信人身份证号", trigger: "blur" },{validator:validateIdNo,trigger:"blur"}
  ]
}
相关文章
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
1天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
1天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
8 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
1天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
1天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
5 0
|
1天前
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
5 0
|
1天前
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
10 0
|
1天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
10 0
|
2天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
9 1