jQuery:前台页面常用验证方法(正则):金额、整数、长度、单选全选

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);
	}
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值