react+antd系列之Form表單(2)：格式限制驗證

Caicloud 發布于2019-08-23 14:08 / 2321人閱讀

摘要：格式限制中表單的功能很多，下面就為大家整理了一下中常用的幾種表單輸入格式驗證輸入框不能為空限制，如下名稱不能為空請輸入名稱輸入框字符限制，如下字符長度范圍限制密碼不能為空密碼不能少于個字符密碼不能大于個字符請輸入密碼字符長度限制昵稱不能為空

格式限制

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...

GPU云服務器云服務器 Form表單驗證 jquery_form表單驗證系列之系列之二

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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