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

一、背景：前端框架 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

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

ANTD react 手机号(验证码)登陆 + 账号登陆(图形验证码)
这种页面可能是大家常用的,但重写比较费时间,之前没有搜到完整的,在这里自己总结一下,方面复用代码: <LoginFormformRef={formRef} ...
antd react dva在model中使用另一个model的state值
const oldData = yield select(({ baseDictionary }) => {return ([...customPageSetting.list,]) });
[react] 有在项目中使用过Antd吗？说说它的好处
[react] 有在项目中使用过Antd吗?说说它的好处 They gave every user a big surprise on Christmas Holiday. 个人简介我是歌谣,欢迎和 ...
Android签名机制及PMS中校验流程(雷惊风)
@Android签名机制及PMS中校验流程(雷惊风) 网上看到一篇比较好的关于Android签名的文章,但是文章链接不安全,不知道哪天会不会找不到了,而且需要关注才能查看完整版,所以在这里记录一下,原 ...
移动端开发-体检预约手机号校验 30秒倒计时日历展示
手机验证码 1. 体检预约流程 2.体检预约 2.1页面调整 2.1.1 展示预约的套餐信息 2.1.2 手机号校验 2.1.3 30秒倒计时效果 2.1.4 发送ajax请求 2.1.5 日历展示 ...
阿里云盘身份校验流程已经结束,请关闭页面
阿里云盘网页版通过手机号验证码成功登陆,使用阿里云盘APP,通过手机号验证码登陆,提示:"身份校验流程已经结束,请关闭页面". 可以通过APP中登陆页面的找回密码解决该问题
健康管理系统第七天（移动端_体检预约(手机号校验、发送验证码之后30秒倒计时效果、生成验证码、向手机发送验证码)）
一.体检预约流程用户可以通过如下操作流程进行体检预约: 1.在移动端首页点击体检预约,页面跳转到套餐列表页面 2.在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面 3.在套餐详情页面点击立即预 ...
onclick 源码_仿照React源码流程打造90行代码的Hooks
作者:苏畅转发链接:https://mp.weixin.qq.com/s/YLSD4IojDWTPlov_RQtVAA 前言你可能已经看过其它简易的Hooks实现.那么本文和其它实现有什么区别呢? ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...

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

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

最新文章

热门文章