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"})
 }