利用antd进行轻量级表单开发，获取验证码

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title>测试验证码</title><meta name="viewport"content="init-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no"><link rel="stylesheet" href="https://www.supermap.com/css/antd.min.css" /><style>.ant-input-group-addon{border: 0;}</style><script src="https://www.supermap.com/zh-cn/template/pc/cn2016/js/jquery-2.1.4.min.js"></script>
</head><body><!-- 准备好一个“容器” --><div class="container"><div class="content"><div id="root"></div></div></div><script src="https://www.supermap.com/js/react.production.min.js"></script><script src="https://www.supermap.com/js/react-dom.production.min.js"></script><script src="https://www.supermap.com/js/babel.min.js"></script><script src="https://www.supermap.com/js/antd.min.js"></script><script src="https://www.supermap.com/js/axios.min.js"></script><script type="text/babel"> /* 此处一定要写babel */const { Form, Input, Button, message, Select, Checkbox, Radio } = antdconst Item = Form.Item//const [form] = Form.useForm()class VDOM extends React.Component {regForm = React.createRef()constructor() {super();this.state = {count: 5,liked: true,}}//提交报名表单onFinish = async (values) => {console.log('Success:', values);};sendCode = async () => {//获取接收验证码的手机号const { zmobile } = await this.regForm.current.validateFields(['zmobile'])message.success({content: '短信验证码已发送到您的手机！',style: {marginTop: '20vh',},});this.countDown()}countDown =  () => {const { count } = this.state//当为0的时候，liked设置为true，button按钮显示内容为 获取验证码if (count === 1) {this.setState({count: 5,liked: true,})} else {this.setState({count: count - 1,liked: false,})this.intervalId = setTimeout(() => this.countDown(), 1000)//每一秒调用一次}}componentWillUnmount() {clearInterval(this.intervalId)}render = () => {return (<Formname="basic"labelCol={{ span: 24 }}wrapperCol={{ span: 24 }}onFinish={this.onFinish}autoComplete="off"ref={this.regForm}><Itemlabel="手机号"name="zmobile"maxLength="11"rules={[{ required: true, message: '手机号不得为空！' },{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误！' }]}><Input /></Item><Itemlabel="短信验证码"name="zcode"rules={[{ required: true, message: '验证码不得为空' }]}><InputaddonAfter={<Buttontype="primary"//判断如果点击了获取验证码，就让button按钮上显示 *秒后重发送 并且button设置为disableddisabled={this.state.liked ? false : true}onClick={() => this.sendCode()}//点击此按钮获取验证码>{this.state.liked ? '获取验证码' : this.state.count + '秒后重发'}</Button>} /></Item><Item style={{ textAlign: "center" }}><Button type="primary" htmlType="submit">提 交</Button></Item></Form>)}}ReactDOM.render(<VDOM />, document.getElementById('root'))</script>
</body></html>

可以将上述代码保存为html格式并部署到服务端，也可以在本地用iis或apache部署测试

利用antd进行轻量级表单开发，获取验证码相关推荐

留言提交成功页面html,织梦自定义表单自动获取用户IP、提交时间、留言页面的方法...
织梦的自定义表单功能很好用.下面讲解如何利用织梦自定义表单自动获取用户IP.提交时间.留言页面,并转发邮箱. 第一步,在织梦后台新建自定义表单.并添加字段:uname(姓名).utel(电话).uip ...
antd如何获取表单的值_JavaScript多个表单序列化获取值
JavaScript多个表单序列化获取值获取数据格式如下: [{inid: "1231", age: "231231", sex: "123&quo ...
Winform开发框架中工作流模块的业务表单开发
在我们开发工作流的时候,往往需要设计到具体业务表单信息的编辑,有些是采用动态编辑的,有些则是在开发过程中处理的,各有各的优点,动态编辑的则方便维护各种各样的表单,但是数据的绑定及处理则比较麻烦,而自定 ...
post multipart/form-data 类型表单如何获取File外其他参数
参考资料: post multipart/form-data 类型表单如何获取File外其他参数:https://www.douban.com/note/536231506/ multipart/f ...
用ajax提交表单给数据库,如何利用ajax提交form表单到数据库
如何利用ajax提交form表单到数据库发布时间:2021-06-17 14:52:49 来源:亿速云阅读:75 作者:小新这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非 ...
基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单
简介 FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单. FormMaking 目前 ...
JQuery插件，轻量级表单模型验证（续二）
好不容易,有心思,那就把没做完的JQuery轻量级表单验证做完吧之前做到了空参数验证的,现在增加带参数的验证. 附上html <form id="ValidataForm" ...
【从零开始学BPM，Day2】默认表单开发
[课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开 ...
php怎么引用表单元素,表单元素：最全的各种html表单元素获取和使用方法总结...
表单是网页与用户的交互工具,由一个元素作为容器构成,封装其他任何数量的表单控件,还有其他任何元素里可用的标签,表单能够包含.....等表单控件元素.表单元素有哪些呢?它包含了如下的这些元素,输入文本 ...
web.py——简单而且功能强大的Python web 框架（4）：生成表单、获取输入和内容的验证
web.py的form模块能够帮助你生成HTML表单:获取用户的输入,并在处理或添加到数据库之前对其进行内容的验证. 表单简介 web.py的表单模块允许生成html表单,获取用户输入,并在处理或将其 ...

利用antd进行轻量级表单开发，获取验证码

利用antd进行轻量级表单开发，获取验证码相关推荐

最新文章

热门文章