antd+react ---手机号校验(流程中使用)

最新推荐文章于 2024-08-07 09:10:36 发布

晨雨初听--行者无疆

最新推荐文章于 2024-08-07 09:10:36 发布

阅读量2.3k

点赞数

分类专栏： react+antd 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_44177229/article/details/115706819

版权

react+antd 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了在React前端框架中，使用Antd库进行表单验证，特别是针对手机号的正则校验。在表单提交时，通过校验逻辑判断是否允许提交。如果手机号为空或者格式不正确，将阻止表单提交，并显示错误提示。此外，还提及了自定义表单验证的另一种可能实现方式，提供了相关链接供参考。

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

一、背景：前端框架 react+antd
1.在form表单中输入手机号校验，并且当校验通过时，则允许表单提交数据，，未通过，则阻止该表单提交数据，参考 antd API ，部分代码如下：

{ getFieldDecorator('moblie',{
	initialValue:this.props.data.mobile    ---初始化查出来的数据
	rules:[
		**{required:true, message:'手机号不能为空'}，
		{pattern:/^1[0-9]{10}/, message:'请输入正确的手机号'}**
	]
}）
<Input placeholder='输入手机号' style = {{width:210}} />
}

…

此时，在form 表单提交的方法中例如：

handleSumbit = (e) ={
e.xxx;
this.props.xxx((err,values) => {
	***if(err){
	   let isErr  =false;   -----根据设置的参数来确定，表单中数据正确，则能正常提交，否则阻止提交；			  
		for(let key in err ){
			for(let i=0;i<err[key].errors.length;i++){
					message.error(err[key].errors[i].message);
					isErr = true;
			}
		}
		if( isErr){
		   return false;
		}
	}***
})
}

以上代码可直接复用
以上纯属个人记录，，，，，

还有一种方式时自定义表单验证，未尝试，
地址如下：
https://blog.csdn.net/onlyliii/article/details/80759781?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control