基于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 index()方法使用代码
Jun 02 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
Vue实现简单的跑马灯
May 25 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
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实现将本地文件打包成zip下载
2014/06/26 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
python常见的格式化输出小结
2016/12/15 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python颜色随机生成器的实例代码
2020/01/10 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
厂办主管岗位职责范本
2014/02/28 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android