同步表单校验的缺点

  1. 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新)
  2. 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头开始填写(部分浏览器帮我们缓存了这些数据)

异步校验表单的初衷

  1. 提升用户体验
  2. 最大化减少网络请求,减轻服务器压力

下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号)

var BASE_PATH = '${rc.contextPath}';

var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError'); //标识用户输入的工号是否正确
var isWorkerIdCorrect = false; var ERROR_WORKER_ID_IS_NULL = "员工工号不能为空";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "请输入有效的员工工号"; //显示错误信息
function showWorkerIdError(errorMessage) {
$workerIdError.html(errorMessage);
$workerIdError.show();
} //隐藏错误信息
$workerIdInput.on('keydown', function() {
$workerIdError.hide();
}); //将上次输入的工号保存起来
$workerIdInput.on('focus', function() {
var workerId = $.trim($(this).val());
$(this).data('before', workerId);
}); //blur时进行校验
$workerIdInput.on('blur', function() {
var workerId = $.trim($(this).val());
//长度为0时,显示工号为空的错误信息
if (!workerId.length) {
showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
return false;
} //若用户当前输入的数据和上次输入的数据一样,则不调用后台接口
//假设用户输入123456,调用后台接口,返回结果为,不正确的工号
//用户将输入内容进行更改后,仍然为123456,则校验程序不会访问网络,直接显示错误信息
if (workerId == $(this).data('before')) {
if (!isWorkerIdCorrect) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
return false;
} //调用后台接口,查询此员工id是否正确
checkWorkerIdExists(workerId, function(data) {
isWorkerIdCorrect = data.isWorkerIdExists;
if (!isWorkerIdCorrect) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
}); function checkWorkerIdExists(workerId, callback) {
$.ajax({
url: BASE_PATH + '/forgotPwd/checkWorkerIdExists.htm',
data: {
workerId: workerId
},
success: callback
});
} $workerIdForm.on('submit', function() {
//只有服务器返回为true的时候,我们的表单才能提交
if (!isWorkerIdCorrect) {
$workerIdInput.focus();
return false;
}
});

上述代码写完,一个输入框的验证基本上搞定了。

我觉得还有影响用户体验的地方

  1. 还不支持回车操作,oh my god,回车也要能提交表单
  2. 若用户网速较慢,点击提交按钮,会没有任何反映,因为isWorkerIdCorrect为false,只有服务器校验成功才为true

下面是修改后的代码:

var BASE_PATH = '${rc.contextPath}';

var $workerIdInput = $('#workerIdInput');
var $workerIdError = $('#workerIdError'); //标识用户输入的工号是否正确
var isWorkerIdCorrect = false;
//标识后台校验工号是否已完成(true: 为校验中, false: 校验没开始或已结束)
var isWorkerIdLoading = false;
//标识用户是否提交了表单
var isSubmit = false; var ERROR_WORKER_ID_IS_NULL = "员工工号不能为空";
var ERROR_WORKER_ID_IS_NOT_CORRECT = "请输入有效的员工工号"; //显示错误信息
function showWorkerIdError(errorMessage) {
$workerIdError.html(errorMessage);
$workerIdError.show();
} //隐藏错误信息
$workerIdInput.on('keydown', function() {
$workerIdError.hide();
}); //将上次输入的工号保存起来
$workerIdInput.on('focus', function() {
var workerId = $.trim($(this).val());
$(this).data('before', workerId);
}); //blur时进行校验
$workerIdInput.on('blur', function() {
var workerId = $.trim($(this).val());
//长度为0时,显示工号为空的错误信息
if (!workerId.length) {
showWorkerIdError(ERROR_WORKER_ID_IS_NULL);
return false;
} //若用户当前输入的数据和上次输入的数据一样,则不调用后台接口
//假设用户输入123456,调用后台接口,返回结果为,不正确的工号
//用户将输入内容进行更改后,仍然为123456,则校验程序不会访问网络,直接显示错误信息
if (workerId == $(this).data('before')) {
if (!isWorkerIdCorrect) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
return false;
} //调用后台接口,查询此员工id是否存在
checkWorkerIdExists(workerId, function(data) {
isWorkerIdCorrect = data.isWorkerIdExists;
if (!isWorkerIdCorrect) {
showWorkerIdError(ERROR_WORKER_ID_IS_NOT_CORRECT);
}
});
}); function checkWorkerIdExists(workerId, callback) {
$.ajax({
url: BASE_PATH + '/forgotPwd/checkWorkerIdExists.htm',
data: {
workerId: workerId
},
beforeSend: function() {
//发送请求前,标识正在校验工号
isWorkerIdLoading = true;
},
success: callback,
complete: function() {
//结束后,关闭标识
isWorkerIdLoading = false;
//在后台校验数据过程中,用户若提交了表单,则在此自动提交
if (isSubmit) {
$workerIdForm.submit();
}
}
});
} //回车提交表单
$workerIdInput.on('keypress', function(e) {
if (e.which === 13) {
$(this).blur();
$workerIdForm.submit();
}
}); $workerIdForm.on('submit', function() {
//若正在后台校验工号,则标识用户提交了表单
if (isWorkerIdLoading) {
isSubmit = true;
return false;
} if (!isWorkerIdCorrect) {
$workerIdInput.focus();
return false;
}
});

最终效果,图中2个输入框均为异步校验,但效果看起来和同步的一样。

图中使用了gprs网络模拟网速较慢的情况

javascript将异步校验表单改写为同步表单的更多相关文章

  1. 使用JavaScript策略模式校验表单

    表单校验 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表 ...

  2. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  3. ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  4. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  6. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...

  7. ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建

    在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式.错误信息提示.validate方法的背后"中,了解了jQuery如何验证,如何显示错误信息,本篇要 ...

  8. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  9. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

随机推荐

  1. [Django 1.5] Windows + Apache + wsgi配置

    基本步骤 下载安装Apache http://httpd.apache.org/download.cgi. 下载安装modwsgi 模块http://code.google.com/p/modwsgi ...

  2. 读懂系统负载(Load Avg)的含义 | Devops

    有过运维Linux服务器的选手,想必对于系统平均负载(load averages)参数不会陌生吧,我们可以通过top, htop, uptime这些命令找到它们(如下图),那么我们又改如何理解它们呢, ...

  3. 在 Windows Azure 网站中进行纵向扩展和横向扩展

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...

  4. java 书籍推荐 JavaEE程序员必读图书大推荐

    java 书籍推荐 JavaEE程序员必读图书大推荐 转自:http://www.cnblogs.com/xlwmin/articles/2192775.html 下面是我根据多年的阅读和实践经验,给 ...

  5. 解决Admob Banner首次展示不显示的问题

    Admob banner在第一次虽然加载成功了,但是却不显示.然后等待60秒刷新自动刷新,banner就能正常显示. 如果你没遇到过这种情况,那可能你用的不是集成在play-services里的库,因 ...

  6. Shortest Path(思维,dfs)

    Shortest Path  Accepts: 40  Submissions: 610  Time Limit: 4000/2000 MS (Java/Others)  Memory Limit: ...

  7. How Many Maos Does the Guanxi Worth

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  8. Android SQLite Database Tutorial

    表名: 列(字段): 联系人实体类:构造方法,setters .getters方法 File:   Contact.java package com.example.sqlitetest; publi ...

  9. NET 人民币大写

    /***** HongShijin** Me@HongShijin.com** 2009-3-15 10:13:00.00000** text/C#***/ /// <summary> / ...

  10. wcf系列学习5天速成——第五天 服务托管

    今天是系列的终结篇,当然要分享一下wcf的托管方面的知识. wcf中托管服务一般有一下四种: Console寄宿:             利于开发调试,但不是生产环境中的最佳实践. winform寄 ...