ea-ui

Form 表单 ​

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-form/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基本表单 ​

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等

请正确填写姓名, 长度为 2-4 个字符
请选择性别
男女
请至少选择一种爱好
吃饭睡觉编程
校区不能为空
校区不能为空
A 校区B 校区
到达日期不能为空
到达时间不能为空
到达时间不能为空
提交
查看代码
html
<div class="demo">
  <ea-form id="basicForm">
    <ea-form-item label="姓名">
      <div slot="invalid-text">请正确填写姓名, 长度为 2-4 个字符</div>
      <ea-input name="name" placeholder="姓名" value="洛霖"></ea-input>
    </ea-form-item>
    <ea-form-item label="性别">
      <div slot="invalid-text">请选择性别</div>
      <ea-radio-group name="gender" value="男">
        <ea-radio value="男">男</ea-radio>
        <ea-radio value="女">女</ea-radio>
      </ea-radio-group>
    </ea-form-item>
    <ea-form-item label="爱好">
      <div slot="invalid-text">请至少选择一种爱好</div>
      <ea-checkbox-group name="hobby" value="吃饭">
        <ea-checkbox value="吃饭">吃饭</ea-checkbox>
        <ea-checkbox value="睡觉">睡觉</ea-checkbox>
        <ea-checkbox value="编程">编程</ea-checkbox>
      </ea-checkbox-group>
    </ea-form-item>
    <ea-form-item label="宿舍">
      <div slot="invalid-text">校区不能为空</div>
      <ea-switch
        name="dorm"
        inactive-color="#409eff"
        active-color="#13ce66"
        inactive-text="四人间"
        active-text="六人间"
      >
      </ea-switch>
    </ea-form-item>
    <ea-form-item label="校区">
      <div slot="invalid-text">校区不能为空</div>
      <ea-select name="area" placeholder="请选择校区" selection="A 校区">
        <ea-option value="A 校区">A 校区</ea-option>
        <ea-option value="B 校区">B 校区</ea-option>
      </ea-select>
    </ea-form-item>
    <ea-form-item label="到达日期">
      <div slot="invalid-text">到达日期不能为空</div>
      <ea-date-picker name="arrivalDate" value="2024-10-1"></ea-date-picker>
    </ea-form-item>
    <ea-form-item label="到达时间">
      <div slot="invalid-text">到达时间不能为空</div>
      <ea-time-picker
        name="arrivalTime"
        time="17:0:0"
        limit-range-start="9:0:0"
        limit-range-end="17:00:0"
      >
      </ea-time-picker>
    </ea-form-item>
    <ea-form-item label="备注">
      <div slot="invalid-text">到达时间不能为空</div>
      <ea-textarea
        name="remark"
        type="textarea"
        rows="2"
        placeholder="这不是空的"
      ></ea-textarea>
    </ea-form-item>
    <ea-form-item>
      <ea-button id="basicFormSubmitBtn" type="primary">提交</ea-button>
    </ea-form-item>
  </ea-form>
</div>

表单验证 ​

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。通过设置rules属性，可以开启表单验证。

WARNING

注意: 在 VUE 环境下, rules 的设置推荐在 ready 事件触发时设置，否则可能会导致表单验证无效。

同理, 若原生环境出现该问题, 也可使用该方法。

js
EaForm.addEventListener("ready", () => {
  EaForm.rules = {
    name: { required: true, min: 2, max: 4 },
    phone: { required: true, reg: /^1[3456789]\d{9}$/ },
    gender: { required: true, trigger: "change" },
    hobby: { required: true, trigger: "change" },
    area: { required: true },
    arrivalDate: { required: true },
    arrivalTime: { required: true },
  };
});
请正确填写姓名, 长度为 2-4 个字符
请正确填写手机号
请选择性别
男女
请至少选择一种爱好
吃饭睡觉编程
校区不能为空
校区不能为空
A 校区B 校区
到达日期不能为空
到达时间不能为空
到达时间不能为空
提交重置
查看代码

html

