vue+element ui表单校验（邮箱、电话、工商信息）

2023-12-08 04:58
文章标签 javascript 表单 校验 ui vue 信息 frontend 邮箱 电话 element 工商

本文主要是介绍vue+element ui表单校验（邮箱、电话、工商信息），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue+element ui表单校验（邮箱、电话、工商信息）)

Html部分

<template><div><el-steps :active="active" finish-status="success"><el-step title="基本信息"></el-step><el-step title="商信信息"></el-step><el-step title="完成"></el-step></el-steps><div v-if="showPrise"><div class="container"><div class="crumbs"><el-breadcrumb separator="/"><el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 企业基本信息</el-breadcrumb-item></el-breadcrumb></div><div class="form-box"><el-form  :model="form" :rules="formRules" ref="form" label-width="150px"><el-form-item label="企业名称" required prop="companyName"><el-input v-model="form.companyName" ></el-input></el-form-item><el-form-item label="地址" required  prop="options"><!-- <area-select prop="options"  v-model="form.options" :data="$pcaa" type="text" :level="3"></area-select>--><area-cascader  v-model="form.options" :data="$pcaa" type="text" :level="2"></area-cascader><el-input type="textarea" placeholder="请输入详细地址" prop="address" v-model="form.address" ></el-input></el-form-item><el-form-item label="Email" prop="mailbox" required><el-input v-model="form.mailbox" prop="mailbox"></el-input></el-form-item><el-form-item label="电话号码" required prop="phone"><el-input v-model="form.phone" ></el-input></el-form-item><el-form-item label="官网" prop="officialWebsite"><el-input v-model="form.officialWebsite" ></el-input></el-form-item><el-form-item label="文本框" prop="briefing" required><el-input type="textarea" rows="5"   v-model="form.briefing"></el-input></el-form-item><el-form-item label="法人" prop="uid" required><el-select v-model="form.uid" placeholder="法人" class="handle-select mr10" ><el-option key="1" label="请选择法人" value=""></el-option><el-optionv-for="(item,index) in partnerList":key="index+'1'":value="item.pid":label="item.partnerName"></el-option></el-select><el-button type="text"icon="el-icon-edit"@click="handleEdit()" style="margin-left: 20px;">添加法人</el-button></el-form-item><el-form-item label="企业类型" prop="typeId" required><el-select v-model="form.typeId" placeholder="企业类型" class="handle-select mr10"  ><el-option key="1" label="请选择" value=""></el-option><el-optionv-for="(item,index) in companyTypeList":key="index+'1'":value="item.tid":label="item.typeName"></el-option></el-select></el-form-item><el-form-item label="组织机构" prop="eid" required><el-select v-model="form.eid" placeholder="" class="handle-select mr10"><el-option  label="请选择" value=""></el-option><el-optionv-for="(items,index) in organizationsList":key="index+'1'":value="items.id":label="items.organization"></el-option></el-select></el-form-item><el-form-item label="注册资本" prop="registerCapital" required><el-input v-model="form.registerCapital" prop="registerCapital"></el-input></el-form-item><el-form-item label="实缴资本" prop="paidCapital" required><el-input v-model="form.paidCapital" prop="paidCapital"></el-input></el-form-item><el-form-item label="登记状态" prop="registerStatus" required><el-select v-model="form.registerStatus" placeholder="登记状态" class="handle-select mr10"><el-option key="1" label="请选择" value=""></el-option><el-option key="2" label=" 在业/存续" value=" 在业/存续"></el-option><el-option key="3" label="筹建" value="筹建"></el-option><el-option key="4" label="清算" value="清算"></el-option><el-option key="5" label="迁入" value="迁入"></el-option><el-option key="6" label="迁出" value="迁出"></el-option><el-option key="7" label="停业" value="停业"></el-option><el-option key="8" label="撤销" value="撤销"></el-option><el-option key="9" label="吊销" value="吊销"></el-option><el-option key="10" label="注销" value="注销"></el-option></el-select></el-form-item><el-form-item label="成立日期" prop="createTime" required><el-date-pickerv-model="form.createTime"align="right"type="date"placeholder="选择日期"prop="createTime":picker-options="pickerOptions1"></el-date-picker></el-form-item><el-form-item label="核准日期" prop="approvalTime" required><el-date-pickerv-model="form.approvalTime"align="right"type="date"placeholder="选择日期"prop="approvalTime":picker-options="pickerOptions1"></el-date-picker></el-form-item><el-form-item label="统一社会信用代码"  required prop="uscc"><el-input v-model="form.uscc"></el-input></el-form-item><el-form-item label="组织机构代码" required  prop="ocode"><el-input v-model="form.ocode"></el-input></el-form-item><el-form-item label="工商注册号" required prop="bsnumber"><el-input v-model="form.bsnumber" ></el-input></el-form-item><el-form-item label="纳税人识别号" required prop="tinumber"><el-input v-model="form.tinumber" ></el-input></el-form-item><el-form-item label="进出口企业代码" prop="importNumber"><el-input v-model="form.importNumber"></el-input></el-form-item><el-form-item label="行业分类" required prop="industryId"><el-select v-model="form.industryId" placeholder="行业分类" class="handle-select mr10"><el-option  label="请选择" value=""></el-option><el-optionv-for="(items,index) in industryList":key="index+'1'":value="items.iuId":label="items.industryName"></el-option></el-select></el-form-item><el-form-item label="营业期限" required prop="businessTerm"><!-- <el-input v-model="fromCompanyInfo.businessTerm" prop="businessTerm"></el-input>--><el-select v-model="form.businessTerm" placeholder="营业期限" class="handle-select mr10"><el-option key="1" label="请选择" value=""></el-option><el-option key="2" label="5年-10年" value="5年-10年"></el-option></el-select></el-form-item><el-form-item label="登记机关" required prop="authority"><el-input v-model="form.authority" ></el-input></el-form-item><el-form-item label="人员规模" required prop="personnel"><!--<el-input v-model="fromCompanyInfo.personnel" prop="personnel"></el-input>--><el-select v-model="form.personnel" placeholder="人员规模" class="handle-select mr10"><el-option key="1" label="请选择" value=""></el-option><el-option key="2" label="20-50人" value="20-50人"></el-option></el-select></el-form-item><el-form-item label="参保人数" required prop="personsNumber"><!--<el-input v-model="fromCompanyInfo.personsNumber" prop="personsNumber"></el-input>--><el-select v-model="form.personsNumber" placeholder="参保人数" class="handle-select mr10"><el-option key="1" label="请选择" value="0"></el-option><el-option key="2" label="10" value="10"></el-option></el-select></el-form-item><el-form-item label="所属地区" prop="optionsorgin" required><!-- <el-input v-model="fromCompanyInfo.region" prop="region"></el-input>--><area-cascader   v-model="form.optionsorgin" :data="$pcaa" type="text" :level="0"></area-cascader></el-form-item><el-form-item label="曾用名" prop="oldName"><el-input v-model="form.oldName" ></el-input></el-form-item><el-form-item label="英文名" prop="englishName" required><el-input v-model="form.englishName" ></el-input></el-form-item><el-form-item label="经营范围" prop="nature" required><el-input type="textarea" rows="5" v-model="form.nature" ></el-input></el-form-item><el-form-item><el-button @click="nextOne">上一步</el-button><el-button  type="primary" style="margin-top: 12px;" @click="onSubmit('form')">提交</el-button><el-button @click="resForm('form')">取消</el-button></el-form-item></el-form ></div></div></div></div>
</template>

