Form 表单

综合表单

template

<vz-form ref="fromRef" :model="formData" :rules="formRules" message-type="undertext">
  <vz-form-item label="用户" prop="username">
    <vz-input v-model="formData.username" placeholder="请输入用户名" type="text" clearable />
  </vz-form-item>

  <vz-form-item label="密码" prop="password">
    <vz-input v-model="formData.password" placeholder="请输入密码" type="password" password-showable clearable />
  </vz-form-item>

  <vz-form-item label="技能" prop="skill">
    <vz-checkbox-group v-model="formData.skill" group-gap="50rpx">
      <vz-checkbox value="html" label="HTML"></vz-checkbox>
      <vz-checkbox value="css" label="CSS"></vz-checkbox>
      <vz-checkbox value="javascript" label="JAVASCRIPT"></vz-checkbox>
    </vz-checkbox-group>
  </vz-form-item>

  <vz-form-item label="简介" prop="brief" label-position="top">
    <vz-textarea v-model="formData.brief" placeholder="请输入个人简介" maxlength="50" show-word-limit></vz-textarea>
  </vz-form-item>

  <vz-form-item prop="agreement" :border="false" i-class="agreement">
    <vz-checkbox v-model="formData.agreement">
      <text>已阅读并同意</text>
      <text @click.stop>《用户条款》</text>
      <text>与</text>
      <text @click.stop>《隐私协议》</text>
    </vz-checkbox>
  </vz-form-item>
</vz-form>

<vz-button block @click="handleSubmit">提交</vz-button>
<vz-button block @click="handleClear">清空校验</vz-button>
<vz-button block @click="handleReset">重置</vz-button>

script

import { reactive, ref } from "vue";

const formData = reactive({
  username: "",
  password: "",
  skill: [],
  brief: "",
  agreement: false,
});

const formRules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 6, max: 10, message: "用户名 6-10 位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 10, message: "密码 6-10 位", trigger: "blur" },
  ],
  skill: [{ required: true, type: "array", min: 1, message: "请至少选择一个技能" }],
  brief: [{ required: true, message: "请输入个人简介", trigger: "blur" }],
  agreement: [
    {
      type: "boolean",
      message: "请阅读并同意《用户条款》与《隐私协议》",
      validator: (rule: any, value: any, callback: any) => (value ? callback() : callback(rule.message)),
    },
  ],
});

const fromRef = ref();

// async/await
async function handleSubmit() {
  try {
    const valid = await fromRef.value?.validate();
    if (valid) {
      console.log("submit!");
    }
  } catch (err) {
    const { errors, fields } = err as any;
    if (errors?.length) {
      console.log(errors, fields);
    }
  }
}

function handleClear() {
  fromRef.value?.clearValidate();
}

function handleReset() {
  fromRef.value?.resetFields();
}

// then/catch
/* function handleSubmit() {
  fromRef.value
    ?.validate()
    .then((valid: boolean) => {
      if (valid) {
        console.log("submit!");
      }
    })
    .catch((err: any) => {
      const { errors, fields } = err;
      if (errors?.length) {
        console.log(errors, fields);
      }
    });
} */

// callback
/* function handleSubmit() {
  fromRef.value?.validate((valid: boolean, err?: any) => {
    if (valid) {
      console.log("submit!");
    } else if (err) {
      const { errors, fields } = err;
      if (errors?.length) {
        console.log(errors, fields);
      }
    }
  });
} */

校验规则参考 async-validator

Form Props

属性名	说明	类型	默认值
model	表单数据对象	Object	-
rules	表单验证规则	Object	-
readonly	该表单内的所有组件是否都设为只读。 如果设置为 true, 它将覆盖内部组件的 readonly 属性	boolean	false
disabled	是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性	boolean	false
label-width	标签宽度	string / number	-
label-position	标签位置	left / top	left
label-align	标签对齐方式	left / right	left
label-color	标签字体颜色	string	-
required-hide	是否隐藏必填字段的星号	boolean	false
required-holder	非必填标签星号占位，为了使文字对齐	boolean	true
required-position	必填星号在标签文字的左侧或右侧	left / right	left
message-type	错误的提示方式	toast / undertext / none	none
border-feedback	校验错误时，边框是否变为错误样式	boolean	false
i-class	根节点样式类	string	-
i-style	根节点样式	Object	-

Form Slots

插槽名	说明
default	默认插槽

Form Exposes

名称	说明	参数
validate	对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise	(callback?: FormValidateCallback) => Promise<boolean>
validateField	验证具体的指定字段	(props: MaybeArray<string>, callback?: FormValidateCallback) => Promise<boolean>
clearValidate	清理指定字段的校验结果	(props?: MaybeArray<string>) => void
resetFields	重置该表单项，将其值重置为初始值，并移除校验结果	(props?: MaybeArray<string>) => void

FormItem Props

属性名	说明	类型	默认值
prop	model 的键名，在使用了 validate、resetFields 的方法时，该属性是必填的	string	-
rules	表单验证规则	MaybeArray<FormItemRule>	-
label	标签文本	string	-
label-width	标签宽度	string / number	-
label-position	标签位置	left / top	left
label-align	标签的位置	left / right	left
label-color	标签字体颜色	string	-
required	是否为必填项，如不设置，则会根据校验规则确认	boolean	false
border	是否显示下边框	boolean	true
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.StyleValue	-

FormItem Slots

插槽名	说明
default	表单内容
label	标签内容

FormItem Exposes

名称	说明	参数
validateState	校验状态	'' / success / error
validateMessage	校验消息	string
validate	验证表单项	(trigger: string, callback?: FormItemValidateCallback) => Promise<boolean>
clearValidate	移除该表单项的校验结果	() => void
resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果	() => void

FormItem CSS

变量名	说明	默认值
--vz-form-item-align	items-align	flex-start
--vz-form-item-mt	margin-top	0
--vz-form-item-mb	margin-bottom	0
--vz-form-item-px	padding-x	12rpx
--vz-form-item-border-color	下边框颜色	--vz-border-color
--vz-form-item-gap	标签和内容之间的间距	--vz-gap-large
--vz-form-item-label-width	标签宽度	-
--vz-form-item-label-color	props.labelColor	-
--vz-form-item-label-height	标签最小高度	--vz-height-base
--vz-form-item-required-color	必填星号颜色	--vz-color-danger
--vz-form-item-gap-required	必填星号和标签之间的间距	0
--vz-form-item-error-size	错误信息字体大小	24rpx
--vz-form-item-error-color	错误信息字体颜色	--vz-color-danger

FormItem SCSS

$form-item: (
  "px": 12rpx,
  "label-height": var(--vz-height-base),
  "border-color": var(--vz-border-color),
  "gap": var(--vz-gap-large),
  "required-color": var(--vz-color-danger),
  "error-size": 24rpx,
  "error-color": var(--vz-color-danger),
);