1.0.1 • Published 5 years ago

@ctmobile/ui-form-sd v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

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自动高度的textareatextarea
clearinput带有清除功能的inputinputtype="text" inputtype="number":not(.ios) inputtype="email" inputtype="url" inputtype="tel" inputtype="date" inputtype="week" inputtype="datetime" inputtype="datetime-local" inputtype="image" inputtype="month" inputtype="time" inputtype="search"inputtype="number"不能带有class="ios"样式
pwdtoggle带有眼睛和清除功能的passwordinputtype="password"
select表单的selectselect
slider表单的sliderinputtype="range"
radio表单的radioinputtype="radio"
checkbox表单的checkboxinputtype="checkbox":not(.switch)inputtype="checkbox"不能带有class="switch"样式
switch开关inputtype="checkbox".switchinputtype="checkbox"必须带有class="switch"样式
spinner数字微调器inputtype="number".iosinputtype="number"必须带有class="ios"样式 同时还可是class="fill round"
radiogroupradio组.ct-form-radiogroup
checkboxgroupcheckbox组.ct-form-checkboxgroup

data-ctform-config配置项

配置项作用备注
data-ctform-config-name控件的唯一标识整个表单中是唯一标识这个元素
data-ctform-config-type控件的风格可选择的值[defaultiosmaterial]
data-ctform-config-label控件的文本
data-ctform-config-labelposition控件文本的位置可选的值有[labelleftlabelrightlabeltoplabelbottom]
data-ctform-config-labelalign控件文本的对其方式可选的值[aligncenteraligntop] 只有data-ctform-config-labelposition为left或right时候才生效
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() - 返回表单数据

formCtMobileCTMibole-UImobilewebappSPAHybridCordovaAndroidiOSMaterialplayerljcWebFramework
@babel/runtime
@infinitebrahmanuniverse/nolb-_ct@everything-registry/sub-chunk-207@ctmobile/ui
1.0.1

5 years ago

1.0.0

5 years ago