表单排版

表单验证组件已经打包为单独的组件,可脱离UI总组件单独使用。
下载组件

默认排版

0/255
<form>
<div class="ui-form-group">
<label>文本框</label>
<input type="text" name="email" class="ui-form-ip" placeholder="Enter Input Values">
</div>
<div class="ui-form-group">
<label>下拉列表</label>
<select class="ui-form-ip">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="ui-form-group">
<label>多选列表</label>
<select multiple class="ui-form-ip">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="ui-form-group">
<label>复选框</label>
<div class="ui-input-group-check">
<label class="ui-checkbox"><input type="checkbox" name="checkbox-1" checked><i></i>文字</label>
<label class="ui-checkbox"><input type="checkbox" name="checkbox-2"><i></i>文字</label>
</div>
</div>
<div class="ui-form-group">
<label>单选按钮</label>
<div class="ui-input-group-check">
<label class="ui-radio"><input type="radio" name="radio-1" checked><i></i>文字1</label>
<label class="ui-radio"><input type="radio" name="radio-1"><i></i>文字2</label>
</div>
</div>
<div class="ui-form-group">
<label>多行文本框</label>
<textarea class="ui-form-ip ui-form-limit" data-max="255" ui-rows="5"></textarea>
<div class="ui-form-limit-text"><span>0</span>/255</div>
</div>
<div class="ui-form-group">
<label>文本框只读</label>
<input type="text" name="email" disabled class="ui-form-ip" placeholder="Enter Input Values">
</div>
<button type="submit" class="ui-btn ui-btn-blue">提交</button>
</form>

横向排版

<form>
<div class="ui-form-group ui-row">
<label class="ui-col-2 ui-col-form-label">用户名:</label>
<div class="ui-col-10">
<input type="text" name="email" class="ui-form-ip" placeholder="Enter UserName">
</div>
</div>
<div class="ui-form-group ui-row">
<label class="ui-col-2 ui-col-form-label">密码:</label>
<div class="ui-col-10">
<input type="password" name="password" class="ui-form-ip" placeholder="Enter Password" autocomplete="off">
</div>
</div>
<div class="ui-form-group ui-row">
<label class="ui-col-2 ui-col-form-label-top">备注:</label>
<div class="ui-col-10">
<textarea class="ui-form-ip form-limit" data-max="255" ui-rows="5"></textarea>
</div>
</div>
<div class="ui-form-group ui-row">
<div class="ui-offset-2">
<label class="ui-checkbox"><input type="checkbox" name="check2" class="ui-form-ip-check" checked><i></i>同意用户协议</label>
</div>
</div>
<div class="ui-form-group ui-row">
<div class="ui-offset-2">
<button type="submit" class="ui-btn ui-btn-red ui-mr">注册</button><button type="button" class="ui-btn ui-back">返回</button>
</div>
</div>
</form>

组合排版

¥
<form>
<div class="ui-form-group">
<label>Input</label>
<div class="ui-input-group">
<span class="before"><span class="ui-icon-user"></span></span>
<input type="text" name="email" class="ui-form-ip radius-left-none" placeholder="Enter Input Values">
</div>
</div>
<div class="ui-form-group">
<label>Input</label>
<div class="ui-input-group">
<span class="before">¥</span>
<input type="text" name="email" class="ui-form-ip radius-none" placeholder="Enter Input Values">
<span class="after">元</span>
</div>
</div>
<div class="ui-form-group">
<label>Input</label>
<div class="ui-input-group">
<input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
<span class="after">元</span>
</div>
</div>
<div class="ui-form-group">
<label>Input</label>
<div class="ui-input-group">
<input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
<span class="code"><img src="http://www.sdcms.cn/home-user-code.html"></span>
</div>
</div>
<div class="ui-form-group">
<label>Input</label>
<div class="ui-input-group">
<input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
<a class="after" href="javascript:;">发送验证码</a>
</div>
</div>
<div class="ui-form-group">
<label>Input</label>
<div class="ui-input-group">
<input type="text" name="email" class="ui-form-ip radius-right-none" placeholder="Enter Input Values">
<button type="button" class="after"><div class="ui-icon-search"></div></button>
</div>
</div>
<button type="submit" class="ui-btn ui-btn-blue">Sign in</button>
</form>

图标

 
<form method="post">
<div class="ui-form-group">
<i class="ui-form-icon ui-icon-user"></i>
<input type="text" name="uname" class="ui-form-ip" data-rule="用户名:required;username;ajax(ajax.php);" placeholder="请输入用户名">
</div>
<div class="ui-form-group">
<i class="ui-form-icon ui-icon-lock"></i>
<input type="password" name="upass" class="ui-form-ip" data-rule="密码:required;password;" placeholder="请输入密码" autocomplete="off">
</div>
<button type="submit" class="ui-btn ui-btn-red ui-form-submit" data-type="2">登录</button> <button type="button" class="ui-btn ui-form-reset">取消</button>
</form>

