React的乙個表單驗證器formsy react

2021-08-21 11:56:27 字數 1419 閱讀 2337

1. 新增驗證規則並使用簡單的語法使用它們.

2. 將外部錯誤傳遞給表單以始元素無效.

3. 動態的向表單新增元素,他們將註冊或取消註冊到表單.

4. 構建任何型別的表單元素元件,不只是傳統輸入,而是你自己想要的東西,並獲得驗證.

5. 使用處理程式處理表單的不同狀態.

2.npm install formsy-react與browserify一起安裝並使用

3. 安裝時bower install formsy-react

完整的api

formsy-react如何巧妙結合react.js用在表單驗證中?

1. formsy為您提供開箱即用的** 

import formsy from 'formsy-react';

import myowninput from './myowninput'

getinitialstate()

},enablebutton());

},disablebutton());

},submit(model),

render() onvalid= oninvalid= > < myowninput name="email " validationerror="這不是有效的電子郵件 " validations="isemail" required

/> <

button type="submit " disabled= >提交

);} });

2. 我建議把文字框當成乙個元件(myowninput)提出來更高效一些,將表單的值通過props傳給元件,元件進行驗證更為高效,如下圖

import  from 'formsy-react';

import react from 'react';

class myowninput extends react.component

}render() = this.props

return ();}

}export default withformsy(myowninput);

3. input文字框裡面的引數可參看api列表,也可以根據自己的規則自己定義,如下

import  from 'formsy-react';

const email = /^([a-za-z0-9]+[_|\_|\.]?)*[a-za-z0-9]+@([a-za-z0-9]+[_|\_|\.]?)*[a-za-z0-9]+\.[a-za-z]$/; //郵箱驗證

addvalidationrule('isemail', function (values, value) );

後續free的時候還會為大家奉獻上api使用示例~

封裝乙個表單驗證類

封裝乙個表單驗證類 中文驗證 郵箱驗證 號碼 手機 qq 身份證 由字母 數字 下劃線組成,不能以數字開頭 header content type text html charset utf 8 class form x u return preg match reg,str 郵箱驗證 引數 ema...

乙個簡單的表單驗證JS

這個表單驗證支援空值,長度,範圍,群組,ajax 示例效果 驗證模式1 驗證模式2 使用者名稱密碼 類別類別1 類別2 類別3 類別4 專案專案1 專案2 專案3 專案4 示例 validator.add message 使用者名稱已經存在!validator.add validator.add v...

乙個表單的建立與驗證

例項展示 樣式左邊的span 設定寬度,display inline block,text align right 就可以右對齊了 js頁面的html布局 聯絡 正則校驗 的方法 function checkmobile str if str.match reg else 頁面中呼叫的方法 申請的按...