Ang 表单 注册新用户

最新推荐文章于 2024-06-11 16:03:04 发布
最新推荐文章于 2024-06-11 16:03:04 发布
阅读量390 收藏 1
点赞数
分类专栏： Ang Design 文章标签： js javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quitv/article/details/119034190
版权

在这里插入图片描述
用户填写必须的信息以注册新用户。

import {
  Form,
  Input,
  Tooltip,
  Icon,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
} from 'antd';

const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;

const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  handleWebsiteChange = value => {
    let autoCompleteResult;
    if (!value) {
      autoCompleteResult = [];
    } else {
      autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
    }
    this.setState({ autoCompleteResult });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    const prefixSelector = getFieldDecorator('prefix', {
      initialValue: '86',
    })(
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>,
    );

    const websiteOptions = autoCompleteResult.map(website => (
      <AutoCompleteOption key={website}>{website}</AutoCompleteOption>
    ));

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label="E-mail">
          {getFieldDecorator('email', {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="Password" hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: this.validateToNextPassword,
              },
            ],
          })(<Input.Password />)}
        </Form.Item>
        <Form.Item label="Confirm Password" hasFeedback>
          {getFieldDecorator('confirm', {
            rules: [
              {
                required: true,
                message: 'Please confirm your password!',
              },
              {
                validator: this.compareToFirstPassword,
              },
            ],
          })(<Input.Password onBlur={this.handleConfirmBlur} />)}
        </Form.Item>
        <Form.Item
          label={
            <span>
              Nickname&nbsp;
              <Tooltip title="What do you want others to call you?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          }
        >
          {getFieldDecorator('nickname', {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="Habitual Residence">
          {getFieldDecorator('residence', {
            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
            rules: [
              { type: 'array', required: true, message: 'Please select your habitual residence!' },
            ],
          })(<Cascader options={residences} />)}
        </Form.Item>
        <Form.Item label="Phone Number">
          {getFieldDecorator('phone', {
            rules: [{ required: true, message: 'Please input your phone number!' }],
          })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
        </Form.Item>
        <Form.Item label="Website">
          {getFieldDecorator('website', {
            rules: [{ required: true, message: 'Please input website!' }],
          })(
            <AutoComplete
              dataSource={websiteOptions}
              onChange={this.handleWebsiteChange}
              placeholder="website"
            >
              <Input />
            </AutoComplete>,
          )}
        </Form.Item>
        <Form.Item label="Captcha" extra="We must make sure that your are a human.">
          <Row gutter={8}>
            <Col span={12}>
              {getFieldDecorator('captcha', {
                rules: [{ required: true, message: 'Please input the captcha you got!' }],
              })(<Input />)}
            </Col>
            <Col span={12}>
              <Button>Get captcha</Button>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          {getFieldDecorator('agreement', {
            valuePropName: 'checked',
          })(
            <Checkbox>
              I have read the <a href="">agreement</a>
            </Checkbox>,
          )}
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            Register
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);

ReactDOM.render(<WrappedRegistrationForm />, mountNode);

<Form.Item label=“Password” hasFeedback> 这里的hasFeedback 是怎么使用的 在输入框的最后显示 √ ×图标，校检使用

hasFeedback配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用booleanfalse

validator: this.compareToFirstPassword, 这个自定义的参数有什么含义，这是一个有校检作用的一个参数

onBlur 失去焦点事件

JavaScript中的“!!”是什么意思

对于非布尔类型，js会将值先转换成布尔类型，而后取反。

其他类型转布尔型的规则：

字符串类型值，会将空值（""）转换成false，其余转换成true。

数字类型，会将0转换成false，其余为true。

null、undefined会转换成false。

因此，对于null、undefined、0、“”都会被转为flase。

说道这里，应该就理解了“!!”的含义了，一个！是将对象转为布尔型并取反，两个！是将取反后的布尔值再取反，相当于直接将非布尔类型值转为布尔类型值。

Input.Password 指输入框出现的小眼睛
参数说明类型默认值版本
visibilityToggle是否显示切换按钮booleantrue
validateFields校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件
options.force对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验
options.initialValue子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)

()

Cascader级联选择

输入框里的值 是由intialValue 定义的初始数组决定 ，对应着级联对象里给的value 值

以label 为主显示

何时使用

  • 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
  • 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
  • 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

addonBefore={prefixSelector}

addonBefore带标签的 input，设置前置标签string|ReactNode

const prefixSelector = getFieldDecorator('prefix', {

​ initialValue: '86',

​ })(

​ <Select style={{ width: 70 }}>

​ <Option value="86">+86</Option>

​ <Option value="87">+87</Option>

​ </Select>,

​ );

const { Option } = Select;

<AutoComplete

​ dataSource={websiteOptions}

​ onChange={this.handleWebsiteChange}

​ placeholder="website"

​ \>

​ <Input />

​ </AutoComplete>,

AutoComplete自动完成

<Form.Item label="Website">

​ {getFieldDecorator('website', {

​ rules: [{ required: true, message: 'Please input website!' }],

​ })(

​ <AutoComplete

​ dataSource={websiteOptions}

​ onChange={this.handleWebsiteChange}

​ placeholder="website"

​ \>

​ <Input />

​ </AutoComplete>,

​ )}

​ </Form.Item>

基本使用。通过 dataSource 设置自动完成的数据源

onChange选中 option，或 input 的 value 变化时，调用此函数
placeholder输入框提示
dataSource自动完成的数据源DataSourceItemType[]

const { Option } = Select;

const AutoCompleteOption = AutoComplete.Option;

this.state = {

​ confirmDirty: false,

​ autoCompleteResult: [],

const websiteOptions = autoCompleteResult.map(website => (

​ <AutoCompleteOption key={website}>{website}</AutoCompleteOption>

​ ));

key和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置string

<AutoComplete

​ dataSource={websiteOptions}

​ onChange={this.handleWebsiteChange}

​ placeholder="website"

​ \>

​ <Input />

​ </AutoComplete>,

}

handleWebsiteChange = value => {

​ let autoCompleteResult;

​ if (!value) {

​ autoCompleteResult = [];

​ } else {

​ autoCompleteResult = ['.com', '.org', '.net'].map(domain => ${value}${domain});

​ }

​ this.setState({ autoCompleteResult });

};

extra额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。string|ReactNode
options.valuePropName子节点的值的属性，如 Switch 的是 ‘checked’string‘value’
labelCollabel 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。
wrapperCol需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。在 3.14.0 之后，你可以通过 Form 的 wrapperCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。
gutter栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（3.24.0 后支持）。

内联表单需要用到的一些方法和属性说明

From 属性

参数说明类型
layout表单布局‘horizontal’|‘vertical’|‘inline’
onSubmit数据验证成功后回调事件Function(e:Event)
wrapperCol（3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelColobject
labelCol（3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}objecta

Form.create(options)

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

options 的配置项如下

参数说明类型
name设置表单域内字段 id 的前缀

经过 Form.create 包装的组件将会自带 this.props.form 属性注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 注册过了。

getFieldDecorator用于和表单进行双向绑定，详见下方描述
getFieldError获取某个输入控件的 ErrorFunction(name)
getFieldsError获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 ErrorFunction([names: string[]])
validateFields校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件( [fieldNames: string[]], [options: object], callback(errors, values) ) => void
isFieldTouched判断一个输入控件是否经历过 getFieldDecorator 的值收集时机 options.trigger(name: string) => boolean
validateFieldsAndScroll与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围参考 validateFields

一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child 当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。

参数说明类型默认值
help提示信息，如不设置，则会根据校验规则自动生成string|ReactNode
validateStatus校验状态，如不设置，则会根据校验规则自动生成，可选：‘success’ ‘warning’ ‘error’ ‘validating’string
labellabel 标签的文本string|ReactNode
hasFeedback配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用booleanfalse

this.props.form.getFieldDecorator(id, options)

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

  • 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件
  • 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。
  • 你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值。
参数说明类型默认值
id必填输入控件唯一标志。支持嵌套式的写法。string
options.rules校验规则，参考下方文档object[]
options.valuePropName子节点的值的属性，如 Switch 的是 ‘checked’string‘value’
options.initialValue子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)

校验规则

参数说明类型默认值
required是否必选booleanfalse
message校验文案string|ReactNode
type内建校验类型，可选项string‘string’

Input

参数说明类型默认值
type声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")。stringtext
prefix带有前缀图标的 inputstring|ReactNode
placeholderplaceholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。stringtext

Icon

参数说明类型默认值
type图标类型。遵循图标的命名规范string
style设置图标的样式，例如 fontSize 和 colorCSSProperties

<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />

Button

属性说明类型默认值
type设置按钮类型，可选值为 primary dashed danger link(3.17 中增加) 或者不设string
htmlType设置 button 原生的 type 值，可选值请参考 HTML 标准stringbutton
disabled按钮失效状态booleanfalse

Object.keys()

**Object.keys()**方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

Object.keys(obj)

css

css max-width_CSS中的max-width属性

max-width属性用于帮助将元素的宽度设置为最大。 尽管如果元素或内容已经大于最大宽度，则该内容或元素的高度将被更改。

max-width属性不适用于小于最大宽度的内容。 最大宽度属性将覆盖width属性。 max-width属性的默认值为none。 元素的宽度可以用％ ， px ， cm或不测量 。

Element
{
    max-width : 50% / 50px /50cm etc.
}
quitv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单注册
Yang彡的博客
11-15 502
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;script type=&
form表单注册账号
kuaixiangzi的专栏
03-24 1994
案例用form表单注册账号 1.用div将表单包起来，设置div宽高，border样式，效果看起来更好 2.form表单用一个fun()函数返回一个false值阻止提交模式，在表单中加入基本标签，用户名，密码，邮箱，submit提交按钮， 3.用正则表达式验证鼠标移开时，用户名，密码，邮箱是否可用 4.当用户名，密码，邮箱验证都可用时，返回一个true值，form表
react antd InputNumber只允许输入数字的方法
BHSZZY的博客
09-28 2921
前端项目是react，使用了antd，需要一个数字输入框，只允许输入数字。
一、Element-Plus 表单
最新发布
weixin_67530155的博客
06-11 364
学习笔记，关于element-plus中的表单
表单注册表单注册表单注册
m0_66106768的博客
05-25 225
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>注册表</title> </head> <body style="border: 5px solid #ffffff; width: 560px; margin: 0 auto;margin-top: 30px;background: #cccccc;"&g...
form表单，账号注册实例
m0_46385600的博客
04-04 1866
**form表单 账号注册** 1，账号注册一般有账号注册，密码注册，确认密码，验证码，提交组成，我们用 form表单里面包裹着 input和 button 组成就行，每个输入框后加一个span储存提示信息 2，先生成随机验证码，先定义一个包含数字和大小写字母的字符串，然后定义一个随机数通过while循环生成随机验证码 3，给每个输入框标签添加鼠标移入事件， 输入框输入内容事件，鼠标移出...
antd中的form表单中的wrapperCol和labelCol问题
hhhhhhaaaaaha的博客
10-12 8132
antd是大部分人可以接触到的ui组件库，而自己公司内部的ui组件库和antd类似，于是就以antd举例子对form表单的布局做一些详细的解释，有不懂的或者有错误的欢迎提出
AnG无双科技首页jQuery特效特效代码
03-20
AnG无双科技首页jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码。
LM301ANG的技术参数
12-12
LM301ANG是一款经典的运算放大器，广泛应用于各种电子设备中，因其良好的性能和经济的价格而备受青睐。以下是对LM301ANG技术参数的详细解析： 1. **工作电压范围**：LM301ANG的工作电压范围是±3伏至±18伏。这意味...
NE5517ANG的技术参数
12-12
NE5517ANG是一款双通道跨导放大器，广泛应用于音频电路、信号处理系统以及精密测量设备等。以下是对该器件技术参数的详细解读： 首先，产品型号为NE5517ANG，这意味着它是NE5517系列的一个版本，专为需要双通道操作...
NE5532ANG的技术参数
12-12
NE5532ANG是一款高性能、双通道的低噪声运算放大器，广泛应用于音频电路、精密测量和信号处理系统中。以下将详细解读其技术参数： 1. **工作电压范围**：NE5532ANG的工作电压范围为±3V到±20V，这表明该器件可以在...
NE5534ANG的技术参数
12-12
NE5534ANG是一款经典的运算放大器，广泛应用于音频电路、测量设备和信号处理系统。以下是该器件的关键技术参数的详细解释： 1. **产品型号**：NE5534ANG - 这是该运放的具体型号，通常用于识别和区分不同的半导体...
springboot+vue动态字段，动态列表显示
百尺竿头
06-09 2809
1、后台代码片段： @GetMapping("tableList") public R tableList(String tableName) { //startPage(); Map<String, Object> params = new HashMap<>(); params.put("tableName", tableName); params.put("fields", "*"); params.put("page", getRequest(
react常见错误解决
热门推荐
编译的阿喵
06-18 2万+
最近在做react项目的时候遇到了几个报错，这几个报错在react项目还算常见，因此记录下来解决方法。 ’type’ is missing in props validation 报错：type缺少props验证 解决： 1.查看下propTypes是否写成大写了，因为我们引入的时候是大写的，所以很多小伙伴可能直接复制过来就成大写了，也会报错哦 2.新增type: PropTypes.numbe...
使用antd中的Form和24 栅格系统进行排版实现响应式布局
qq_37957971的博客
03-01 1万+
import React, { Component } from 'react'; import { Table, Row, Col, Input, DatePicker, Button, Select, Form} from 'antd'; import { getFormatDate } from '../../utils/date'; import '../../styles/Common...
vue2 + antd 封装动态表单组件（二）
guizi0809的博客
07-11 1457
vue2 + antd 封装动态表单组件
antd Select如何中止选中
寬真
02-12 1682
https://segmentfault.com/q/1010000018556609 通过From中的getValueFromEvent可以控制！ import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import...
解决Antd自定义表单验证问题
Mirror_r的博客
10-25 2万+
最近项目中遇到一个表单校验的问题，看官方文档、网上搜索找了好久，终于找到了解决方案。 先阐述一下问题： 项目中的表单需要多图片上传，这个使用Upload组件就OK了，但是表单验证就出现问题了： 1、首先，上传图片项是必须项，不能无图片提交； 2、已上传的图片可以删除； 3、后端要求提交的图片为md5格式，通过上传接口获取图片的md5值，这样就不能直接使用表单提交时获取的 value值，...
ANSYS /ANG
02-03
ANSYS是一款广泛应用于工程领域的有限元分析软件，它可以用于模拟和分析各种物理现象和工程问题。ANSYS提供了强大的建模和求解工具，可以用于结构...通过ANG，用户可以导入和处理各种几何模型，进行后续的分析和仿真。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值