Appearance

iuiDesign
100%
02:32
本页目录

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、选择器等元素。

基本使用 ​

表单的完整实例。

html
<!-- 定义 表单数据 model 校验规则 rules -->
<iui-form ref="formRef" :model="formData" :rules="rules">
  <!-- 表单项 需要定义 field  -->
  <iui-form-item label="Nickname" required field="nickname">
    <iui-input
      v-model="formData.nickname"
      placeholder="Please enter nickanme"
    />
  </iui-form-item>

  <iui-form-item label="Age" field="age" required>
    <iui-input
      v-model="formData.age"
      placeholder="Please enter age"
      type="number"
    />
  </iui-form-item>

  <iui-form-item label="Gender" field="gender">
    <iui-radio-group v-model="formData.gender" style="display: flex">
      <iui-space>
        <view>
          <iui-radio label="male"></iui-radio>
        </view>
        <view>
          <iui-radio label="female"></iui-radio>
        </view>
        <view>
          <iui-radio label="others"></iui-radio>
        </view>
      </iui-space>
    </iui-radio-group>
  </iui-form-item>

  <iui-form-item label="Favorite" field="favorite">
    <iui-checkbox-group v-model="formData.favorite">
      <iui-space direction="vertical">
        <view>
          <iui-checkbox label="Football"></iui-checkbox>
        </view>
        <view>
          <iui-checkbox label="Basketball"></iui-checkbox>
        </view>
        <view>
          <iui-checkbox label="Swim"></iui-checkbox>
        </view>
      </iui-space>
    </iui-checkbox-group>
  </iui-form-item>

  <iui-form-item label="Score" field="score">
    <iui-rate v-model="formData.score"></iui-rate>
  </iui-form-item>

  <iui-form-item label="Progress" field="progress">
    <iui-slider v-model="formData.progress"></iui-slider>
  </iui-form-item>

  <iui-form-item label="Subscribe" align="center" field="subscribe">
    <iui-switch v-model="formData.subscribe"></iui-switch>
  </iui-form-item>

  <iui-form-item label="Remark" field="remark" required>
    <iui-textarea
      v-model="formData.remark"
      placeholder="Please enter remark"
      showLimit
    ></iui-textarea>
  </iui-form-item>
</iui-form>
<view style="padding: 16px">
  <iui-button type="primary" @click="handleSubmit">Submit</iui-button>
</view>
<!-- 定义 表单数据 model 校验规则 rules -->
<iui-form ref="formRef" :model="formData" :rules="rules">
  <!-- 表单项 需要定义 field  -->
  <iui-form-item label="Nickname" required field="nickname">
    <iui-input
      v-model="formData.nickname"
      placeholder="Please enter nickanme"
    />
  </iui-form-item>

  <iui-form-item label="Age" field="age" required>
    <iui-input
      v-model="formData.age"
      placeholder="Please enter age"
      type="number"
    />
  </iui-form-item>

  <iui-form-item label="Gender" field="gender">
    <iui-radio-group v-model="formData.gender" style="display: flex">
      <iui-space>
        <view>
          <iui-radio label="male"></iui-radio>
        </view>
        <view>
          <iui-radio label="female"></iui-radio>
        </view>
        <view>
          <iui-radio label="others"></iui-radio>
        </view>
      </iui-space>
    </iui-radio-group>
  </iui-form-item>

  <iui-form-item label="Favorite" field="favorite">
    <iui-checkbox-group v-model="formData.favorite">
      <iui-space direction="vertical">
        <view>
          <iui-checkbox label="Football"></iui-checkbox>
        </view>
        <view>
          <iui-checkbox label="Basketball"></iui-checkbox>
        </view>
        <view>
          <iui-checkbox label="Swim"></iui-checkbox>
        </view>
      </iui-space>
    </iui-checkbox-group>
  </iui-form-item>

  <iui-form-item label="Score" field="score">
    <iui-rate v-model="formData.score"></iui-rate>
  </iui-form-item>

  <iui-form-item label="Progress" field="progress">
    <iui-slider v-model="formData.progress"></iui-slider>
  </iui-form-item>

  <iui-form-item label="Subscribe" align="center" field="subscribe">
    <iui-switch v-model="formData.subscribe"></iui-switch>
  </iui-form-item>

  <iui-form-item label="Remark" field="remark" required>
    <iui-textarea
      v-model="formData.remark"
      placeholder="Please enter remark"
      showLimit
    ></iui-textarea>
  </iui-form-item>
