javascript将异步校验表单改写为同步表单


Posted in Javascript onJanuary 27, 2015

同步表单校验的缺点

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

异步校验表单的初衷

提升用户体验
最大化减少网络请求,减轻服务器压力
下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号)

javascript将异步校验表单改写为同步表单

校验工号

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;

  }

});

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

我觉得还有影响用户体验的地方
还不支持回车操作,oh my god,回车也要能提交表单
若用户网速较慢,点击提交按钮,会没有任何反映,因为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将异步校验表单改写为同步表单

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 #Javascript
javascript批量修改文件编码格式的方法
Jan 27 #Javascript
JavaScript中的包装对象介绍
Jan 27 #Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 #Javascript
浅谈JavaScript Math和Number对象
Jan 26 #Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 #Javascript
javascript中Object使用详解
Jan 26 #Javascript
You might like
php绘图之加载外部图片的方法
2015/01/24 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
用JS实现的一个include函数
2007/07/21 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
详解Python中for循环的使用
2015/04/14 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
网络方面基础面试题
2012/11/16 面试题
结婚保证书范文
2014/04/29 职场文书
第二课堂活动总结
2014/05/07 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
求职自我评价怎么写
2015/03/09 职场文书
大学新生入学感想
2015/08/07 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
OpenCV全景图像拼接的实现示例
2021/06/05 Python
详解MySQL中的pid与socket
2021/06/15 MySQL