Skip to content

Latest commit

 

History

History
206 lines (174 loc) · 8.4 KB

README_CN.md

File metadata and controls

206 lines (174 loc) · 8.4 KB
Raw

npm i react-native-validator

说明

  • 这是一个类似jQuery.validator的表单校验工具
  • 点击查看demo
  • 提供两种常用的校验方式（1.点击校验所有表单元素通过就提交，2.在输入表单过程中自动验证，如果所有表单验证通过按钮高亮可点击提交）
  • 你可以覆盖所有样式
  • 支持动态表单校验(包括数组和对象)
  • 目前校验规则是写在elFormItem里面的，暂时不考虑在elForm上加
  • MP4演示需要科学上网，你也可以下载仓库里面的video.mp4
  • 如果你npm下载后使用报错，建议拷贝包下面的src文件到你本地和你本地文件一样使用(目前我暂时无法解释为什么会如此)

doc

安装

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