ant design vue 的form联系电话表单校验（座机和手机）

最新推荐文章于 2024-06-04 14:59:00 发布

小羊逃跑了

最新推荐文章于 2024-06-04 14:59:00 发布

阅读量956

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59411260/article/details/137020474

版权

本文介绍了如何在AntDesignVue中使用正则表达式配置数据验证规则，特别关注了手机号和座机号的匹配模式，以及JS中的规则名与name值的一致性要求。

摘要由CSDN通过智能技术生成

一、正则表达式

手机：/^1[3456789]\d{9}$/
座机：/0\d{2,3}-\d{7,8}/
联合方式：/^(1[3456789]\d{9}|0\d{2,3}-\d{7,8})$/

二、ant design vue 的rules配置

ps：js中rules配置的规则名需要和name的值匹配

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小羊逃跑了

关注关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ant design vue 的form联系电话表单校验（座机和手机）

ps：js中rules配置的规则名需要和name的值匹配。二、ant design vue 的rules配置。
复制链接

扫一扫

Vue手机号校验规则（无规则、手机号+固定号码、必填、非必填、多个手机号校验）

weixin_43732485的博客

12-21

3012

-------------手机号校验（必填项） phone:[ { required: true, message: '请输入手机号码或者固定电话', trigger: 'blur', }, { min: 1, max: 50, message: '输入的号码不能超过50位', trigger: 'blur' }, { validator: function(rule, value, callback) {

Vue项目的手机号表单验证

qq_45228330的博客

02-24

3972

Vue项目的手机号表单验证一、根据Vue官方文档写表单验证功能二、检验规则写法 export default { data(){ //验证手机号的正则表达式 let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/ //验证方法 let validatorPhone = function (phone, value, callb

参与评论您还未登录，请先登录后发表或查看评论

Vue-Ant Design Vue-普通及自定义校验实例

01-18

这段时间在使用Ant Design Vue进行项目的前端部分开发，进行一个记录，分享… Ant Design Vue Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的

Ant Design Vue 表单验证手机号的正则

zheshihuahua的博客

04-10

595

【代码】Ant Design Vue 表单验证手机号的正则。

Vue表单中手机号校验

最新发布

weixin_56372270的博客

06-04

582

【代码】Vue表单中手机号校验。

vue 校验手机号、护照

Ann_52547的博客

04-07

845

【代码】vue 校验手机号。

Vue验证手机号的同时验证座机号

m0_59360516的博客

11-08

2270

最近遇到了表单验证，验证是否是手机号码和座机号码，要是是的话通过验证，要是不是的话，则文字提示。因为自己不是很熟练这一部分，故写篇笔记记录一下，以免后面自己忘记或者混淆。

vue中，通过正则校验 手机号码格式

Missbelover的博客

02-26

2201

【代码】vue中，通过正则校验 手机号码格式。

gin-vue-blog自建博客

2401_84435700的博客

04-26

458

front 后期我会用flutter重写运行&&部署[server]AppMode = debug # debug 开发模式，release 生产模式HttpPort = :3000 # 项目端口JwtKey = 89js82js72 #JWT密钥，随机字符串即可[database]Db = mysql #数据库类型，不能变更为其他形式DbHost = 127.0.0.1 # 数据库地址DbPort = 3306 # 数据库端口DbUser = ginblog # 数据库用户名。

vue脚手架基础demo_vue 脚手架 demo

2401_84446919的博客

04-29

191

{{Msg}}{{Msg}}{{Msg}}个人工资计算器基本工资：岗位工资：月度奖金：综合补贴：扣款金额：应发工资：{{parseInt(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元文字颜色背景颜色文字大小边框边框圆角居中风云·雄霸天下登录/注册账号:密码:二次密码:注册账号:密码:登录```

Vue3：集成wangEditor富文本编辑器

2401_84411822的博客

04-29

344

webpack的loader到底是什么样的？两小时带你写一个自己loader。打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。服务器端图片上传接口。

Ant Design Vue 添加区分中英文的长度校验功能

10-15

Ant Design Vue是一个基于Ant Design和Vue的UI组件库，它为开发者提供了丰富的表单组件和内置验证规则，但在某些特定场景下，内置的规则可能不满足所有需求，此时我们可以通过扩展或自定义校验规则来实现特定的功能...

ant-design-vue 实现表格内部字段验证功能

10-15

ant-design-vue是一套基于Ant Design和Vue的组件库，提供了包括表格（a-table）、表单（a-form）、表单项（a-form-item）等多个现成的UI组件。这些组件通常会搭配对应的JavaScript API和属性来进行配置，以满足业务...

ant-design-vue3.x的form表单爬坑.pdf

12-16

在Ant Design Vue 3.x版本中，表单的使用与之前版本有了一些显著的变化，特别是对于嵌套表单的处理和验证方式。本文将详细解析这些变化，帮助开发者避免在升级过程中遇到的“坑”。首先，让我们关注的是嵌套表单...

基于vue Ant-Design 的表单设计器，快速开发.zip

05-04

基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design 的表单设计器，快速开发.zip基于vue Ant-Design ...

ant-design表单验证手机号身份证号

热门推荐

Front end development engineer

07-06

3万+

【代码】ant-design表单验证手机号身份证号。

Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字

L-seeker-Q的博客

08-16

1万+

情景：最近为前端form表单提交时需要验证一下几种特殊的输入数据格式进行验证，在此记录一下。一：正则 1.手机号： const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号 2.座机和传真： const reg = /^(\d{3,4}-)?\d{7,8}$/;//座机和传真格式是一样的：区号-号码 3.邮箱： const reg = /...

ant-design-vue手机号格式表单验证（可以空但是非空就要符合格式）

owolfo的博客

06-11

4477

ant-design-vue手机号格式表单验证（可以空但是非空就要符合格式）需求：input组件代码验证方法调用验证方法验证需求：对表单中的一个input组件进行表单验证，该input非必填可以为空，但是如果不为空则要进行手机号格式验证 input组件代码 <a-form-item :label="`手机号码`"> <a-input name="mobilephone" v-decorator="['mobilephone',{rules: [{valida

前端Vue中常用rules校验规则

执行上下文的博客

11-14

1万+

前提在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出，后期不断补充更新。 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); ...

antdesignvue table+form表单校验

11-23

根据提供的引用内容，ant-design-vue可以通过内置的Form组件和Table组件实现表格内部字段验证功能。具体步骤如下： 1. 在表格中添加需要验证的字段，例如下面的代码中的name和age字段： ```html <a-form :form="form"> <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]"> <a-input v-decorator="['name']" /> </a-form-item> <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]"> <a-input-number v-decorator="['age']" /> </a-form-item> </a-form> <a-table :columns="columns" :dataSource="dataSource" :pagination="false" /> ``` 2. 在表格中添加操作列，例如下面的代码中的操作列包含了编辑和删除按钮： ```html <a-table :columns="columns" :dataSource="dataSource" :pagination="false"> <template #action="text, record"> <a-button @click="edit(record)">Edit</a-button> <a-button @click="delete(record)">Delete</a-button> </template> </a-table> ``` 3. 在编辑操作中打开表单，并将当前行的数据绑定到表单中： ```javascript edit(record) { this.form.setFieldsValue(record); this.editingKey = record.key; } ``` 4. 在表单中添加保存按钮，并在点击保存按钮时进行表单验证和数据更新： ```html <a-form :form="form"> <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]"> <a-input v-decorator="['name']" /> </a-form-item> <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]"> <a-input-number v-decorator="['age']" /> </a-form-item> <a-form-item> <a-button type="primary" @click="save">Save</a-button> </a-form-item> </a-form> ``` ```javascript save() { this.form.validateFields((err, values) => { if (!err) { const newData = [...this.dataSource]; const index = newData.findIndex((item) => this.editingKey === item.key); if (index > -1) { const item = newData[index]; newData.splice(index, 1, { ...item, ...values }); this.dataSource = newData; this.editingKey = ''; } else { newData.push(values); this.dataSource = newData; this.editingKey = ''; } } }); } ```