</iui-form>
<view style="padding: 16px">
  <iui-button type="primary" @click="handleSubmit">Submit</iui-button>
</view>
js
import { reactive, ref } from "vue";

const formRef = ref(null);

// 表单数据
const formData = reactive({
  nickname: "",
  age: "",
  gender: "male",
  favorite: [],
  score: "",
  progress: 0,
  subscribe: false,
  remark: "",
});

// 校验规则
const rules = {
  nickname: [
    { required: true, message: "Please enter nickname", trigger: "blur" },
    {
      min: 2,
      max: 10,
      message: "Nickname length should be 2-10",
      trigger: "blur",
    },
  ],
  age: [
    {
      type: "number",
      required: true,
      min: 6,
      max: 60,
      message: "Age should be 6-60",
      trigger: "blur",
    },
  ],
  favorite: [
    {
      type: "array",
      required: true,
      len: 2,
      message: "Please select 2 favorite",
    },
  ],
  score: {
    type: "number",
    required: true,
    min: 2,
    message: "Score should be 2-5",
  },
  progress: {
    type: "number",
    required: true,
    min: 20,
    message: "Progress should be 20-100",
  },
  subscribe: {
    type: "boolean",
    required: true,
    message: "Please agree to subscribe",
    validator: (_, v) => {
      if (!v) {
        return false;
      } else {
        return true;
      }
    },
  },
  remark: {
    required: true,
    min: 10,
    max: 100,
    message: "Remark length should be 10-100",
    trigger: "blur",
  },
};

// 提交表单
const handleSubmit = async () => {
  const res = await formRef.value.validate();
};
import { reactive, ref } from "vue";

const formRef = ref(null);

// 表单数据
const formData = reactive({
  nickname: "",
  age: "",
  gender: "male",
  favorite: [],
  score: "",
  progress: 0,
  subscribe: false,
  remark: "",
});

// 校验规则
const rules = {
  nickname: [
    { required: true, message: "Please enter nickname", trigger: "blur" },
    {
      min: 2,
      max: 10,
      message: "Nickname length should be 2-10",
      trigger: "blur",
    },
  ],
  age: [
    {
      type: "number",
      required: true,
      min: 6,
      max: 60,
      message: "Age should be 6-60",
      trigger: "blur",
    },
  ],
  favorite: [
    {
      type: "array",
      required: true,
      len: 2,
      message: "Please select 2 favorite",
    },
  ],
  score: {
    type: "number",
    required: true,
    min: 2,
    message: "Score should be 2-5",
  },
  progress: {
    type: "number",
    required: true,
    min: 20,
    message: "Progress should be 20-100",
  },
  subscribe: {
    type: "boolean",
    required: true,
    message: "Please agree to subscribe",
    validator: (_, v) => {
      if (!v) {
        return false;
      } else {
        return true;
      }
    },
  },
  remark: {
    required: true,
    min: 10,
    max: 100,
    message: "Remark length should be 10-100",
    trigger: "blur",
  },
};

// 提交表单
const handleSubmit = async () => {
  const res = await formRef.value.validate();
};

FormItem 组件说明 ​

form-item 组件需要搭配 form 组件使用。 如果需要进行参数校验， form-item 组件的 field 属性必须与 form 组件的 model 对象中的属性名一致。

校验规则 ​

