效果图:
通用版本
用法:只需将相应输入域对应的div的加入“unnull”类即可。
效果:点击确认后,进行验证(成功后,锁定按钮为不可点击,同时发送Ajax请求。)
功能:点击确认后,可完成input,select域的简单验证。
html部分:
<div class="col-xs-10 well"> <h3 class="text-center">特定特征命中原始流量</h3> <div class="col-xs-7 col-xs-offset-3"> <br /> <form class="form-horizontal center" role="form"> <div class="unnull form-group"> <label class="col-sm-3 control-label"> 命令类型 </label> <div class="col-sm-5"> <select id="cmd_type" name="cmd_type" class="form-control"> <option value="0">命令类型</option> <option value="1">全部覆盖</option> <option value="2">增量,添加每条</option> <option value="3">增量,删除每条</option> </select> </div> <div class="col-sm-4 form-help"> <span></span> </div> </div> <div class="unnull form-group"> <label class="col-sm-3 control-label">指令流水号</label> <div class="col-sm-5"> <input type="text" class="form-control" id="cnf_id" name="cnf_id"> </div> <div class="col-sm-4 form-help"> <span></span> </div> </div> <div class="unnull form-group"> <label class="col-sm-3 control-label">特征</label> <div class="col-sm-5"> <input type="text" class="form-control" id="feature" name="feature"> </div> <div class="col-sm-4 form-help"> <span></span> </div> </div> <div class="form-group" style="text-align: center"> <div class="col-sm-5 col-sm-offset-3"> <button type="button" class="btn btn-success btn-block" id="aye" οnclick="CheckAdd()" data-loading-text="操作中...">确定</button> </div> </div> </form> </div> </div>
js部分:
function CheckAdd() {
var num = 0;
$(".unnull").each(function (i, ele) {
var t = 0;
var s = 0;
UnnullClear($(this));
if ($(this).find("input").val() == "") {
num++;
t = 1;
}
if ($(this).find("select").val() == 0) {
num++;
s = 1;
}
if (t == 1) {
AddError(ele, "此处为必填项");
}
if (s == 1) {
AddError(ele, "此处为必填项");
}
});
if (num == 0){
$("#aye").button('loading');
doAjax();
}
function UnnullClear(ele) {
if ($(ele).find("span").eq(0).text()!="") {
RmError(ele,"");
}
}
function AddError(ele, text) {
$(ele).find("span").eq(0).text(text);
}
function RmError(ele, text) {
$(ele).find("span").eq(0).text(text);
}
}