表单

3.4.1 input,textarea 文本域 文本区域

文本框样式 .input-text,文本域样式 .textarea,追加 .radius 就会显示css3圆角效果。

默认效果 class="" 圆角效果 class=""
input-text input-text radius
input-text input-text radius
textarea textarea radius

不支持圆角和背景渐变浏览器,如IE低版本,会显示扁平纯色直角效果。

文本框尺寸

定义了五种规格尺寸

文本框 class=""
input-text radius size-MINI
input-text radius size-S
input-text radius size-M
input-text radius size-L
input-text radius size-XL

HTML代码

<input type="text" placeholder="迷你尺寸" class="input-text radius size-MINI">
<input type="text" placeholder="小尺寸" class="input-text radius size-S">
<input type="text" placeholder="默认尺寸" class="input-text radius size-M">
<input type="text" placeholder="大尺寸" class="input-text radius size-L">
<input type="text" placeholder="特大尺寸" class="input-text radius size-XL">

CSS代码

/*默认状态*/
.input-text,.textarea{box-sizing:border-box;border:solid 1px #ddd;width:100%;
-webkit-transition:all 0.2s linear 0s;
-moz-transition:all 0.2s linear 0s;
-o-transition:all 0.2s linear 0s;
transition:all 0.2s linear 0s}
.textarea{ height:auto; font-size:14px; padding:4px}
.input-text:hover,.textarea:hover{border: solid 1px #3bb4f2}
/*得到焦点后*/
.input-text.focus,textarea.focus{border:solid 1px #0f9ae0 \9;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)}
/*不可点击*/
.input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus{background-color:#ededed; cursor:default;border-color: #ddd;
-webkit-box-shadow:inset 0 2px 2px #e8e7e7;
-moz-box-shadow:inset 0 2px 2px #e8e7e7;
box-shadow:inset 0 2px 2px #e8e7e7}
/*只读状态*/
.input-text.disabled,.textarea.disabled{background-color:#e6e6e6; cursor:default}
/*阴影*/
.input-text.box-shadow,.textarea.box-shadow{-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}

3.4.2 radio,checkbox 单选 多选

使用icheck插件进行美化。

须单独引用icheck.css,jquery.icheck.min.js两个文件。 打包下载

HTML代码

<div class="skin-minimal">
<div class="check-box">
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1">复选框</label>
</div>
<div class="check-box">
<input type="checkbox" id="checkbox-2" checked>
<label for="checkbox-2">复选框 checked状态</label>
</div>
<div class="check-box">
<input type="checkbox" id="checkbox-disabled" disabled>
<label for="checkbox-disabled">Disabled</label>
</div>
<div class="check-box">
<input type="checkbox" id="checkbox-disabled-checked" checked disabled>
<label for="checkbox-disabled-checked">Disabled &amp; checked</label>
</div>
</div>
<div class="mt-20 skin-minimal">
<div class="radio-box">
<input type="radio" id="radio-1" name="demo-radio1">
<label for="radio-1">单选按钮</label>
</div>
<div class="radio-box">
<input type="radio" id="radio-2" name="demo-radio1" checked>
<label for="radio-2">单选按钮 checked状态</label>
</div>
<div class="radio-box">
<input type="radio" id="radio-disabled" disabled>
<label for="radio-disabled">Disabled</label>
</div>
<div class="radio-box">
<input type="radio" id="radio-disabled-checked" checked disabled>
<label for="radio-disabled-checked">Disabled &amp; checked</label>
</div>
</div>

JS代码

$(function(){
$('.skin-minimal input').iCheck({
checkboxClass: 'icheckbox-blue',
radioClass: 'iradio-blue',
increaseArea: '20%' }); });

Switch 效果

须单独引用bootstrapSwitch.css,bootstrapSwitch.js这两个文件。 打包下载

点击查看更多效果

3.4.3 select 下拉框

select是个奇葩的表单组件,是表单元素中通过css最难美化的一个,各个浏览器显示都存在很大差异。

原生效果

原生美化方式:

1、为select外层嵌套个 标签,设置边框,圆角,隐藏掉select本身的表框。

HTML代码

<span class="select-box">
  <select class="select" size="1" name="demo1">
    <option value="" selected>默认select</option>
    <option value="1">菜单一</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>

CSS代码

/*方法一、修改源生*/
.select-box{border:solid 1px #ddd;box-sizing:border-box;vertical-align:middle; width:100%; display:inline-block;}
	.select{border:solid 1px #ddd;box-sizing:border-box;cursor: pointer;line-height:normal;font-weight: normal;width:100%; white-space:nowrap}
.select-box .select{ border:none}
.select-box.inline,.select-box.inline .select{ width:auto}
.select-box,.select-box.size-M{padding:4px 5px}
	.select,.size-M .select{font-size: 14px}
.select-box.size-MINI{padding:0px 5px}
	.size-MINI .select{font-size: 12px}
.select-box.size-S{padding:3px 5px}
	.size-S .select{font-size: 12px}
.select-box.size-L{padding:8px 5px}
	.size-L .select{font-size: 16px}
.select-box.size-XL{padding:10px 5px}
	.size-XL .select{font-size: 18px}
@media (max-width: 767px) {
	.responsive .select-box{ border:none}
	.responsive .select-box .select,
	.responsive .select{border:solid 1px #ddd; padding:10px;font-size:16px}
	.responsive .select-box,
	.responsive .select-box.size-M,
	.responsive .select-box.size-MINI,
	.responsive .select-box.size-S,
	.responsive .select-box.size-L,
	.responsive .select-box.size-XL{ height:auto; padding:0}
}

3.4.4 input-file 文件上传

input file 是另一个奇葩组件,一直以来都是前端开发的噩梦,原生的基本无法通过CSS美化。基于原生的做法:把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。优点:完全源生。兼容性好,统一浏览器显示效果。

原生效果

上传按钮

浏览文件

带文本框

浏览文件

手动在文本框上加style="width: " 来控制input框的宽度。

HTML代码

//上传按钮
<span class="btn-upload">
  <a href="javascript:void();" class="btn btn-primary radius"><i class="iconfont">&#xf0020;</i> 浏览文件</a>
  <input type="file" multiple name="file_0" class="input-file">
</span>

//带文本框
<span class="btn-upload form-group">
  <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="iconfont">&#xf0020;</i> 浏览文件</a>
  <input type="file" multiple name="file-1" class="input-file">
</span>

CSS代码

.btn-upload{position: relative; display:inline-block;height:36px; *display:inline;overflow:hidden;vertical-align:middle;cursor:pointer}
.upload-url{cursor: pointer}
.input-file{position:absolute; right:0; top:0; cursor: pointer; z-index:1; font-size:30em; *font-size:30px;opacity:0;filter: alpha(opacity=0)}
.btn-upload .input-text{ width:auto;}
.form-group .upload-btn{ margin-left:-1px}

3.4.5 表单布局

表单布局

3.4.6 表单验证

两种验证插件:jQuery.Validate.js和Validform.js

jQuery.ValidateValidform

从H-ui_v2.1.6版开始,表单验证将引入jQuery Validate插件,相信很多人都用过,而且非常熟悉。jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。更重要的是他是由jQuery 团队、 jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的。具体我们可以访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

具体的使用教程,可移步慕课网在线免费学习 http://www.imooc.com/learn/385

引入脚本

<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.min.js"></script>

validate-methods.js 为扩展的验证规则

messages_zh.js 为验证提示文件

默认校验规则

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#password" 输入值必须和 #password 相同,通常用于密码验证。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
带验证表单

0/500

本站郑重声明:H-ui框架直接使用了Validform.js作为表单验证。 本人研究了很多表单验证插件,最后发现Validform.js比较方便、简单,相对灵活性比较高,在这我代表H-ui由衷的像作者Validform致敬。 Validform.js表单验证插件归原作者所有,本站只做技术研究和学习,如果大家感觉好方便,请联系移步http://validform.rjboy.cn/联系原作者购买授权。如有冒犯还请立即通知我们,我们会立即撤下相关资源。如果您和本人有共同的志向,可以合作。

需引入Validform_v5.3.2.js

带验证表单

0/500