react+antd系列之Form表单(2)：格式限制验证

Caicloud 发布于2019-08-23 14:08 / 2322人阅读

摘要：格式限制中表单的功能很多，下面就为大家整理了一下中常用的几种表单输入格式验证输入框不能为空限制，如下名称不能为空请输入名称输入框字符限制，如下字符长度范围限制密码不能为空密码不能少于个字符密码不能大于个字符请输入密码字符长度限制昵称不能为空

格式限制

antd中表单的功能很多，下面就为大家整理了一下antd中常用的几种表单输入格式验证：

1. 输入框不能为空限制，如下：

  {getFieldDecorator("name", {
            rules: [{
            required: true,
            message: "名称不能为空",
          }],
         })(
      
  )}

2. 输入框字符限制，如下：

字符长度范围限制：

   {getFieldDecorator("password", {
            rules: [{
              required: true,
              message: "密码不能为空",
            }, {
            min:4,
            message: "密码不能少于4个字符",
          }, {
            max:6,
            message: "密码不能大于6个字符",
          }],
         })(
        
   )}

字符长度限制：

  {getFieldDecorator("nickname", {
            rules: [{
            required: true,
            message: "昵称不能为空",
          }, {
            len: 4,
            message: "长度需4个字符",
          }],
         })(
       
  )}

3. 自定义校验

   {getFieldDecorator("passwordcomfire", {
            rules: [{
              required: true,
              message: "请再次输入密码",
            }, {
              validator: passwordValidator
          }],
         })(
            
   )}
   
     //  密码验证
  const passwordValidator = (rule, value, callback) => {
    const { getFieldValue } = form;
    if (value && value !== getFieldValue("password")) {
        callback("两次输入不一致！")
    }

    // 必须总是返回一个 callback，否则 validateFields 无法响应
    callback();
  }

validator属性自定义效验，必须返回一个callback

4.whitespace空格报错

  {getFieldDecorator("hobody", {
            rules: [{
              whitespace: true,
              message: "不能输入空格",
          } ],
         })(
            
  )}

若输入只有一个空格，则会报错

5.pattern正则验证

 {getFieldDecorator("qbc", {
            rules: [{
              message:"只能输入数字",
              pattern: /^[0-9]+$/
          } ],
         })(
            
)}

如果输入的不是数字，则提示错误

完整代码地址：
https://gitee.com/hope93/antd...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100136.html

react+antd系列之Form表单(1)：添加与删除

摘要：在用的时候，我们如果要对表单进行添加和删除该怎么弄呢，如下表单提交添加删除名称名称不能为空请输入名称删除提交增加这里不仅能对表单进行增加和删除，还能对表单进行验证，看是否有输入，以上是本身没有数据的情况，如果是有数据的情况如下表单提交添加删在用antd的时候，我们如果要对表单进行添加和删除该怎么弄呢，如下： import { connect } from dva; import { ...

Donald 2019-08-23 14:08 评论0 收藏0
尚学堂 react -后台管理系统开发流程

摘要：项目开发准备描述项目技术选型接口接口文档测试接口启动项目开发使用脚手架创建项目开发环境运行生产环境打包运行管理项目创建远程仓库创建本地仓库配置将本地仓库推送到远程仓库在本地创建分支并推送到远程如果本地有修改新的同事克隆仓库如果远程修 day01 1. 项目开发准备 1). 描述项目 2). 技术选型 3). API接口/接口文档/测试接口 2. 启动项目开发 1). 使用react...

lemon 2019-08-26 10:42 评论0 收藏0
JSON生成Form表单

摘要：是校验表单组件数据正确性的字段，其值为数组，里面的数组元素可以为。所以数组元素如果为的话，其内容就是的。到目前为止，表单适合大部分的表单应用场景。 JSON表单描述 JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，它可以用简短的几行代码，快速的生成Form表单。JSON表单的优点是：可以快速构建出一个表单表单的数据、逻辑、视图分...

bingchen 2019-08-26 13:22 评论0 收藏0
babel在提升前端效率的实践

摘要：配置涵盖了目前的业务场景的基本需求，但是可扩展性很低。最终决定采用的生态链来解决上述遇到的问题。在指定的路径下写入对应的文件。大纲遇到的问题场景及解决方案对比什么是babel？解决过程目前遗留的问题目前实现功能API 参考遇到的问题场景及解决方案对比我们目前采用的是antd + react(umi)的框架做业务开发。在业务开发过程中会有较多频繁出现并且相似度很高的场...

huayeluoliuhen 2019-08-26 13:51 评论0 收藏0
Babel 在提升前端效率的实践

摘要：经过一周左右的时间完成了基础组件的编写。配置涵盖了目前的业务场景的基本需求，但是可扩展性很低。最终决定采用的生态链来解决上述遇到的问题。在指定的路径下写入对应的文件。大纲遇到的问题场景及解决方案对比什么是babel？解决过程目前遗留的问题目前实现功能API 参考遇到的问题场景及解决方案对比我们目前采用的是antd + react(umi)的框架做业务开发。在业务开发过程中会...

chanthuang 2019-05-21 16:37 评论0 收藏0