解决新增/修改时,表单不可重复字段的前端的重复校验。

前端验重问题真的很烦,很多字段都是不可重复的,虽然数据库设置了unique约束,但要在前端报一个具体的不可重复的错误嘛,所以每次都要发送ajax请求去数据库里查询该字段值是否重复。

修改的时候那就更烦了,如果修改的验重直接套新增的逻辑,那么如果修改前与修改后的字段值一毛一样,那就过不了验重,还得额外加个判定,是不是修改模式,如果是修改模式,如果修改后的字段值与修改前的字段值一样,那就跳过验重,直接提交。

写了几次以后,忍无可忍把这一套逻辑封装成了一个方法,舒服了。

isDuplicate: true表示重复;false表示不重复。

// 自定义一个新增/修改的数据验重方法

/**
 * @param {Object} beforeData 修改前的字段值
 * @param {Object} currentData 修改后的字段值
 * @param {Object} url ajax请求的目标url
 * @param {Object} data ajax请求的data(accessId和字段名,字段值)
 */
function checkDuplicate( beforeData, currentData, url,data) {

	// 判断是否重复的信标,true-重复|false-不重复
	var isDuplicate = false;
	// 判断是否是修改模式
	if (beforeData) {
		// 是修改模式
		if (currentData == beforeData) {
			// 如果修改前后数据一致,跳过验重机制
			isDuplicate = false;
		} else {
			// 修改后数据有变化,进入验重机制
			// 发送ajax请求到数据库验重
			$.ajax({
				url: url,
				type: 'post',
				data: data,
				async: false,
				success: function(data) {
					if (data.rows.length != 0) {
						isDuplicate = true;
					}
				}
			});
		}
	} else {
		// 不是修改模式,直接发送ajax请求验重
			$.ajax({
				url: url,
				type: 'post',
				data: data,
				async: false,
				success: function(data) {
					if (data.rows.length != 0) {
						isDuplicate = true;
					}
				}
			});
	}
	
	// return 一下验重的结果
	return isDuplicate;
}

posted on 2021-06-15 11:48  northwest  阅读(1303)  评论(0编辑  收藏  举报

导航