使用jquery进行多行表格数据验证

现有如下表单，是一个表格形式的。

需要对名称、手机、邮箱这3列做校验，要求：

如果该行的名称输错，则提示第几行的名称字段输入错误；后续的字段如果错误，不再进行校验

页面html（tableValidate.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <head>
        <title>多行表格数据验证</title>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="tableValidate.js"></script>
    </head>
    <body>
        <table id="customerTable">
			<tr>
				<th>名称</th>
				<th>事项</th>
				<th>手机</th>
				<th>邮箱</th>
				<th>备注</th>
			</tr>
			<tr>
				<td><input type="text" name="cname"  value="1"/></td>
				<td><input type="text" name="matter" value="2"/></td>
				<td><input type="text" name="mobile" value="3"/></td>
				<td><input type="text" name="email"  value="4"/></td>
				<td><input type="text" name="remark" value="5"/></td>
			</tr>
			<tr>
				<td><input type="text" name="cname"  value="1"/></td>
				<td><input type="text" name="matter" value="2"/></td>
				<td><input type="text" name="mobile" value="3"/></td>
				<td><input type="text" name="email"  value="4"/></td>
				<td><input type="text" name="remark" value="5"/></td>
			</tr>
			<tr align="center">
				<td colspan="5">
					<input type="button" value="保存" onclick="saveData()"/>
				</td>
			</tr>
		</table>
</html>

该验证的js代码（tableValidate.js）：

function saveData() {
	var tableObj = $("#customerTable");
	var columnTitle = tableObj.find("th"); // 列标题
	var flag = true;
	var errMessage = "";
	
	// 数据校验
	var trsData = tableObj.find("tr:gt(0):lt(-1)");
	trsData.each(function(row, trData){
		var inputsData = $(trData).find("td input");
		inputsData.each(function(index, value){
			var resultObj = checkData(row, index, $(value)[0]);
			flag = resultObj.flag;
			errMessage = resultObj.errMessage;
			if(!flag) {
				return false;
			}
		});
		if(!flag) {
			return false;
		}
	});
	if(!flag) {
		alert(errMessage);
	}
	return flag;
}

function checkData(row, index, inputData) {
	var errMessage = "第"+(row+1)+"行";
	var flag = true;
	switch(index+1){
		case 1: // 名称
			if(!checkOne(inputData)) {
				flag = false;
				errMessage += "名称错误";
			}
			break;
		case 3: // 手机
			if(!checkThree(inputData)) {
				flag = false;
				errMessage += "手机错误";
			}
			break;
		case 4: // 邮箱
			if(!checkFour(inputData)) {
				flag = false;
				errMessage += "邮箱错误";
			}
			break;
	}
	
	// 定义返回结果
	var resultObj = {
		flag: flag,
		errMessage: errMessage
	};
	return resultObj;
}

// 检查名称是否为1
function checkOne(obj) {
	var flag = true;
	if(obj.value!="1") {
		flag = false;
	}
	return flag;
}

// 检查手机是否为3
function checkThree(obj) {
	var flag = true;
	if(obj.value!="3") {
		flag = false;
	}
	return flag;
}

// 检查邮箱是否为4
function checkFour(obj) {
	var flag = true;
	if(obj.value!="4") {
		flag = false;
	}
	return flag;
}

参考链接： js弹出框乱码问题

使用jquery进行多行表格数据验证

猜你喜欢