Javaｓｃｒｉｐｔ重写异步检查表同步形式

同步表单检查的缺点

当响应错误信息时，我们需要重新加载整个页面。尽管有缓存，客户机仍然需要将每个文件与HTTP协议进行比较，以保持文件最新。

服务器响应错误后，用户输入的信息丢失。用户需要从一开始就填写。

异步检查表的初衷

改善用户体验

最大化减少网络请求并减少服务器压力

让我们来看一个常见的异步表单检查（检查号是否在后台，有一个有效的数字）
校验数

复制代码代码如下所示：

无功base_path = $ { }contextpath RC；

workeridinput = $（var $ ' # workeridinput）；

workeriderror = $（var $ ' # workeriderror）；

用户输入标识号正确

无功isworkeridcorrect = false；

无功error_worker_id_is_null =员工编号不能为空；

无功error_worker_id_is_not_correct =请输入一个有效的员工数；

显示错误信息

功能showworkeriderror（错误信息）{

workeriderror.html美元（错误信息）；

workeriderror.show美元（）；

}

隐藏错误信息

workeridinput.on美元（'keydown，函数（）{（）{

workeriderror.hide美元（）；

}）；

最后一个作业号输入/保存

workeridinput.on美元（'focus'，函数（）{（）{

无功workerid =美元。修剪（$（this）。瓦迩（）））；

$（这）。数据（以前，workerid）；

}）；

在/模糊状态下签出

workeridinput.on美元（'blur，函数（）{（）{

无功workerid =美元。修剪（$（this）。瓦迩（）））；

0的长度，显示错误信息号为空。

如果（！workerid。长度）{

showworkeriderror（error_worker_id_is_null）；

返回false；

}

如果当前用户输入数据和最后输入数据，则不称为后台接口。

假设用户输入123456，回调接口，返回结果，不正确的数字。

用户将改变输入，仍然是123456，奇偶校验程序不能直接访问网络，显示错误信息。

如果（workerid = = $（this）。数据（以前））{

如果（！isworkeridcorrect）{

showworkeriderror（error_worker_id_is_not_correct）；

}

返回false；

}

回调接口，查询id工作人员是否正确

checkworkeridexists（workerid，功能（数据）{

isworkeridcorrect = data.isworkeridexists；

如果（！isworkeridcorrect）{

showworkeriderror（error_worker_id_is_not_correct）；

}

}）；

}）；

功能checkworkeridexists（workerid，回调）{

$ ajax（{

网址：base_path + / / fortpwd checkworkeridexists .htm，

数据：{

workerid：workerid

}，

成功：回调

}）；

}

workeridform.on美元（他们服从真主，函数（）{（）{

只有当我们表单可以提交时，服务器才返回true

如果（！isworkeridcorrect）{

workeridinput.focus美元（）；

返回false；

}

}）；
编写上述代码后，输入框的验证基本完成。

我认为还有一个地方可以影响用户体验。

不支持退货操作，哦我的D，还可以提交退货表格。

如果用户的网络速度慢，点击提交按钮，将不会有任何的反映，因为isworkeridcorrect是假的，只有服务器进行了验证

下面是修改后的代码：

复制代码代码如下所示：

无功base_path = $ { }contextpath RC；

workeridinput = $（var $ ' # workeridinput）；

workeriderror = $（var $ ' # workeriderror）；

用户输入标识号正确

无功isworkeridcorrect = false；

是否已完成后台检查号标识（true：检查、false：检查没有启动或结束）

无功isworkeridloading = false；

如果用户提交表单徽标

Var isSubmit = false;

无功error_worker_id_is_null =员工编号不能为空；

无功error_worker_id_is_not_correct =请输入一个有效的员工数；

显示错误信息

功能showworkeriderror（错误信息）{

workeriderror.html美元（错误信息）；

workeriderror.show美元（）；

}

隐藏错误信息

workeridinput.on美元（'keydown，函数（）{（）{

workeriderror.hide美元（）；

}）；

最后一个作业号输入/保存

workeridinput.on美元（'focus'，函数（）{（）{

无功workerid =美元。修剪（$（this）。瓦迩（）））；

$（这）。数据（以前，workerid）；

}）；

在/模糊状态下签出

workeridinput.on美元（'blur，函数（）{（）{

无功workerid =美元。修剪（$（this）。瓦迩（）））；

0的长度，显示错误信息号为空。

如果（！workerid。长度）{

showworkeriderror（error_worker_id_is_null）；

返回false；

}

如果当前用户输入数据和最后输入数据，则不称为后台接口。

假设用户输入123456，回调接口，返回结果，不正确的数字。

用户将改变输入，仍然是123456，奇偶校验程序不能直接访问网络，显示错误信息。

如果（workerid = = $（this）。数据（以前））{

如果（！isworkeridcorrect）{

showworkeriderror（error_worker_id_is_not_correct）；

}

返回false；

}

回调接口，查询id雇员的存在

checkworkeridexists（workerid，功能（数据）{

isworkeridcorrect = data.isworkeridexists；

如果（！isworkeridcorrect）{

showworkeriderror（error_worker_id_is_not_correct）；

}

}）；

}）；

功能checkworkeridexists（workerid，回调）{

$ ajax（{

网址：base_path + / / fortpwd checkworkeridexists .htm，

数据：{

workerid：workerid

}，

beforesend：函数（）{

在检查标记为否之前发送请求。

isworkeridloading =真；

}，

成功：回调，

完成：函数（）{

关闭徽标之后/。

isworkeridloading = false；

在后台检查数据过程时，如果用户提交，则自动提交此数据

如果（issubmit）{

workeridform.submit美元（）；

}

}

}）；

}

输入/提交表单

workeridinput.on美元（'keypress功能（e）{

如果（e.which = 13）{

美元（这个），Blur（）；

workeridform.submit美元（）；

}

}）；

workeridform.on美元（他们服从真主，函数（）{（）{

如果背景检查是工作号，则标识用户提交表单。

如果（isworkeridloading）{

issubmit =真；

返回false；

}

如果（！isworkeridcorrect）{

workeridinput.focus美元（）；

返回false；

}

}）；
最后的效果，图中的2个输入框是异步检查，但效果看起来与同步相同。

该图使用GPRS网络模拟慢速网络速度。

设计素描