表单验证

0/255
  
<form class="ajaxForm">
<div class="ui-form-group">
<i class="ui-form-icon ui-icon-user"></i>
<input type="text" name="uname" class="ui-form-ip" data-rule="用户名:required;username;ajax(ajax.php);" data-token="123456" placeholder="请输入用户名">
</div>
<div class="ui-form-group">
<label>用户名</label>
<input type="text" name="uname" class="ui-form-ip" data-rule="用户名:required;username;ajax(ajax.php);" data-token="654321" placeholder="请输入用户名">
</div>
<div class="ui-form-group">
<label>密码</label>
<input type="text" name="upass" id="upass" class="ui-form-ip" data-rule="密码:required;password;" placeholder="请输入密码" autocomplete="off">
</div>
<div class="ui-form-group">
<label>确认密码</label>
<input type="text" name="urepass" class="ui-form-ip" data-rule="确认密码:required;password;match(upass)" placeholder="请输入确认密码" autocomplete="off">
</div>
<div class="ui-form-group">
<label>单选按钮</label>
<div class="ui-input-group-check">
<label class="ui-radio"><input type="radio" name="radio" id="radio-1" class="ui-form-ip-check" value="1" data-rule="单选按钮:checked;"><i></i>Radio-1</label>
<label class="ui-radio"><input type="radio" name="radio" id="radio-2" class="ui-form-ip-check" value="2" data-rule="单选按钮:checked;"><i></i>Radio-2</label>
</div>
</div>
<div class="ui-form-group">
<label>复选框</label>
<div class="ui-input-group-check">
<label class="ui-checkbox"><input type="checkbox" name="check31" value="1" class="ui-form-ip-check" data-rule="复选框:checked;length(>=2#至少选择2项);"><i></i>CheckBox1-1</label>
<label class="ui-checkbox"><input type="checkbox" name="check31" value="2" class="ui-form-ip-check" data-rule="复选框:checked;length(>=2#至少选择2项);"><i></i>CheckBox1-2</label>
</div>
</div>
<div class="ui-form-group">
<label>复选框</label>
<div class="ui-input-group-check">
<input type="checkbox" name="check3" id="checkbox-1" value="1" class="ui-form-ip-check" data-rule="复选框:checked;"><label for="checkbox-1">CheckBox1-1</label>
<input type="checkbox" name="check3" id="checkbox-2" value="2" class="ui-form-ip-check" data-rule="复选框:checked;"><label for="checkbox-2">CheckBox1-2</label>
</div>
</div>
<div class="ui-form-group">
<label>禁用</label>
<input type="text" name="ready" id="ready" disabled class="ui-form-ip" data-rule="只读:required;" placeholder="测试只读">
</div>
<div class="ui-form-group">
<label>邮箱</label>
<div class="ui-input-group">
<span class="before"><span class="ui-icon-mail"></span></span>
<input type="text" name="email" class="ui-form-ip radius-none" data-rule="邮箱:required;email;" placeholder="请输入邮箱">
<button type="button" class="after">发送验证码</button>
</div>
</div>
<div class="ui-form-group">
<label>数值</label>
<input type="text" name="number" class="ui-form-ip" data-rule="数值:required;dot;between(10);">
</div>
<div class="ui-form-group">
<label>城市</label>
<select name="city" class="ui-form-ip" data-rule="城市:required;">
<option value="">请选择城市</option>
<option value="南京">南京</option>
<option value="苏州">苏州</option>
<option value="无锡">无锡</option>
<option value="常州">常州</option>
</select>
</div>
<!--如果表单元素状态不可见,则不验证-->
<div class="ui-form-group ui-hide">
<label>备注</label>
<textarea name="content" class="ui-form-ip form-limit" ui-rows="3" data-rule="备注:required;"></textarea>
<div class="form-limit-text"><span>0</span>/255</div>
</div>
<button type="submit" class="ui-btn ui-btn-blue">提交</button> <button type="button" class="ui-btn ui-form-reset">重设</button> <button type="button" class="ui-btn" onClick="$('#ready').attr('disabled',false)">只读</button>
</form>
<script>
$(function()
{
$(".ajaxForm").form(
{
type:1,//1:普通验证(默认),2:弹出错误提示
hide:1,//1:不验证隐藏元素(默认),2:验证隐藏的元素(用于选项卡类型表单)
show:0,//(是否一次性验证,可选择(0或1),默认为0,当type为2时候,只能为0,否则可以为1)
align:'top-center',//当type=2时,可以设置此参数
result:function(e)
{
//获取表单数据方法
alert($(e).serialize())
}
});
});
</script>