html
<div class="demo">
  <ea-form id="basicForm">
    <ea-form-item label="姓名">
      <div slot="invalid-text">请正确填写姓名, 长度为 2-4 个字符</div>
      <ea-input name="name" placeholder="姓名" value="洛霖"></ea-input>
    </ea-form-item>
    <ea-form-item label="性别">
      <div slot="invalid-text">请选择性别</div>
      <ea-radio-group name="gender" value="男">
        <ea-radio value="男">男</ea-radio>
        <ea-radio value="女">女</ea-radio>
      </ea-radio-group>
    </ea-form-item>
    <ea-form-item label="爱好">
      <div slot="invalid-text">请至少选择一种爱好</div>
      <ea-checkbox-group name="hobby" value="吃饭">
        <ea-checkbox value="吃饭">吃饭</ea-checkbox>
        <ea-checkbox value="睡觉">睡觉</ea-checkbox>
        <ea-checkbox value="编程">编程</ea-checkbox>
      </ea-checkbox-group>
    </ea-form-item>
    <ea-form-item label="宿舍">
      <div slot="invalid-text">校区不能为空</div>
      <ea-switch
        name="dorm"
        inactive-color="#409eff"
        active-color="#13ce66"
        inactive-text="四人间"
        active-text="六人间"
      >
      </ea-switch>
    </ea-form-item>
    <ea-form-item label="校区">
      <div slot="invalid-text">校区不能为空</div>
      <ea-select name="area" placeholder="请选择校区" selection="A 校区">
        <ea-option value="A 校区">A 校区</ea-option>
        <ea-option value="B 校区">B 校区</ea-option>
      </ea-select>
    </ea-form-item>
    <ea-form-item label="到达日期">
      <div slot="invalid-text">到达日期不能为空</div>
      <ea-date-picker name="arrivalDate" value="2024-10-1"></ea-date-picker>
    </ea-form-item>
    <ea-form-item label="到达时间">
      <div slot="invalid-text">到达时间不能为空</div>
      <ea-time-picker
        name="arrivalTime"
        time="17:0:0"
        limit-range-start="9:0:0"
        limit-range-end="17:00:0"
      >
      </ea-time-picker>
    </ea-form-item>
    <ea-form-item label="备注">
      <div slot="invalid-text">到达时间不能为空</div>
      <ea-textarea
        name="remark"
        type="textarea"
        rows="2"
        placeholder="这不是空的"
      ></ea-textarea>
    </ea-form-item>
    <ea-form-item>
      <ea-button id="basicFormSubmitBtn" type="primary">提交</ea-button>
    </ea-form-item>
  </ea-form>
</div>

js

js
const validtorForm = {
  form: document.querySelector("#validtorForm"),
  btn: document.querySelector("#validtorFormSubmitBtn"),
  resetBtn: document.querySelector("#validtorFormResetBtn"),

  init() {
    this.form.addEventListener("ready", () => {
      this.form.rules = {
        name: { required: true, min: 2, max: 4 },
        phone: { required: true, reg: /^1[3456789]\d{9}$/ },
        gender: { required: true, trigger: "change" },
        hobby: { required: true, trigger: "change" },
        area: { required: true },
        arrivalDate: { required: true },
        arrivalTime: { required: true },
      };
    });

    this.btn.addEventListener("click", () => {
      this.form
        .validate()
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    });

    this.resetBtn.addEventListener("click", () => {
      this.form.reset();
    });
  },
};
validtorForm.init();

自定义验证 ​

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。在 rules 中添加key 值为reg, value 为正则表达式。

WARNING

若出现表单验证规则未正确设置, 可以参考上一个示例.

请正确填写手机号
请正确填写邮箱
提交重置
查看代码

html

html
<ea-form id="customValidtorForm">
  <ea-form-item label="手机号">
    <div slot="invalid-text">请正确填写手机号</div>
    <ea-input name="phone" placeholder="手机号"></ea-input>
  </ea-form-item>
  <ea-form-item label="邮箱">
    <div slot="invalid-text">请正确填写邮箱</div>
    <ea-input name="email" placeholder="邮箱"></ea-input>
  </ea-form-item>
  <ea-form-item>
    <div style="display: flex; justify-content: space-between;">
      <ea-button
        id="customValidtorFormSubmitBtn"
        type="primary"
        style="margin-right: 1rem;"
        >提交</ea-button
      >
      <ea-button id="customValidtorFormResetBtn">重置</ea-button>
    </div>
  </ea-form-item>
</ea-form>

js

js
const customValidtorForm = {
  form: document.querySelector("#customValidtorForm"),
  btn: document.querySelector("#customValidtorFormSubmitBtn"),
  resetBtn: document.querySelector("#customValidtorFormResetBtn"),

  init() {
    this.form.rules = {
      phone: { required: true, reg: /^1[3456789]\d{9}$/, trigger: "change" },
      email: {
        required: true,
        reg: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        trigger: "change",
      },
    };

    this.btn.addEventListener("click", () => {
      this.form
        .validate()
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    });

    this.resetBtn.addEventListener("click", () => {
      this.form.reset();
    });
  },
};
customValidtorForm.init();

Form Attributes ​

参数说明类型可选值默认值
data表单数据Object--
rules校验规则Object--

FormItem Attributes ​

参数说明类型可选值默认值
label单个表单的标签String--
trigger校验触发器Stringblur/changeblur
is-required是否必填(可以在元素上添加该属性, 但建议以rules的方式设置)Boolean-false

Form CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container表单容器

FormItem CSS Part ​

名称说明
container表单项容器, 包含: 标签容器label-wrap, 内容容器content-wrap
label-wrap标签容器(即 title 属性设置的所在容器), 包含: 标签插槽
content-wrap内容容器, 包含: 错误提示容器invalid-wrap, 默认插槽
invalid-wrap错误提示容器, 包含: 错误提示插槽

Form Methods ​

方法名说明参数
validate校验表单-
reset重置表单-

FormItem Slots ​

name说明
label表单标签(title属性) 的内容
invalid-text错误提示的内容