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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
JS实现纸牌发牌动画
Jan 19 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
关于Python的一些学习总结
2018/05/25 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
班主任2015新年寄语
2014/12/08 职场文书
房产证明范本
2015/06/19 职场文书
七夕情人节问候语
2015/11/11 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL