原创fomantic-ui form表单的使用总结

表单：
<form class="ui form"></form>
提交表单时如想显示转圈加载效果请加上样式，如下：
class="ui loading form" 或 class="ui blue double loading form"

布局：
============================
分组显示：
<div class="fields">
<div class="field">....</div>
<div class="field">....</div>
<div class="field">....</div>
</div>
一行显示等宽分组：
<div class="three fields">
<div class="field">....</div>
<div class="field">....</div>
<div class="field">....</div>
</div>
一行显示自定义宽分组（值1-16）
<div class="inline fields">
<div class="eight wide field">....</div>
<div class="three wide field">....</div>
<div class="five wide field">....</div>
</div>
备注1-16英文单词：
one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen.
还有等分可以在form标签样式加上：class="ui equal width form"
============================

文本框：
<div class="field">
<label>标题</label>
<input type="text" name="title" placeholder="请输入标题">
</div>
如想在标题上加*号代表必填项可加样式：required，如：class="required field"

密码框：
<div class="field">
<label>标题</label>
<input type="password" name="password" placeholder="请输入密码">
</div>

文本域：
<div class="field">
<label>文本域</label>
<textarea rows="2"></textarea>
</div>
如想透明不要边框可加上样式transparent，如下：
<textarea class="transparent"></textarea>

复选框：
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>Checkbox</label>
</div>
</div>
可改变复选框样式，比如，滑杆样式：ui slider checkbox，切换样式：ui toggle checkbox
此样式需要加载JS代码：$('.ui.checkbox').checkbox();

单选框：
<div class="field">
<div class="ui radio checkbox checked">
<input type="radio" name="fruit" checked="" tabindex="0" class="hidden">
<label>Apples</label>
</div>
</div>
此样式需要加载JS代码：$('.ui.radio.checkbox').checkbox();

============================
下拉框(select)单选：
<div class="field">
<label>选择城市</label>
<select class="ui dropdown" name="city">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</div>
如想带搜索加上search，如： class="ui search dropdown"
如需要多选需要加上multiple，如：<select multiple="" class="ui dropdown">
带图标下拉列表(input)单选：
<div class="field">
<label>选择银行卡类型</label>
<div class="ui selection dropdown">
<input type="hidden" name="card">
<div class="default text">Type</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="visa"><i class="visa icon"></i>Visa</div>
<div class="item" data-value="amex"><i class="amex icon"></i>American Express</div>
<div class="item" data-value="discover"><i class="discover icon"></i>Discover</div>
</div>
</div>
</div>
带图片下拉列表(input)多选：
<div class="field">
<label>选择收件人:</label>
<div class="ui multiple search selection dropdown">
<input type="hidden" name="receipt">
<i class="dropdown icon"></i>
<div class="default text">Saved Contacts</div>
<div class="menu">
<div class="item" data-value="jenny" data-text="Jenny">
<img class="ui mini avatar image" src="/static/images/avatar/nan.jpg">
Jenny Hess
</div>
<div class="item" data-value="elliot" data-text="Elliot">
<img class="ui mini avatar image" src="/static/images/avatar/tom.jpg">
Elliot Fu
</div>
</div>
</div>
</div>
所有下拉列表都需要加载JS代码：$('.selection.dropdown').dropdown();
============================

日历框：
<div class="field">
<label>日期</label>
<div class="ui calendar">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Pick up a date" name="date">
</div>
</div>
</div>
此样式需要加载JS代码：$('.ui.calendar').calendar({ type: 'date' });

文件域1：
<div class="ui file input"><input type="file"></div>
文件域2：
<input type="file" id="invisibleupload1" class="ui invisible file input">
<label for="invisibleupload1" class="ui red icon button">
<i class="file icon"></i>Open any file
</label>

提示信息框：
<div class="ui success message">
<div class="header">Form Completed</div>
<p>You're all signed up for the newsletter.</p>
</div>
提示有四种：成功 success、错误 error、警告 warning、信息 info
以上四种提示可用于表单字段提示状态，比如：
<div class="field error"></div>
<div class="field success"></div>
<div class="field warning"></div>
<div class="field info"></div>

