react-native 表單校驗庫 react-native-validator

npm i react-native-validator

說明

• 這是一個類似jQuery.validator的表單校驗工具
• 點擊查看demo
• 提供兩種常用的校驗方式（1.點擊校驗所有表單元素通過就提交，2.在輸入表單過程中自動驗證，如果所有表單驗證通過按鈕高亮可點擊提交）
• 你可以覆蓋所有樣式
• 支持動態表單校驗(包括數組和對象)
• 目前校驗規則是寫在elFormItem裏面的，暫時不考慮在elForm上加
• MP4演示需要科學上網，你也可以下載倉庫裏面的video.mp4
• 如果你npm下載後使用報錯，建議拷貝包下面的src文件到你本地和你本地文件一樣使用(目前我暫時無法解釋爲什麼會如此)

效果圖

doc

• 中文
• EN

安裝

    npm i react-native-validator

基本使用

   export default class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
        dynamicValidateForm:{
            name:'',
            name2:"",
            phone:"",
            picker:"",
            nickname:""
        },
    };
  }
  render() {
        let {dynamicValidateForm} =this.state;
        return (
          <View style={{marginHorizontal:10}}>
                <Form.elForm 
                   model={dynamicValidateForm}
                   ref="dynamicValidateForm">
                    <Form.elFormItem 
                    label="name:"
                     prop="name"
                     rules={[
                        { required: true, message: 'name' }
                      ]}
                    >
                         <TextInput
                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                            value={dynamicValidateForm.name}
                            placeholder="name"
                            onChangeText={text => this.changeText('name',text)}
                          />
                    </Form.elFormItem>

                    <Form.elFormItem 
                    label="phonne:"
                     prop="phone"
                     rules={[
                        { required: true, message: 'Please enter  numerals' },
                        { pattern: /^\d{6}$/, message: 'Please enter 6 Arabic numerals' }
                      ]}
                     >
                         <TextInput
                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                            value={dynamicValidateForm.phone}
                            placeholder="phone"
                            onChangeText={text => this.changeText('phone',text)}
                          />
                    </Form.elFormItem>
                    <Form.elFormItem 
                     label="nickname:"
                     prop="nickname"
                     checkOnBlur={true}
                     rules={[
                        { required: true, message: 'nicknname' },
                      ]}
                     >
                          <Form.elInput
                            value={dynamicValidateForm.nickname}
                            placeholder="check after blur"
                            onChangeText={text => this.changeText('nickname',text)}
                          />
                    </Form.elFormItem>
                    <Form.elFormItem 
                    label="picker:"
                     prop="picker"
                     rules={[
                        { required: true, message: 'picker' }
                      ]}
                    >
                         <Picker
                          selectedValue={this.state.dynamicValidateForm.picker}
                          style={{height: 200, width: 100,borderColor: 'gray', borderWidth: 1 }}
                          onValueChange={(itemValue, itemIndex) =>
                            this.changeText('picker',itemValue)
                          }>
                          <Picker.Item label="picker" value="" />
                          <Picker.Item label="Java" value="java" />
                          <Picker.Item label="JavaScript" value="js" />
                          <Picker.Item label="css" value="css" />
                        </Picker>
                    </Form.elFormItem>
                    <View>
                        <TouchableOpacity onPress={((()=>this.submit()))}>
                            <View style={styles.normalBtn}>
                                    <Text style={styles.normalBtnTxt}>submit</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </Form.elForm>
          </View>
        )
  }
  changeText(type,text){
    let obj={...this.state.dynamicValidateForm};
    obj[type]=text;
    this.setState({dynamicValidateForm:obj})
}
  submit(){
    this.refs['dynamicValidateForm'].validate(res=>{
        if(!res){
          alert("submit succs")
        }

    })
  }
}

校驗規則常考 CheckRules

elForm Attributes

參數	說明	類型	可選值	默認值	是否必選
model	表單數據對象	object	–	–	是
canPushChange	自動校驗表單是否可提交	Function	–	–	否
labelWidth	elFormItem標籤label的寬度	Number	—	–	否
styles	樣式，覆蓋所有樣式 內容參考	Object	—	–	否

elFormItem Attributes

參數	說明	類型	可選值	默認值	是否必選
prop	表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的	傳入 Form 組件的 model 中的字段	–	–	是
label	標籤文本	string	–	–	否
labelWidth	elFormItem標籤label的寬度	Number	—	–	否
checkOnBlur	是否在失去焦點時候才校驗(customInput爲true&&輸入表單爲自定義input”本組件提供的elFormItem“)	Boolean	–	–	否
rules	表單驗證規則	Array	–	–	是

elInput

參數	說明	類型	可選值	默認值	是否必選
errStyle	成功的textInput樣式	Object	TextInput的樣式	否
succStyle	錯誤的textInput樣式	Object	TextInput的樣式	–	否
其他	和TextInput一樣的屬性	–	–	–	–

elForm Methods

方法名	說明	參數
validate	校驗所有表單	Function(Array或null)
validateField	校驗指定表單	Function(Array或null)
resetField	對該表單項進行重置，將其值重置爲初始值並移除校驗結果 （因爲react單向數據流的設計導致不容易實現，不提供,可以參考demo8實現，並不難）	–
clearValidate	移除該表單項的校驗結果

常見問題

• warn model not contain key:${xxx}

 //一般發生在如下場景
 constructor(props) {
    super(props);
    this.state={
        name:"",//必填項
        phone:""//必填項
    }
 }
 //...
 setName(){
     //因爲把必填項phone從state裏面移除了，但是沒有移除phone對應的Form.formItem導致Form的校驗規則集合裏面沒有移除phone
     //如果需要移除某個校驗字段，必須把相應的FormItem移除！！
     //(Don't forget to remove Form.formItem element when you remove a field which is need check)
     this.setState({name:"name"})
 }