# Form 表单

# 基础用法

#0
<vp-form :model="form" :rules="rules" ref="form">
  <vp-form-item label="用户名:" prop="name">
    <vp-input placeholder="请输入用户名" v-model="form.name"></vp-input>
  </vp-form-item>
  <vp-form-item label="爱好:" prop="hobby">
    <vp-input v-model="form.hobby"></vp-input>
  </vp-form-item>
  <vp-form-item label="性别:">
    <vp-switch v-model="form.sex"></vp-switch>
  </vp-form-item>
  <vp-form-item>
    <vp-checkbox-group v-model="form.checkboxGroup">
      <vp-checkbox label="A"></vp-checkbox>
      <vp-checkbox label="B"></vp-checkbox>
    </vp-checkbox-group>
  </vp-form-item>
  <vp-form-item>
    <vp-button @submit="submitForm">提交</vp-button>
  </vp-form-item>
</vp-form>

<script>
  export default {
    data() {
      return {
        form: {
          name: "",
          hobby: "",
          sex: false,
          checkboxGroup: [],
        },
        rules: {
          name: [
            {
              required: true,
              message: "请输入用户名",
              trigger: ["input", "blur"],
            },
          ],
          hobby: [
            { required: true, message: "请输入爱好", trigger: ["input", "blur"] },
          ],
        },
      };
    },
    methods: {
      submitForm(value, e) {
        let form = this.$refs.form;
        form.validate((valid) => {
          if (valid) {
            console.log("校验成功!");
            console.log(value);
          } else {
            console.log("校验失败!");
          }
        });
      },
    }
  };
</script>

# Form Attributes

属性名 类型 属性值 描述 默认值
model Object 表单对象默认值 {}
rules Object 表单验证规则(目前只支持 required)

# Form-Item Attributes

属性名 类型 属性值 描述 默认值
label String 表单标签 ""
labelWidth Number 表单标签宽度 100
labelStyle String "right" | "left" | "top" 表单标签位置 "right"
prop String 表单验证名称

表单验证方法

validate(callback(isValid))

在表单(vp-form)添加 ref 属性,并进行表单校验。

例子:

let form = this.$refs.form;
form.validate((valid) => {
  if (valid) {
    console.log("校验成功!");
  } else {
    console.log("校验失败!");
  }
});