js

<script>import Vue from 'vue';import { pcaa } from 'area-data-vue';import 'area-linkage-vue/dist/index.css';import AreaLinkageVue from 'area-linkage-vue';Vue.prototype.$pcaa = pcaa;Vue.use(AreaLinkageVue)export default {name: 'CompanyEditor',data() {/*** 电话号码校验* */var checkPhone = (rule, value, callback) => {const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/if (!value) {return callback(new Error('电话号码不能为空'))}setTimeout(() => {// Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串// 所以我就在前面加了一个+实现隐式转换if (!Number.isInteger(+value.trim())) {callback(new Error('请输入数字值'))} else {if (phoneReg.test(value)) {callback()} else {callback(new Error('电话号码格式不正确'))}}}, 100)}/*** 邮箱校验* */var checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/if (!value) {return callback(new Error('邮箱不能为空'))}setTimeout(() => {if (mailReg.test(value.trim())) {callback()} else {callback(new Error('请输入正确的邮箱格式'))}}, 100)}/*** 公司名称校验* */var companyNameC =(rule, value, callback) => {//校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/const re= /^[\u4e00-\u9fa5]+$/if (!value) {return callback(new Error('公司名称不能为空'))}setTimeout(() => {if (re.test(value.trim())) {callback()} else {callback(new Error('请输入正确的公司名称'))}}, 100)}/*** 统一社会信用代码校验* */var cheackCreditCode =(rule, value, callback) => {if (!value) {return callback(new Error('统一社会信用代码不能为空'))}setTimeout(() => {if (this.CheckSocialCreditCode(value.trim()) == true) {callback()}else {callback(new Error('请输入正确的统一社会信用代码'))}}, 100)}/*** 纳税人识别号校验*/var tINumber=(rule, value, callback) => {if (!value) {return callback(new Error('纳税人识别号不能为空'))}setTimeout(() => {if (this.CheckSocialCreditCode(value.trim()) == true) {callback() }else {callback(new Error('请输入正确的纳税人识别号'))}}, 100)}var bSNumber =(rule, value, callback) => {//工商注册号的正则：/^[1-7]\d{14}$/const re= /^[1-7]\d{14}$/if (!value) {return callback(new Error('工商注册号不能为空'))}setTimeout(() => {if (reg.test(value.trim())) {callback() } else {callback(new Error('请输入正确的工商注册号'))}}, 100)}/**** 组织机构代码校验*/var oCode =(rule, value, callback) => {//组织机构代码的正则：/^\d{8}-?\d{1}$/const reg = /^\d{8}-?\d{1}$/;if (!value) {return callback(new Error('组织机构代码不能为空'))}setTimeout(() => {if (reg.test(value.trim())) {callback() } else {callback(new Error('请输入正确的组织机构代码'))}}, 100)}var englishName =(rule, value, callback) => {//组织机构代码的正则：/^\d{8}-?\d{1}$/const reg =/^[a-zA-Z&.,\'\/\-\s]+$/g;if (!value) {return callback(new Error('英文名称不能为空'))}setTimeout(() => {if (reg.test(value.trim())) {callback()} else {callback(new Error('请输入正确的英文名称'))}}, 100)}return {form: {cid:'',companyName: '',phone: '',mailbox: '',officialWebsite: '',briefing:'',options: [],optionsorgin: [],address:'',uid: '',typeId: '',eid: '',registerCapital: '',paidCapital: '',registerStatus: '',createTime:'' ,approvalTime: '',uscc: '',ocode: '',bsnumber: '',tinumber: '',importNumber:'',industryId: '',businessTerm: '',authority: '',personnel: '',personsNumber: '',region: '',oldName: '',englishName: '',nature: '',a:[],b:[],c:''},formRules:{companyName: [{ required: true,validator: companyNameC, trigger: 'blur' }],phone: [{ required: true,type: 'number',validator: checkPhone, message: '请填写正确的手机号', trigger: 'blur' },],mailbox: [{ required: true,validator: checkEmail, message: '请填写正确的邮箱', trigger: 'blur' }],officialWebsite:[{ type:'url', message: '请填写正确的网址', trigger: 'blur' }],options: [{ required: true, message: '请选择地址', trigger: 'change' }],uid: [{ required: true, message: '请选择法人', trigger: 'change' }],typeId: [{ required: true, message: '请选择企业类型', trigger: 'change' }],eid: [{ required: true, message: '请选择经济性质', trigger: 'change' }],industryId: [{ required: true, message: '请选择所属行业', trigger: 'change' }],businessTerm:[{ required: true, message: '请选择', trigger: 'change' }],personnel:[{ required: true, message: '请选择', trigger: 'change' }],personsNumber:[{ required: true, message: '请选择', trigger: 'change' }],optionsorgin:[{  required: true, message: '请选择区域', trigger: 'change' }],registerStatus: [{ required: true, message: '请选择登记状态', trigger: 'change' }],registerCapital: [{ required: true, type:'float', message: '请填写注册资本', trigger: 'blur' }],paidCapital: [{ required: true,type:'float', message: '请填写实缴资本', trigger: 'blur' }],createTime: [{ required: true, message: '请选择日期', trigger: 'change' }],approvalTime: [{  required: true, message: '请选择日期', trigger: 'change' }],uscc: [{  required: true,validator:cheackCreditCode, message: '请输入统一社会信用代码', trigger: 'blur' }],ocode: [{ required: true,validator:oCode, message: '请输入组织机构代码', trigger: 'blur' }],bsnumber: [{  required: true, validator:bSNumber,message: '请输入工商注册号', trigger: 'blur' }],tinumber: [{  required: true,validator:tINumber, message: '请输入纳税人识别号', trigger: 'blur' }],authority: [{  required: true, message: '请输入登记机关', trigger: 'blur' }],englishName: [{  required: true,validator:englishName, message: '请输入英文名', trigger: 'blur' }],nature: [{ required: true, message: '请输入经营范围', trigger: 'blur' },{ message: '长度在 100 到 300 个字符', trigger: 'blur' }],briefing:[{ required: true, message: '请输入公司简介', trigger: 'blur' },{ message: '长度在 100 到 300 个字符', trigger: 'blur' }]},pickerOptions1: {disabledDate(time) {return time.getTime() > Date.now();},shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date());}}, {text: '昨天',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, {text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}}]}};},created() {},methods: {onSubmit(formName) {const _this = this;_this.$refs[formName].validate((valid) => {if(valid) {_this.$axios.post("/companydata/saveEdit",_this.form).then(res => {if(res.status = 200){this.$message.success(res.data.msg);this.$router.push('/table');}else{this.$message.error(res.data.msg);}});} else {console.log('error submit!!');return false;}});},resForm(formName) {this.$refs[formName].resetFields();this.$router.go(-1);},CheckSocialCreditCode(Code) {var patrn = /^[0-9A-Z]+$/; //18位校验及大写校验if (Code.length != 18 || patrn.test(Code) == false) {return false;} else {var Ancode; //统一社会信用代码的每一个值var Ancodevalue; //统一社会信用代码每一个值的权重var total = 0;var weightedfactors = [1,3,9,27,19,26,16,17,20,29,25,13,8,24,10,30,28]; //加权因子var str = "0123456789ABCDEFGHJKLMNPQRTUWXY"; //不用I、O、S、V、Zfor (var i = 0; i < Code.length - 1; i++) {Ancode = Code.substring(i, i + 1);Ancodevalue = str.indexOf(Ancode);total = total + Ancodevalue * weightedfactors[i]; //权重与加权因子相乘之和}var logiccheckcode = 31 - (total % 31);if (logiccheckcode == 31) {logiccheckcode = 0;}var Str ="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,T,U,W,X,Y";var Array_Str = Str.split(",");logiccheckcode = Array_Str[logiccheckcode];var checkcode = Code.substring(17, 18);if (logiccheckcode != checkcode) {console.log(123);return false;}return true;}}}};
</script>

我的拙见希望能帮到您！

这篇关于vue+element ui表单校验（邮箱、电话、工商信息）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/468595。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
业务中14个需要进行A/B测试的时刻[信息图]

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中，我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试，如何有效地规划和启动测试，如何评估测试是否成功，您应该关注哪些指标，多年来我们发现的常见错误等等。 什么是A/B测试？ A/B测试（有时称为“分割测试”）是一种实验类型，其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体，以查看哪一种效果最好。 本质上，A/B测
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2