基于jquery实现即时检查格式是否正确的表单


Posted in Javascript onMay 06, 2016

现在很多网站的注册模块都可以实现即时检查格式是否正确,这样极大的增强了用户体验,对开发非常有利。

下面的代码是利用jquery实现了对一个表单字段格式即时检查(包括字段长度、邮箱格式),同时在提交时,再次出发检查事件。

注意这个检查是keyup和focus上为主,利用这两个事件来触发blur(失去焦点)事件。

<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="jquery-1.3.2.min.js"></script>
 <script>
  $(function () {



//为每个必填字段后面加上*
   $("form :input.required").each(function () {
    var $required = $("<strong class='high'>*</strong>");
    $(this).parent().append($required);
   });




//textbox失去焦点事件
   $("form :input").blur(function () {
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();
    if ($(this).is('#username')) {
     if (this.value == "" || this.value.length < 6) {
      var errorMsg = "请输入至少6位的用户名";
      $parent.append('<span class="formtips onError">' + errorMsg + "</span>");
     } else {
      var okMsg = "输入正确"
      $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
     }
    }
    if ($(this).is('#email')) {
     if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
      var errorMsg = "请输入正确的E-Mail地址";
      $parent.append('<span class="formtips onError">' + errorMsg + "</span>");
     } else {
      var okMsg = "输入正确"
      $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
     }
    }
   }).keyup(function () {
    $(this).triggerHandler("blur");//keyup和focus利用triggerHandler来触发blur事件
   }).focus(function () {
    $(this).triggerHandler("blur");
   });
   $("#send").click(function () {//提交按钮事件
    $("form .required:input").trigger('blur');
    var numError = $('form .onError').length;
    if(numError)
    {
     return false;
    }
    alert("注册成功,密码已发到你的邮箱,请查收");
   });
  });

 </script>
</head>
<body>
 <form method="post" action="">
  <div class="int">
   <label for="username">用户名</label>
   <input type="text" id="username" class="required" />
  </div>
  <div class="int">
   <label for="email">邮箱</label>
   <input type="text" id="email" class="required" />
  </div>
  <div class="int">
   <label for="=personinfo">个人资料</label>
   <input type="text" id="personinfo" />
  </div>
  <div class="sub">
   <input type="submit" value="提交" id="send" />
   <input type="reset" id="res" />
  </div>
 </form>
</body>
</html>

更多内容点击:jquery表单验证大全

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
纯js实现倒计时功能
Jan 06 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
js实现秒表计时器
Dec 16 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选功能效果的实现代码
May 05 #Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 #Javascript
animate 实现滑动切换效果【实例代码】
May 05 #Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
Sea.JS知识总结
May 05 #Javascript
You might like
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
独特的python循环语句
2016/11/20 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
行政专员的岗位职责
2014/03/10 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
市场营销毕业求职信
2014/08/07 职场文书
鸡毛信观后感
2015/06/11 职场文书
Python常遇到的错误和异常
2021/11/02 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技