1、这是用的bootstrap模态框
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form action="addGoods.do" method="post"
οnsubmit="return checkForm();" id="frm">
<div class="modal-content">
<div class="modal-header" style="background: #8DDD9C;">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">
新增商品
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-3">
名称:
</div>
<div class="col-sm-6">
<input name="name" class="form-control" maxlength="25">
</div>
</div>
<div class="row">
<div class="col-sm-3">
类型:
</div>
<div class="col-sm-6">
<select name="type" class="form-control">
<option value="电子消费产品">
电子消费产品
</option>
<option value="家用电器">
家用电器
</option>
<option value="休闲食品">
休闲食品
</option>
<option value="其他">
其他
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-3">
单价:
</div>
<div class="col-sm-6">
<input name="price" size="15" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-3">
数量:
</div>
<div class="col-sm-6">
<input name="num" size="15" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-3">
日期:
</div>
<div class="col-sm-6">
<input type="date" name="createdate" size="15"
class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-3">
总价:
</div>
<div class="col-sm-6">
<input name="total" size="15" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-3">
描述:
</div>
<div class="col-sm-6">
<input name="description" size="15" class="form-control"
maxlength="25">
</div>
</div>
</div>
<div class="modal-footer">
<span style="color: red; float: left">(以上所填皆不可为空)</span>
<input type="submit" value="确定" class="btn"
style="background: #8DDD9C;">
<input type="button" value="取消" class="btn btn-default"
data-dismiss="modal">
</div>
</div>
</form>
</div>
</div>
1、//判断数量框是否为非零整数
$("[name=num]").keyup(function() {
if (!/^[1-9]\d*$/.test(this.value)) {
alert('请输入整数');
this.value = '';
}
});
2、//判断单价框是否为金额(金额:整数,1位小数或者2位小数)
$("[name=price]")
.blur(
function() {
if (!/^(?:[1-9][0-9]*(?:\.[0-9]{1,2})?|0(?:\.[0-9]{1,2})?)$/
.test(this.value)) {
alert('只能输入数字,小数点后只能保留两位');
this.value = "";
}
});
3、//添加模态框中总价的计算,会根据数量以及单价变化而变化
//当单价发生变化
$("[name=price]").change(
function() {
var total = parseInt($("[name=num]").val())
* parseFloat($("[name=price]").val(), 2);
$("[name=total]").val();
$("[name=total]").val(total);
});
//当产品数量发生变化
$("[name=num]").change(
function() {
var total = parseInt($("[name=num]").val())
* parseFloat($("[name=price]").val());
$("[name=total]").val();
$("[name=total]").val(total);
});
//判断姓名框、描述框、类型款长度是不是超出
$("[name=name]").bind("input propertychange", function() {
if (this.value.length == 25) {
alert("不超过25个汉字(包括数字、标点等)!");
}
});
$("[name=description]").bind("input propertychange",
function() {
if (this.value.length == 25) {
alert("不超过25个汉字(包括数字、标点等)!");
}
});
$("[name=type]").bind("input propertychange", function() {
if (this.value.length == 25) {
alert("不超过25个汉字(包括数字、标点等)!");
}
});
//判断输入框中的值是否为空
function checkForm(frm) {
var textFlag = true;
$("#frm input").each(function(i, obj) {
if (obj.value == "") {
alert("请将信息填写完整!");
textFlag = false;
return false;
} else {
textFlag = true;
}
});
if (textFlag == true) {
alert("添加成功!");
}
return textFlag;
}
全选按钮
//全选按钮
function chk_all() {
var arrChk = $("[name=chk]");
if ($("#checkall").prop("checked")) {
arrChk.each(function() {
$(this).prop("checked", true);
});
} else {
arrChk.each(function() {
$(this).prop("checked", false);
});
}
}
//商品的选择按钮
function check() {
var arrChk = $("[name=chk]");
var flag = true;
arrChk.each(function() {
if ($(this).prop("checked") == false) {
flag = false;
}
});
if (flag == true) {
$("#checkall").prop("checked", true);
} else {
$("#checkall").prop("checked", false);
}
}