jquery实现简单的表单验证


Posted in Javascript onNovember 17, 2015

 jquery如何实现简单的表单验证,我们先跟大家分享一下实现思路。

大概思路:
先为每一个required添加必填的标记,用each()方法来实现。
在each()方法中先是创建一个元素,然后通过append()方法将创建的元素加入到父元素后面。
这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素。
然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。
这里用了一个判断is()如果是用户名,做相应的处理,如果是邮件做相应的验证。
在jQuery框架中,也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value,和this.value.length。对内容进行判断。
然后进行的是邮件的验证,用到了正则表达式
然后为input元素添加keyup事件focus事件,就是在keyup时也要做一下验证,调用blur事件就行了。用triggerHandler()触发器,触发相应的事件。
最后提交表单时做统一验证,做好整体与细节的处理。
如果是必填的,则加红星标识

jQuery部分:

<script type="text/javascript">
//<![CDATA[
$(function(){  
  $("form :input.required").each(function(){
   var $required = $("<strong class='high'> *</strong>"); //创建元素
   $(this).parent().append($required); //然后将它追加到文档中
  });
   //文本框失去焦点后
  $('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");
  }).focus(function(){
    $(this).triggerHandler("blur");
  });//end blur

  
  //提交,最终验证。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    } 
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove(); 
   });
})
//]]>
</script>

html部分:

<body>

<form method="post" action="">
 <div class="int">
  <label for="username">用户名:</label>
  <!-- 为每个需要的元素添加required -->
  <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>

以上就是jquery实现简单的表单验证的关键代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
xml转json的js代码
Aug 28 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 #Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 #Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 #Javascript
jquery判断密码强度的验证代码
Apr 22 #Javascript
jquery实现邮箱自动填充提示功能
Nov 17 #Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 #Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 #Javascript
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript引导程序
2008/10/26 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
python实现基本进制转换的方法
2015/07/11 Python
python Django模板的使用方法
2016/01/14 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
大四自我鉴定范文
2013/10/06 职场文书
房地产管理毕业生自荐信
2013/11/04 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
六查六看剖析材料
2014/02/15 职场文书
低碳生活倡议书
2014/04/14 职场文书
公司委托书格式
2014/08/01 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
考察邀请函范文
2015/01/31 职场文书
会议简报格式范文
2015/07/20 职场文书
数据设计之权限的实现
2022/08/05 MySQL