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 中的 && 和 || 使用小结
Apr 25 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
用vue构建多页面应用的示例代码
Sep 20 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 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
德劲1103的维修打理经验
2021/03/02 无线电
默默小谈PHP&MYSQL分页原理及实现
2007/01/02 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP5.3新特性小结
2016/02/14 PHP
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
如何在selenium中使用js实现定位
2020/08/18 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
简单使用Python自动生成文章
2014/12/25 Python
深入学习python的yield和generator
2016/03/10 Python
python实现贪吃蛇游戏
2020/03/21 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python实现门限回归方式
2020/02/29 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
工作失误检讨书(3篇)
2014/10/11 职场文书
查摆问题整改措施
2014/10/24 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
校园开放日新闻稿
2015/07/17 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers