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 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
Exjs 入门篇
Apr 07 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JS排序之选择排序详解
Apr 08 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
javascript中如何判断类型汇总
May 14 Javascript
javascript实现智能手环时间显示
Sep 18 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
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
20个PHP常用类库小结
2011/09/11 PHP
php获取汉字首字母的函数
2013/11/07 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
JS动画效果代码3
2008/04/03 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
关于js类的定义
2011/06/28 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python 常用的基础函数
2018/07/10 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python清空命令行方式
2020/01/13 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
Delphi软件工程师试题
2013/01/29 面试题
责任担保书范文
2014/05/21 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
MySQL导致索引失效的几种情况
2022/06/25 MySQL