jeeyor-form

表单校验

Build Setup

<template>
  <div id="app">
    <form-body
      style="width: 500px"
      :model="form"
      :rules="validate"
      ref="formItems"
    >
      <form-item label="用户名" dense label-left prop="name">
        <template slot="label">
          <a>(D.7.1.r.2)</a>
        </template>
        <form-input v-model="form.name" />
      </form-item>
      <form-item label="密码" label-left prop="password">
        <form-input type="password" v-model="form.password" />
      </form-item>
      <form-item label="日期" prop="date">
        <form-input type="date" v-model="form.date" />
      </form-item>
      <form-item label="日期-时间" prop="time">
        <form-input type="time" v-model="form.time" />
      </form-item>
      <form-input type="slider" />
      <form-item label="下拉框" dense prop="select">
        <form-input
          placeholder="下拉框"
          :options="options"
          type="select"
          v-model="form.select"
        />
      </form-item>

      <form-item label="文本区域" prop="textarea">
        <form-input type="textarea" v-model="form.textarea" />
      </form-item>
      <form-item label="勾选框" prop="checkbox">
        <form-input
          :options="options"
          type="checkbox"
          v-model="form.checkbox"
        />
      </form-item>
    </form-body>
    <button @click="changeButton">开始校验</button>
    {{ form }}
  </div>
</template>

export default {
  components: { formBody, formItem, formInput },
  data() {
    return {
      form: {
        name: "1",
        // time: "00:01",
      },
      validate: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        date: [
          { required: true, message: "日期不能为空", trigger: "change" },
          {
            pattern: "^\\d{4}(\\-|\\/|\\.)\\d{1,2}\\1\\d{1,2}$",
            message: "格式错误",
            trigger: "blur",
          },
        ],
        time: [
          { required: true, message: "日期-时间不能为空", trigger: "change" },
        ],
        select: [
          { required: true, message: "下拉不能为空", trigger: "change" },
        ],
        checkbox: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "至少选择一个",
            trigger: "change",
          },
        ],
      },
      options: [
        { text: "111", value: "111" },
        { text: "222", value: "222" },
      ],
    };
  },
  mounted() {
    for (let i = 0; i < 10; i++) {
      this.options.push({
        text: i + "txt",
        value: i.toString(),
        disable: i === 2,
      });
    }
  },
  methods: {
    changeButton() {
      // this.$refs.formItems.resetFields();
      this.$refs.formItems.validate().then((res) => {
        console.log(res);
      });
    },
  },
};

1.1.0 修复下拉框定位问题
1.1.1 删除水平线属性
1.1.2 新增列表控件
1.1.3 修复bug
1.1.5 新增开关控件
1.1.6 修复bug
1.1.8 开关控件增加校验
1.1.9 动态正则修改
1.2.0 列表控件增加自定义字段和携带对象
1.2.1 修复bug
1.2.3 修复缺少字段校验不返回表单校验结果
1.2.4 修复清除数据时不清除异常提示
1.2.5 清除数据回到默认数据
1.2.6 调整开关控件样式
1.2.7 调整禁用属性 及日期选择控件
1.2.8 日期选择控件样式调整
1.2.9 更新评分控件、滑动条控件、富文本控件、上传控件（测试）

陆续开放组件...
作者QQ:931943819