field

说明

为nuke应用中的提交场景创建一个表单域，提供全量组件的数据校验能力

example

  import { createElement, Component } from 'rax'
  import { Input, Button } from 'weex-nuke'
  import Field from 'nuke-field'

  const cvvConfig = {
    type: 'text',
    placeholder: 'cvv',
    name: 'cvv',
    msg: 'CVV码仅支持3-4位纯数字',
    rule: /^\d{3,4}$/,
    required: true,
    materialDesign: true,
    inputHandle: () => null,
    style: {
      margin: 30
    }
  },
  passwordConfig = {
    type: 'password',
    placeholder: 'password',
    name: 'password',
    msg: '密码要求最小密码长度为8，至少1个大写字母，1个小写字母，1个数字和1个特殊字符',
    rule: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
    required: true,
    materialDesign: true,
    inputHandle: () => null,
    style: {
      margin: 30
    }
  },
  submitButtonConfig = {
    type: 'primary'
  }

  class SubmitAction extends Component {
    constructor(){
      super()
      this.state = {
        hasError: null,
        values: []
      }
    }

    getError = err => {
      this.setState({ hasError: err })
    }

    getValues = val => {
      this.setState({ values: val })
    }

    formSubmit = () => {
      console.log('数据验证通过, 提交服务端')
    }
    
    render(){
      return(
        <Field getError={this.getError} getValues={this.getValues} formSubmit={this.formSubmit}>
          <Input {...cvvConfig}/>
          <Input {...passwordConfig}/>
          <Button {...submitButtonConfig}>校验</Button>
        </Field>
      )
    }
  }

API

• 初始化

    <Field>{ childrenComponent }</Field>

• API接口

  • Field组件透出的取值、判错的能力，透传回调函数用于强相关提交组件

|属性|说明|类型| | --------- | ------------------------------------------------------ | ------------------------------------ | ------ | |getError|获取校验结果|fn| |getValues|获取标签内全量控件的值|fn| |formSubmit|自定义回调函数用于获取并绑定提交组件|fn|