javascript将异步验证形式重写为同步形式

同步表单验证的缺点。

在响应错误消息时，需要重新加载整个页面(虽然有缓存，但客户端仍然需要比较每个文件是否通过http协议更新，以保持文件最新)。服务器响应错误后，用户之前输入的所有信息都会丢失，用户需要从头填写(有些浏览器帮助我们缓存数据)。

异步验证表单的初衷。

改善用户体验，最大限度地减少网络请求，并减轻服务器压力。我们来看一个常见的异步表单检查(检查工作号是否存在于后台，并且是有效的工作号)。

检查工作编号

复制代码如下： varbase _ path=' $ { RC . context path } '；var $ workridinput=$(' # workridinput ')；var $ WorkerIderror=$(' # WorkerIderror ')；//识别用户输入的工号是否正确。var isWorkerIdCorrect=falseVar ERROR_WORKER_ID_IS_NULL='员工编号不能为空'；varerror _ worker _ id _ is _ not _ correct='请输入有效的员工编号'；//显示错误消息函数show worker error(error message){ $ workeridererror.html(error message)；$ WorkerError . show()；}//隐藏错误消息$ workeridinput。on ('keydown '，function(){ $ worker error。hide()；});//保存最后一个输入的工作编号$ worker ridingput . on(' focus '，function () {var worker id=$。修剪($(这个)。val())；$(这个)。数据(' before '，WorkerID)；});//Check $ worker utility . on(' blur '，function () {var worker ID=$。修剪($(这个)。val())模糊时；//当长度为0时，错误消息if(！WorkRid . length){ showWorkRidError(ERROR _ WORKER _ ID _ IS _ NULL)；返回false}//如果用户输入的数据与上次输入的数据相同，则不会调用后台界面。//如果用户输入123456，调用后台界面，返回的结果是工号不正确。//用户更改输入内容后，仍然是123456，所以验证者不会访问网络，直接显示错误消息if (worker ID==$ (this)。数据('。isworkridcorrect){ showworkriderror(ERROR _ WORKER _ ID _ IS _ NOT _ CORRECT)；}返回false}//调用后台界面查询该员工id是否正确。check workeridexists (workerid，function(data){ isworkerid correct=data . isworkerid exists；if(！isworkridcorrect){ showworkriderror(ERROR _ WORKER _ ID _ IS _ NOT _ CORRECT)；} });});函数checkworkridexists(Workerrid，回调){ $。Ajax({ URL : BASE _ PATH '/FogotPwd/CheckWorkerdExists . htm '，data: { workerId: workerId }，success:回调})；} $ workeridform.on ('submit '，function(){//只有当服务器返回true时，我们的表单才能提交，如果(！isworkridcorrect){ $ Workerridput . focus()；返回false}});

上面的代码写好之后，一个输入框的验证就基本完成了。

我觉得还是有影响用户体验的地方不支持回车操作。天啊，马车返回应该也能提交表格。如果用户的互联网速度较慢，单击提交按钮将不会给出任何响应，因为isWorkerIdCorrect为false，只有在服务器验证成功时才为true。

以下是修改后的代码：

复制代码代码如下： var BASE _ PATH=' $ { RC。context path } '；var $ workridinput=$(' # workridinput ')；var $ WorkerIderror=$(' # WorkerIderror ')；//标识用户输入的工号是否正确var isworkridcorrect=false//标识后台校验工号是否已完成(true:为校验中，脚手架：校验没开始或已结束)var isworkridloading=false//标识用户是否提交了表单var isSubmit=false ' var ERROR _ WORKER _ ID _ IS _ NULL='员工工号不能为空；' var ERROR _ WORKER _ ID _ IS _ NOT _ CORRECT='请输入有效的员工工号；//显示错误信息函数showWorkerIderror(错误消息){ $ WorkerIderror。html(错误消息)；$ WorkerError。show()；}//隐藏错误信息$ WorkerDisput。on('键按下'，函数(){ $ WorkerIderror。hide()；});//将上次输入的工号保存起来$ WorkerIdput。on(' focus '，function() { var workerId=$ .修剪($(这个)。val())；$(这个)。数据(' before '，WorkerID)；});//模糊时进行校验$ WorkerIdput。on(' blur '，function() { var workerId=$ .修剪($(这个)。val())；//长度为0时，显示工号为空的错误信息if(！WorkRid。长度){ showWorkRidError(ERROR _ WORKER _ ID _ IS _ NULL)；返回false} //若用户当前输入的数据和上次输入的数据一样，则不调用后台接口//假设用户输入123456,调用后台接口，返回结果为，不正确的工号//用户将输入内容进行更改后，仍然为123456,则校验程序不会访问网络，直接显示错误信息if (workerId==$(this).数据(' before '){ if(！isworkkridcorrect){ showworkriderror(ERROR _ WORKER _ ID _ IS _ NOT _ CORRECT)；}返回false} //调用后台接口，查询此员工编号是否存在checkworkridexists(workrid，function(data){ isworkkridcorrect=data。isworkridexistsif(！isworkkridcorrect){ showworkriderror(ERROR _ WORKER _ ID _ IS _ NOT _ CORRECT)；} });});函数checkworkridexists(Workerrid，回调){ $。Ajax({ URL : BASE _ PATH '/FogoTpwd/CheckWorkerdExists。htm ')，data : { Workerid : Workerid }，beforeSend:函数(){ //发送请求前，标识正在校验工号isWorkerIdLoading=true }，成功：回调，完成：函数(){ //结束后，关闭标识isworkridloading=false//在后台校验数据过程中，用户若提交了表单，则在此自动提交if(isSubmit){ $ WorkRidform。submit()；} } });}//回车提交表单$ WorkerDisput。开('按键'，函数(e){ if(e . what===13){ $(this)} .blur()；$ WorkRidform。submit()；}});$ WorkRidform。on(' submit '，function() { //若正在后台校验工号，则标识用户提交了表单if(isworkridloading){ isSubmit=true；返回false} if(！isworkkridcorrect){ $ Workeridput。焦点()；返回false } })；

最终效果，图中2个输入框均为异步校验，但效果看起来和同步的一样。图中使用了通用分组无线业务网络模拟网速较慢的情况

效果图