❤
npm
Sign UpSign In

@ctmobile/ui-form

1.0.1 • Public • Published

Form

一般初始化

html


  <form id="container">
    <textarea placeholder="详细信息" data-ctform-config-name="info" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="详细信息的说明" data-ctform-config-require="require" data-ctform-config-requiremessage="请输入详细信息" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
    <input type="text" placeholder="姓名" data-ctform-config-name="name" data-ctform-config-type="default" data-ctform-config-label="姓名" data-ctform-config-inset="inset" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligncenter" data-ctform-config-full="full" data-ctform-config-tooltip="姓名的说明信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
  ...
  </form>

js


  import Form from '@ctmobile/ui-form';
  import $ from 'jquery';
  const form = Form($('#container')[0],["autoheighttextarea","clearinput"]);
  • 第一个参数表一个表单元素，第二个参数是渲染类型

初始化组

html js


  import Form from '@ctmobile/ui-form';
  import $ from 'jquery';
  const form = Form($('#container')[0],["radiogroup","checkboxgroup"]);

渲染类型与对应的标签

渲染类型 类型说明 对应的标签 备注
autoheighttextarea 自动高度的textarea textarea
clearinput 带有清除功能的input input[type="text"] input[type="number"]:not(.ios) input[type="email"] input[type="url"] input[type="tel"] input[type="date"] input[type="week"] input[type="datetime"] input[type="datetime-local"] input[type="image"] input[type="month"] input[type="time"] input[type="search"] input[type="number"]不能带有class="ios"样式
pwdtoggle 带有眼睛和清除功能的password input[type="password"]
select 表单的select select
slider 表单的slider input[type="range"]
radio 表单的radio input[type="radio"]
checkbox 表单的checkbox input[type="checkbox"]:not(.switch) input[type="checkbox"]不能带有class="switch"样式
switch 开关 input[type="checkbox"].switch input[type="checkbox"]必须带有class="switch"样式
spinner 数字微调器 input[type="number"].ios input[type="number"]必须带有class="ios"样式 同时还可是class="fill round"
radiogroup radio组 .ct-form-radiogroup
checkboxgroup checkbox组 .ct-form-checkboxgroup

data-ctform-config配置项

