前端004/React常用UI组件

每天进步一点点〜

Ant Design of React //蚂蚁金服设计平台。需要应用何种类型组件可参考API

React + mobx + nornj 开发模式文件说明：

【1】。A.t.html （.html / .scss / .js / 文件包路径：src/web/pages）

-->html代码（页面设计，各种标签。标签有哪些属性及用法参考“Ant Design of React”） /

【2】。A.m.scss

-->样式 (页面显示样式统一管理) /

【3】。A.js

--> javascript代码，事件操作。 /

【4】。AStore.js (src/stores/pages包下面)

-->路由页面（用于与后端交互，获取数据，并将数据返回给A.js，render渲染到页面）/

项目需求：注册一个用户，当用户点击“注册”按钮时，会将之前注册的数据替换掉。因此，需要提示两次，以警示用户“确定要注册！”

该代码实现：较验文本数据必填 & 正则 | 比较密码输入是否一致 | 弹出提示框

实现代码/html ：

 1 
 2 <template name="registUser">
 3   <ant-Modal width={668} visible="{certificateregistList.showRegistUser}" footer={null} onCancel={onAddModalCancel}>
 4     
 5       <ant-TabPane tab="注册用户" />     
 6       
 7     <fj-Row class="{styles.btn}">
 8       <fj-Col offset="2"  l="8" >
 9         
10           <ant-FormItem  label="用户名"   {...formItemParams()}>
11             
12               <ant-input class="{styles.input}" placeholder="请输入用户名！"/>
13               
14           
15           <ant-FormItem  label="密码"   {...formItemParams()}>
16             
17               <ant-input type="password" class="{styles.input}" placeholder="请输入用户密码！"/>
18               
19           
20           <ant-FormItem  label="确认密码"   {...formItemParams()}>
21             
22               <ant-input type="password" class="{styles.input}" placeholder="请再次输入密码！"/>
23               
24           
25           <ant-FormItem  label="最大次数"   {...formItemParams()}>
26             
27               <ant-input class="{styles.input}" placeholder="可以重复申请的最大次数！"/>
28               
29           
30           <div class="{styles.deploy_button}">
31             <ant-Button style="margin-left:168px;" type="primary" class="btn" htmlType="submit" disabled="{certificateregistList.showRegistBtn}">注册 
32