Form 表单

提供以下八个组件：

• wx-form 表单容器，必选
• wx-form-header 表单头部区域，由标题和副标题组成，可选
• wx-form-body 表单控件区域，由若干表单控件组构成，必选
• wx-form-group 表单控件组，由若干表单控件构成，必选
• wx-form-cell 表单控件单元，用于自定义表单控件，可选
• wx-form-footer 表单尾部信息，展示备注信息，可选
• wx-form-tips 表单提示区域，展示提示信息，可选
• wx-form-action 表单操作区域，展示操作按钮等，可选

表单布局

<wx-form>
  <wx-form-header :desc="desc">表单布局</wx-form-header>
  <wx-form-body>
    <wx-form-group title="表单组标题">
      <wx-input label="微信号" placeholder="填写本人微信号"></wx-input>
      <wx-input label="昵称" placeholder="填写本人微信号的昵称"></wx-input>
      <wx-input label="联系电话" placeholder="填写绑定的电话号码"></wx-input>
    </wx-form-group>
  </wx-form-body>
  <wx-form-tips>表单页提示，居中对齐</wx-form-tips>
  <wx-form-action>
    <wx-button>确定</wx-button>
  </wx-form-action>
  <wx-form-tips>表单页提示，居中对齐</wx-form-tips>
  <wx-form-footer>
    <wx-footer :links="[{path: {path: '/'}, text: '底部链接'}]">Copyright © 2018~2020 alex</wx-footer>
  </wx-form-footer>
</wx-form>

<script>
export default {
  data() {
    return {
      desc:
        "展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。"
    };
  }
};
</script>

表单校验

<wx-form ref="form">
  <wx-form-header>表单校验</wx-form-header>
  <wx-form-body>
    <wx-form-group title="输入框">
      <wx-input label="常住地址" required empty-tips="必须填写常住地址" placeholder="请输入常住地址"></wx-input>
      <wx-input
        label="手机号码"
        type="number"
        pattern="^\d{11}$"
        not-match-tips="手机号码格式错误"
        placeholder="请输入手机号码"
      ></wx-input>
    </wx-form-group>
  </wx-form-body>
  <wx-form-action>
    <wx-button @click="handleClick">确定</wx-button>
  </wx-form-action>
</wx-form>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.form.validate(error => {
        if (error) {
          this.$tooltip(error)
        } else {
          this.$toast("验证成功", { type: "success" })
        }
      });
    }
  }
};
</script>

Form Attributes

参数	说明	类型	可选值	默认值
disabled	禁用状态，优先级高于内置组件	Boolean	-	false

Form Methods

方法名称	说明	参数
validate	校验表单控件，校验器将检查带有 required 和 pattern 属性的控件	cb: (err) => {}（err：错误信息，空值即校验成功）

校验错误信息来源

表单校验错误信息来自表单控件绑定的属性信息，包括：

• empty-tips：即空值的校验错误信息
• not-match-tips： 即正则表达校验失败信息
• tips：通用校验错误信息
• placeholder：即输入组件的hint

required获取规则: empty-tips>tips>placeholder，如果没有则返回 必填项不允许为空
pattern获取规则: not-match-tips>tips>placeholder，如果没有则返回 校验错误

Form-header Attributes

参数	说明	类型	可选值	默认值
title	表单标题，空值即不显示	String	-	-
desc	表单副标题，空值即不显示	String	-	-

Form-group Attributes

参数	说明	类型	可选值	默认值
type	表单组类型，需根据内置组件类型选择	String	form, radio, checkbox	form
title	表单组标题，空值即不显示	String	-	-
disabled	禁用状态，优先级高于内置组件	Boolean	-	false

Form-cell Slots

插槽名称	说明
default	实体组件
header	标题区域
footer	尾部区域

表单