校验功能由 async-validator 提供，一个字段可以设置多个内置规则，以及自定义规则，触发方式等， 每个字段的验证规则为一个数组，数组的每一个元素对象为其中一条规则。如下：

js
const rules = {
  // nickname 包含了两条规则，第一条要求必填，第二条要求长度在 2-10 之间
  nickname: [
    { required: true, message: "Please enter nickname", trigger: "blur" },
    {
      min: 2,
      max: 10,
      message: "Nickname length should be 2-10",
      trigger: "blur",
    },
  ],
  age: [
    {
      type: "number",
      required: true,
      min: 6,
      max: 60,
      message: "Age should be 6-60",
      trigger: "blur",
    },
  ],
};
const rules = {
  // nickname 包含了两条规则，第一条要求必填，第二条要求长度在 2-10 之间
  nickname: [
    { required: true, message: "Please enter nickname", trigger: "blur" },
    {
      min: 2,
      max: 10,
      message: "Nickname length should be 2-10",
      trigger: "blur",
    },
  ],
  age: [
    {
      type: "number",
      required: true,
      min: 6,
      max: 60,
      message: "Age should be 6-60",
      trigger: "blur",
    },
  ],
};

规则属性 ​

  • trigger 触发校验的方式
    trigger 可以同时设置多个值，如 trigger: ['blur', 'change']。

    • blur 失去焦点时触发，目前只支持 input 组件。
    • change 值改变时触发。

  • type 内置校验规则，可以使用正则匹配、或自定义校验方法。

    • string 字符串
    • number 数字
    • boolean 布尔值
    • method 方法
    • regexp 正则表达式
    • integer 整数
    • float 浮点数
    • array 数组
    • object 对象
    • enum 枚举
    • date 日期
    • url url 地址
    • hex 十六进制
    • email 邮箱
    • any 任意类型

  • required 是否必填
    布尔值，true 为必填，false 为非必填。配置此参数不会显示输入框左边的必填星号，如需要，请配置 form-item 的 required 属性为 true，

  • pattern 正则表达式
    正则表达式，用于校验输入内容是否符合规则。不需要添加引号。

  • min 最小值
    用于数字类型的校验，表示最小值。

  • max 最大值
    用于数字类型的校验，表示最大值。

  • len 长度
    用于字符串或数组类型的校验，表示长度。

  • enum 枚举
    用于字符串或数组类型的校验，表示枚举值。

  • whitespace 忽略空格
    布尔值，true 表示忽略空格，false 表示不忽略空格。

  • transform 转换
    用于转换输入值，如转换为大写、小写等。

    • value 当前校验的值

  • message 错误提示
    字符串，表示校验不通过时的错误提示。

  • validator 自定义校验方法
    用于自定义校验方法，返回 true 表示校验通过，返回 false 表示校验不通过。

    • rule 当前校验规则
    • value 当前校验的值
    • callback 回调函数，用于返回校验结果，callback(true) 表示校验通过，callback(false) 表示校验不通过。

  • asyncValidator 异步校验方法
    用于异步校验方法，返回 true 表示校验通过，返回 false 表示校验不通过。

    • rule 当前校验规则
    • value 当前校验的值
    • callback 回调函数，用于返回校验结果，callback(true) 表示校验通过，callback(false) 表示校验不通过。

API ​

<Form>props
参数描述类型默认值
model表单数据对象Object-
rules表单校验规则Object-
layout表单布局horizontal | verticalhorizontal
split表单项分割线Booleantrue
<Form>methods
方法名描述参数
validate校验表单-
validateField校验单个表单项field: String
clearValidate清除校验-
<Form>slots
插槽名描述参数
default表单项-
<FormItem>props
参数描述类型默认值
field表单域 model 字段String-
label标签文本String-
required显示必填星号Booleanfalse
rules校验规则（优先级高于 form 组件 rules）Array-
extra额外（帮助）文案String-
align标签对齐方式start | center | endstart