資訊專欄INFORMATION COLUMN
摘要：格式限制中表單的功能很多，下面就為大家整理了一下中常用的幾種表單輸入格式驗(yàn)證輸入框不能為空限制，如下名稱不能為空請輸入名稱輸入框字符限制，如下字符長度范圍限制密碼不能為空密碼不能少于個字符密碼不能大于個字符請輸入密碼字符長度限制昵稱不能為空
格式限制
antd中表單的功能很多，下面就為大家整理了一下antd中常用的幾種表單輸入格式驗(yàn)證：
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. 自定義校驗(yàn)
{getFieldDecorator("passwordcomfire", {
rules: [{
required: true,
message: "請?jiān)俅屋斎朊艽a",
}, {
validator: passwordValidator
}],
})(
)}
// 密碼驗(yàn)證
const passwordValidator = (rule, value, callback) => {
const { getFieldValue } = form;
if (value && value !== getFieldValue("password")) {
callback("兩次輸入不一致！")
}
// 必須總是返回一個 callback，否則 validateFields 無法響應(yīng)
callback();
}
validator屬性自定義效驗(yàn)，必須返回一個callback
4.whitespace空格報(bào)錯
{getFieldDecorator("hobody", {
rules: [{
whitespace: true,
message: "不能輸入空格",
} ],
})(
)}
若輸入只有一個空格，則會報(bào)錯
5.pattern正則驗(yàn)證
{getFieldDecorator("qbc", {
rules: [{
message:"只能輸入數(shù)字",
pattern: /^[0-9]+$/
} ],
})(
)}
如果輸入的不是數(shù)字，則提示錯誤
完整代碼地址：
https://gitee.com/hope93/antd...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100136.html
摘要：在用的時候，我們?nèi)绻獙Ρ韱芜M(jìn)行添加和刪除該怎么弄呢，如下表單提交添加刪除名稱名稱不能為空請輸入名稱刪除提交增加這里不僅能對表單進(jìn)行增加和刪除，還能對表單進(jìn)行驗(yàn)證，看是否有輸入，以上是本身沒有數(shù)據(jù)的情況，如果是有數(shù)據(jù)的情況如下表單提交添加刪 在用antd的時候，我們?nèi)绻獙Ρ韱芜M(jìn)行添加和刪除該怎么弄呢，如下： import { connect } from dva; import { ...
摘要：項(xiàng)目開發(fā)準(zhǔn)備描述項(xiàng)目技術(shù)選型接口接口文檔測試接口啟動項(xiàng)目開發(fā)使用腳手架創(chuàng)建項(xiàng)目開發(fā)環(huán)境運(yùn)行生產(chǎn)環(huán)境打包運(yùn)行管理項(xiàng)目創(chuàng)建遠(yuǎn)程倉庫創(chuàng)建本地倉庫配置將本地倉庫推送到遠(yuǎn)程倉庫在本地創(chuàng)建分支并推送到遠(yuǎn)程如果本地有修改新的同事克隆倉庫如果遠(yuǎn)程修 day01 1. 項(xiàng)目開發(fā)準(zhǔn)備 1). 描述項(xiàng)目 2). 技術(shù)選型 3). API接口/接口文檔/測試接口 2. 啟動項(xiàng)目開發(fā) 1). 使用react...
摘要：是校驗(yàn)表單組件數(shù)據(jù)正確性的字段，其值為數(shù)組，里面的數(shù)組元素可以為。所以數(shù)組元素如果為的話，其內(nèi)容就是的。到目前為止，表單適合大部分的表單應(yīng)用場景。 JSON表單 描述 JSON表單是一個基于React的抽象組件，它可以把JSON數(shù)據(jù)格式描述的表單轉(zhuǎn)換成項(xiàng)目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優(yōu)點(diǎn)是： 可以快速構(gòu)建出一個表單 表單的數(shù)據(jù)、邏輯、視圖分...
摘要：配置涵蓋了目前的業(yè)務(wù)場景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來解決上述遇到的問題。在指定的路徑下寫入對應(yīng)的文件。 大綱 遇到的問題場景及解決方案對比 什么是babel？ 解決過程 目前遺留的問題 目前實(shí)現(xiàn)功能API 參考 遇到的問題場景及解決方案對比 我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開發(fā)。在業(yè)務(wù)開發(fā)過程中會有較多頻繁出現(xiàn)并且相似度很高的場...
摘要：經(jīng)過一周左右的時間完成了基礎(chǔ)組件的編寫。配置涵蓋了目前的業(yè)務(wù)場景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來解決上述遇到的問題。在指定的路徑下寫入對應(yīng)的文件。大綱 遇到的問題場景及解決方案對比 什么是babel？ 解決過程 目前遺留的問題 目前實(shí)現(xiàn)功能API 參考 遇到的問題場景及解決方案對比 我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開發(fā)。在業(yè)務(wù)開發(fā)過程中會...
閱讀 3171·2021-11-22 09:34
閱讀 2809·2021-09-22 15:28
閱讀 840·2021-09-10 10:51
閱讀 1869·2019-08-30 14:22
閱讀 2334·2019-08-30 14:17
閱讀 2748·2019-08-30 11:01
閱讀 2308·2019-08-29 17:19
閱讀 3675·2019-08-29 13:17
