# Form 表单

# 使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-cell": "/dist/w-cell/index",
  "w-cell-group": "/dist/w-cell-group/index",
  "w-input": "/dist/w-input/index",
  "w-checkbox": "/dist/w-checkbox/index",
  "w-button": "/dist/w-button/index",
  "w-form": "/dist/w-form/index",
  "w-switch": "/dist/w-switch/index",
  "w-radio": "/dist/w-radio/index",
  "w-date-picker": "/dist/w-date-picker/index",
  "w-address-picker": "/dist/w-address-picker/index",
  "w-cell-picker": "/dist/w-cell-picker/index",
  "w-number": "/dist/w-number/index",
  "w-vcode": "/dist/w-vcode/index",
  "w-validate": "/dist/w-validate/index",
  "w-pane": "/dist/w-pane/index"
}

# 视频演示

# 表单域

只要表单组件包裹在 w-form 表单里，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

<w-form
  bind:onSubmit="通过onSubmit事件采集form表单域中的表单数据"
  bind:onReset="重置表单域中的所有数据"
>
  里面可以放各种表单组件
  需要收集的表单组件一定要加name属性，不然form不会收集没有name字段的数据
  <w-input name="input" />
  <w-checkbox name="input"/>
  表单按钮可以指定属性[form-type]来触发w-form表单的submit事件进行采集数据
  <w-button formType="submit"/>
  <w-button formType="reset"/>

  w-validate是表单的校验组件，在需要校验组件的外边加上w-validate组件可以对该组件进行校验，
  w-validate内置了常用的校验规则，用户也可自定义规则
  <w-validate rules="{{{ required: { value: true, message: '必填'}}}">
    <w-input name="validateInput" />
  </w-validate>
  <w-switch />
  <w-radio />
</w-form>

# 代码演示

<w-form
 bind:onSubmit="wussFormSubmit"
 bind:onReset="wussFormReset"
 isValidateBtn
>
    <w-cell-group>
        <w-validate rules="{{ userNameRules }}">
            <w-input
             name="userName"
             placeholder="请输入你的姓名"
             clear
             label="姓名"
            />
        </w-validate>

        <w-validate rules="{{ { mode:['mobile'] } }}">
            <w-input
             type="mobile"
             name="mobile"
             clear
             placeholder="请输入你的手机号"
             label="手机号"
            />
        </w-validate>

        <w-validate firstValidate rules="{{ isRequired }}">
            <w-cell-picker
             label="性别"
             title="请选择性别"
             placeholder="请选择性别"
             options="{{ [['男','女']] }}"
             name="sex"
             bind:onOpen="handlePickerOpen"
             bind:onCancel="handlePickerCancel"
            />
        </w-validate>

        <w-validate firstValidate rules="{{ isRequired }}">
            <w-address-picker
             label="选择地区"
             name="region"
            />
        </w-validate>

        <view
         hidden="{{ textarea_visible }}"
         class=""
         hover-class="none"
         hover-stop-propagation="false"
        >
            <w-validate rules="{{ isRequired }}">
                <w-input
                 clear
                 type="textarea"
                 label="地址"
                 name="address"
                 placeholder="请输入详细地址..."
                />
            </w-validate>
        </view>

        <w-cell label="同意用户协议信息">
            <w-switch
             name="isVip"
             slot="content"
            />
        </w-cell>

        <w-validate firstValidate rules="{{ isRequired }}">
            <w-date-picker
             name="createTime"
             mode="dateTime"
             label="出生日期"
             title="请选择日期"
            />
        </w-validate>

        <w-radio
         label="请选择手机"
         name="radio"
         defaultValue="huawei"
         options="{{ options1 }}"
        />

        <w-checkbox
         name="checkbox"
         options="{{ items1 }}"
        />

        <w-cell>
            <w-button
             inline
             type="info"
             formType="submit"
            >
                提交
            </w-button>
            <w-button
             inline
             type="warn"
             formType="reset"
            >
                重置
            </w-button>
        </w-cell>
    </w-cell-group>
</w-form>

data: {
  userNameRules: {
    maxLength: {
      value: 6,
      message: '姓名最多6个字',
    },
    minLength: {
      value: 3,
      message: '姓名最少三个字',
    },
  },
  isRequired: {
    required: {
      value: true,
      message: '必填',
    },
  },
  options1: [
    {
      key: '苹果',
      value: 'iphone',
    },
    {
      key: '华为',
      value: 'huawei',
    },
    {
      key: 'oppo音乐手机',
      value: 'oppo',
    },
  ],
  items1: [
    {
      text: '复选框1',
      ...MOCK_DATA,
      checked: true,
    },
    {
      text: '复选框2',
      ...MOCK_DATA,
      checked: true,
      disabled: true,
    },
    {
      text: '复选框3',
      ...MOCK_DATA,
    },
  ],
  textarea_visible: true,
},
handlePickerOpen() {
  this.setData({ textarea_visible: true })
},
handlePickerCancel() {
  this.setData({ textarea_visible: false })
},
wussFormSubmit(e) {
  console.log('提交了:', e.detail);
},
wussFormReset(e) {
  console.log('重置了:', e.detail);
},

# API Form

# Attribute 属性

属性	说明	类型	默认值
isValidateBtn	设置提交按钮跟随验证 disabled	boolean	false

# Event 事件

事件名	说明	参数
submit	表单提交事件	e.detail
reset	表单重置事件	e.detail

# Slot 插槽

名称	说明
slot	表单组件

# Class 自定义类名

类名	说明
wuss-class	根节点样式类

# w-validate 表单域校验组件

用于表单组件的数据校验，内置了常用规则。用户也可自定义规则进行校验。

# Attribute 属性

属性	说明	类型	示例
rules	校验规则对象	object	{ required: { value: true, message: '必填' } }
rules.required.value	校验规则的值	any	-
rules.required.message	当前校验不通过时的错误提示	String	-
firstValidate	是否需要初始化校验	boolean	false

# rules 常用校验规则

参数	说明	类型	默认值
mode	常用校验模式有 [mobile / email / url / idcard]	Array	-
required	是否必填	Boolean	-
equalLength	等于字符长度	Number	-
maxLength	最大字符长度	Number	-
minLength	最小字符长度	Number	-
rangelength	限制字符长度的范围	Array	-
equal	等于某值	Number	-
max	最大值	Number	-
min	最小值	Number	-
range	值的范围	Number	-
regexp	自定义校验规则正则	Regexp	-

# 使用方法

<w-form>
  使用mode 为mobile时，为校验手机号码
  <w-validate rules="{{{mode: ['mobile']}}}"> ... </w-validate>

  required 必填
  <w-validate rules="{{{required: true}}}"> ... </w-validate>

  regexp 自定义校验规则
  <w-validate rules="{{{regexp:['1','g']}}}"> ... </w-validate>
</w-form>

Edit this page

← ActivityIndicator 活动指示器 Input 输入框 →