禁止文本框：
<div class="disabled field">
<label>Name</label>
<input placeholder="禁止输入" type="text" disabled="" tabindex="-1">
</div>

只读文本框：
<div class="field">
<label> Name</label>
<input placeholder="只能看哦" readonly="" type="text">
</div>

表单大小样式：
<form class="ui small form"></form>
输入框大小样式：
<div class="ui mini icon input">
<input type="text" placeholder="Search mini...">
<i class="search icon"></i>
</div>
下拉列表大小样式：
<div class="ui mini selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Mini</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
大小值：mini、tiny、small、large、big、huge、massive

提交按钮：<div class="ui submit button">Submit</div>
重置按钮：<div class="ui reset button">Reset</div> ，对应JS：$('form').form('reset');
清除按钮：<div class="ui clear button">Clear</div> ，对应JS：$('form').form('clear');
按钮颜色样式：primary、secondary、red、orange、yellow、olive、green、teal、blue、violet、purple、pink、brown、grey、black,也可以只是显示边框，那就需要再加上样式basic，比如：class="ui primary basic button"
按钮大小样式：mini、tiny、small、large、big、huge、massive，比如：class="mini ui button"

表单验证提交：

$('form').form({
        inline:true,
        prompt:{
          empty:'必填项不能为空', minCount:'至少有{ruleValue}个选项，请以英文逗号“,”隔开', minLength:'不少于{ruleValue}个字符'
        },
        fields: {
          title: 'empty',
          password: ['minLength[6]', 'empty'],
          type: ['minCount[3]', 'empty'],
terms : 'checked',
regex:{
identifier  : 'regex',
        rules: [
          {
            type   : 'regExp[/^[a-z0-9_-]{4,16}$/]',
            prompt : 'Please enter a 4-16 letter username'
          }
        ]
}
        },
        onSuccess(event, fields){
          //let loading = setTimeout(function(){$('form').addClass('loading');}, 500);
console.log(fields);
            //clearTimeout(loading); setTimeout(function(){$('form').removeClass('loading');}, 500);
          return false;
        }
});

//以下为prompt提示内容：
prompt: {
  empty                : '{name} must have a value',
  checked              : '{name} must be checked',
  email                : '{name} must be a valid e-mail',
  url                  : '{name} must be a valid url',
  regExp               : '{name} is not formatted correctly',
  integer              : '{name} must be an integer',
  decimal              : '{name} must be a decimal number',
  number               : '{name} must be set to a number',
  is                   : '{name} must be \'{ruleValue}\'',
  isExactly            : '{name} must be exactly \'{ruleValue}\'',
  not                  : '{name} cannot be set to \'{ruleValue}\'',
  notExactly           : '{name} cannot be set to exactly \'{ruleValue}\'',
  contain              : '{name} cannot contain \'{ruleValue}\'',
  containExactly       : '{name} cannot contain exactly \'{ruleValue}\'',
  doesntContain        : '{name} must contain \'{ruleValue}\'',
  doesntContainExactly : '{name} must contain exactly \'{ruleValue}\'',
  minLength            : '{name} must be at least {ruleValue} characters',
  exactLength          : '{name} must be exactly {ruleValue} characters',
  maxLength            : '{name} cannot be longer than {ruleValue} characters',
  size                 : '{name} must have a length between {min} and {max} characters',
  match                : '{name} must match {ruleValue} field',
  different            : '{name} must have a different value than {ruleValue} field',
  creditCard           : '{name} must be a valid credit card number',
  minCount             : '{name} must have at least {ruleValue} choices',
  exactCount           : '{name} must have exactly {ruleValue} choices',
  maxCount             : '{name} must have {ruleValue} or less choices',
  addErrors            : '{name}: {error}',
}

表单赋值：

$('form').form('set values', {
name : 'Jack',
gender : 'male',
colors : ['red', 'grey'],
username : 'jlukic',
password : 'youdliketoknow',
terms  : true
});

官方相关链接：

表单样式：https://fomantic-ui.com/collections/form.html

表单验证：https://fomantic-ui.com/behaviors/form.html

输入框：https://fomantic-ui.com/elements/input.html

下拉列表：https://fomantic-ui.com/modules/dropdown.html

按钮样式：https://fomantic-ui.com/elements/button.html