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 eval和JSON之间的联系
Dec 31 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
vuex实现购物车的增加减少移除
Jun 28 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 zip文件解压类代码
2009/12/02 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
详解Python中的正则表达式
2018/07/08 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
ipython和python区别详解
2019/06/26 Python
Django 请求Request的具体使用方法
2019/11/11 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Django URL参数Template反向解析
2020/11/24 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
了解AppleTalk协议吗
2014/04/01 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
自考毕业自我鉴定
2014/03/18 职场文书
武当山导游词
2015/02/03 职场文书