配置项 作用 备注
data-ctform-config-name 控件的唯一标识 整个表单中是唯一标识这个元素
data-ctform-config-type 控件的风格 可选择的值[default
data-ctform-config-label 控件的文本
data-ctform-config-labelposition 控件文本的位置 可选的值有[labelleft
data-ctform-config-labelalign 控件文本的对其方式 可选的值[aligncenter
data-ctform-config-full 控件是否充满整行 取值为full
data-ctform-config-inset 控件是否是inset模式 取值为inset
data-ctform-config-tooltip 控件始终显示的提示信息
data-ctform-config-groupname 组中控件的name
data-ctform-config-require 是否是必填项 取值为require
data-ctform-config-requiremessage 必填项的提示信息
data-ctform-config-maxlength 最大输入长度
data-ctform-config-minlength 最小输入长度
data-ctform-config-lengthmessage 输入长度的提示信息
data-ctform-config-pattern 有效性的条件 内置的正则[]，值可是其中的值，如果想自定义可以写正则表达式(注，不带//)
data-ctform-config-patternmessage 有效性的提示

表单验证

html validatePropagation(所有项都显示)


  import Form from '@ctmobile/ui-form';
  import $ from 'jquery';
  const form = Form($('#container')[0],["autoheighttextarea","clearinput"]);
  const flag = form.validatePropagation();

validateStopPropagation(只显示第一个不符合项)


  import Form from '@ctmobile/ui-form';
  import $ from 'jquery';
  const form = Form($('#container')[0],["autoheighttextarea","clearinput"]);
  const flag = form.validateStopPropagation();

获取表单数据


  import Form from '@ctmobile/ui-form';
  import $ from 'jquery';
  const form = Form($('#container')[0],["autoheighttextarea","clearinput"]);
  const entrys = form.getEntrys();
  console.log('entrys',entrys);

例子

html


<form id="containerdemo">
  <fieldset>
    <legend>autoheighttextarea</legend>
    <fieldset>
      <legend>default</legend>
      <textarea id="1" data-ctform-config-name="1" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-requiremessage="请输入用户名" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
      <textarea data-ctform-config-name="2" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
      <textarea data-ctform-config-name="3" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-inset="inset" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligncenter" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
    </fieldset>
    <fieldset>
      <legend>ios</legend>
      <textarea data-ctform-config-name="4" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
      <textarea data-ctform-config-name="5" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <textarea data-ctform-config-name="6" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
      <textarea data-ctform-config-name="7" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1"></textarea>
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>clearinput</legend>
    <fieldset>
      <legend>default</legend>
      <input type="text" id="8" data-ctform-config-name="8" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="2" data-ctform-config-minlength="1">
      <input type="text" data-ctform-config-name="9" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="text" data-ctform-config-name="10" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-inset="inset" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligncenter" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
    <fieldset>
      <legend>ios</legend>
      <input type="text" data-ctform-config-name="11" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="text" data-ctform-config-name="12" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <input type="text" data-ctform-config-name="13" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="text" data-ctform-config-name="14" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="text" data-ctform-config-name="15" data-ctform-config-type="material" data-ctform-config-inset="inset" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>pwdtoggle</legend>
    <fieldset>
      <legend>default</legend>
      <input type="password" id="16" data-ctform-config-name="16" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="password" data-ctform-config-name="17" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="password" data-ctform-config-name="18" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-inset="inset" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligncenter" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
    <fieldset>
      <legend>ios</legend>
      <input type="password" data-ctform-config-name="19" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="password" data-ctform-config-name="20" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <input type="password" data-ctform-config-name="21" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="password" data-ctform-config-name="22" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="password" data-ctform-config-name="23" data-ctform-config-type="material" data-ctform-config-inset="inset" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>select</legend>
    <fieldset>
      <legend>default</legend>
      <select id="24" data-ctform-config-name="24" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
        <option value="2">2</option>
      </select>
      <select data-ctform-config-name="25" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
      </select>
      <select data-ctform-config-name="26" data-ctform-config-type="default" data-ctform-config-label="详细信息" data-ctform-config-inset="inset" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligncenter" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>ios</legend>
      <select data-ctform-config-name="27" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
      </select>
      <select data-ctform-config-name="28" data-ctform-config-type="ios" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <select data-ctform-config-name="29" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labeltop" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
      </select>
      <select data-ctform-config-name="30" data-ctform-config-type="material" data-ctform-config-label="详细信息" data-ctform-config-labelposition="labelleft" data-ctform-config-labelalign="aligntop" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
        <option>1</option>
      </select>
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>slider</legend>
    <fieldset>
      <legend>ios</legend>
      <input type="range" id="31" data-ctform-config-name="31" data-ctform-config-type="ios" data-ctform-config-label="音量" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="range" data-ctform-config-name="32" disabled data-ctform-config-type="ios" data-ctform-config-label="音量" data-ctform-config-labelposition="labelbottom" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="range" data-ctform-config-name="33" data-ctform-config-type="ios" data-ctform-config-label="音量" data-ctform-config-labelposition="labelleft" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="range" data-ctform-config-name="34" data-ctform-config-type="ios" data-ctform-config-label="音量" data-ctform-config-labelposition="labelright" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <input type="range" disabled data-ctform-config-name="35" data-ctform-config-type="material" data-ctform-config-label="音量" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="range" data-ctform-config-name="36" data-ctform-config-type="material" data-ctform-config-label="音量" data-ctform-config-labelposition="labelbottom" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="range" data-ctform-config-name="37" data-ctform-config-type="material" data-ctform-config-label="音量" data-ctform-config-labelposition="labelleft" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
      <input type="range" data-ctform-config-name="38" data-ctform-config-type="material" data-ctform-config-label="音量" data-ctform-config-labelposition="labelright" data-ctform-config-full="full" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require" data-ctform-config-maxlength="100" data-ctform-config-minlength="1">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>radio</legend>
    <fieldset>
      <legend>ios</legend>
      <input type="radio" checked disabled data-ctform-config-name="39" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="radio" disabled data-ctform-config-name="40" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="radio" data-ctform-config-name="41" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="radio" data-ctform-config-name="42" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <input type="radio" data-ctform-config-name="43" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="radio" disabled data-ctform-config-name="44" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="radio" data-ctform-config-name="45" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="radio" checked disabled data-ctform-config-name="46" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>checkbox</legend>
    <fieldset>
      <legend>ios</legend>
      <input type="checkbox" checked disabled data-ctform-config-name="47" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" disabled data-ctform-config-name="48" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" data-ctform-config-name="49" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" data-ctform-config-name="50" data-ctform-config-type="ios" data-ctform-config-label="男" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <input type="checkbox" data-ctform-config-name="51" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" disabled data-ctform-config-name="52" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" data-ctform-config-name="53" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" checked disabled data-ctform-config-name="54" data-ctform-config-type="material" data-ctform-config-label="女" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>switch</legend>
    <fieldset>
      <legend>ios</legend>
      <input type="checkbox" class="switch" checked disabled data-ctform-config-name="55" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" class="switch" disabled data-ctform-config-name="56" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" class="switch" data-ctform-config-name="57" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" class="switch" data-ctform-config-name="58" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
    <fieldset>
      <legend>material</legend>
      <input type="checkbox" class="switch" data-ctform-config-name="59" data-ctform-config-type="material" data-ctform-config-label="开启缓存" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" class="switch" disabled data-ctform-config-name="60" data-ctform-config-type="material" data-ctform-config-label="开启缓存" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" class="switch" data-ctform-config-name="61" data-ctform-config-type="material" data-ctform-config-label="开启缓存" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="checkbox" class="switch" checked disabled data-ctform-config-name="62" data-ctform-config-type="material" data-ctform-config-label="开启缓存" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>spinner</legend>
    <fieldset>
      <legend>ios</legend>
      <input type="number" id="63" class="ios fill round" data-ctform-config-name="63" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="number" class="ios fill" data-ctform-config-name="64" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-labelposition="labelbottom" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="number" class="ios round" data-ctform-config-name="65" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-labelposition="labelleft" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
      <input type="number" class="ios" data-ctform-config-name="66" data-ctform-config-type="ios" data-ctform-config-label="wifi下加载图片" data-ctform-config-labelposition="labelright" data-ctform-config-tooltip="始终有的提示信息" data-ctform-config-require="require">
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>group</legend>
    <fieldset>
      <legend>checkboxgroup</legend>

    </fieldset>
    <fieldset>
      <legend>radiogroup</legend>

    </fieldset>
  </fieldset>

</form>

js


import $ from 'jquery';
import Form from '@ctmobile/ui-form';

const validatePropagationDom = document.getElementById('validatePropagation');
const validateStopPropagationDom = document.getElementById('validateStopPropagation');
const submitDom = document.getElementById('submit');

validatePropagationDom.addEventListener('click', () => {
  const flag = form.validatePropagation();
  console.log(flag);
  return false;
});

validateStopPropagationDom.addEventListener('click', () => {
  const flag = form.validateStopPropagation();
  console.log(flag);
  return false;
});

submitDom.addEventListener('click', () => {
  const entry = form.getEntrys();
  alert(JSON.stringify(entry));
  return false;
});

const form = Form(document.getElementById('containerdemo'),[
  'autoheighttextarea',
  'clearinput',
  'pwdtoggle',
  'select',
  'slider',
  'radio',
  'checkbox',
  'switch',
  'spinner',
  'radiogroup',
  'checkboxgroup',
]);

方法

validatePropagation() - 验证表单(传递)

validateStopPropagation() - 验证表单(阻止向下传递)

showToolTip(name,tip) - 显示tooltip的提示信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)
  • tip-string 提示信息

showErrorTip(name,tip) - 显示errortip的提示信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)
  • tip-string 提示信息

showSuccessTip(name,tip) - 显示successtip的提示信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)
  • tip-string 提示信息

showRangeTip(name,tip) - 显示rangetip的提示信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)
  • tip-string 提示信息

hideToolTip(name) - 隐藏tooltip信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)

hideErrorMessageTip(name) - 隐藏errormessagetip信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)

hideErrorMessageAllTips() - 隐藏所有的errorMessage信息

hideRangeTip(name) - 隐藏rangetip信息

  • name-String 元素的唯一标志(data-ctform-config-name的值)

hideAllTip(name) - 隐藏一项中的所有

  • name-String 元素的唯一标志(data-ctform-config-name的值)

getEntrys() - 返回表单数据

Readme

Keywords

Package Sidebar

Install

npm i @ctmobile/ui-form

Repository

github.com/playerljc/CTMobile-UI

Homepage

github.com/playerljc/CTMobile-UI#readme

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

457 kB

Total Files

24

Last publish

Collaborators

  • playerljc
Try on RunKit
Report malware