@tanzhenxing/zx-form v1.0.5

zx-form 表单组件

表单包含输入框、单选框、下拉选择、多选框等用户输入的组件，用于收集、校验和提交数据。

基础用法

<zx-form :model="form" :rules="rules" label-width="150rpx">
  <zx-form-item label="姓名" prop="name">
    <zx-input v-model="form.name" placeholder="请输入姓名"></zx-input>
  </zx-form-item>
  <zx-form-item label="邮箱" prop="email">
    <zx-input v-model="form.email" placeholder="请输入邮箱"></zx-input>
  </zx-form-item>
  <zx-form-item>
    <zx-button type="primary" @click="submitForm">提交</zx-button>
    <zx-button @click="resetForm">重置</zx-button>
  </zx-form-item>
</zx-form>

<script setup>
import { ref, reactive } from 'vue';

const form = reactive({
  name: '',
  email: ''
});

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
};

const formRef = ref(null);

function submitForm() {
  formRef.value.validate((valid, invalidFields) => {
    if (valid) {
      console.log('表单验证通过');
    } else {
      console.log('表单验证失败', invalidFields);
    }
  });
}

function resetForm() {
  formRef.value.resetFields();
}
</script>

行内表单

将 inline 属性设置为 true 可以让表单域变为行内的表单域。

<zx-form :model="form" :rules="rules" inline>
  <zx-form-item label="姓名" prop="name">
    <zx-input v-model="form.name"></zx-input>
  </zx-form-item>
  <zx-form-item label="邮箱" prop="email">
    <zx-input v-model="form.email"></zx-input>
  </zx-form-item>
  <zx-form-item>
    <zx-button type="primary">查询</zx-button>
  </zx-form-item>
</zx-form>

对齐方式

通过设置 label-position 属性可以改变表单域标签的位置，可选值为：top、left、right。

<zx-form :model="form" label-position="top">
  <!-- 表单项 -->
</zx-form>

表单验证

zx-form 组件提供了表单验证功能，通过 rules 属性传入验证规则。

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  age: [
    { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
  ]
};

zx-form 属性

zx-form 事件

zx-form 方法

zx-form-item 属性

zx-form-item 方法