基于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给多个span赋值
May 21 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
整理一下常见的IE错误
Nov 18 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
详解webpack进阶之loader篇
2017/08/23 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
深入浅析Python的类
2018/06/22 Python
Python切图九宫格的实现方法
2019/10/10 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
配置管理计划的主要内容有哪些
2014/06/20 面试题
大学生旷课检讨书
2014/01/22 职场文书
音乐节策划方案
2014/06/09 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers