最常用的jQuery表单验证(简单)


Posted in jQuery onMay 23, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

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

以上所述是小编给大家介绍的最常用的jQuery表单验证(简单),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
jquery实现图片轮播器
May 23 #jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
You might like
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Maps Javascript
2007/01/22 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python 矩阵增加一行或一列的实例
2018/04/04 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
Python二维码生成识别实例详解
2019/07/16 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
联强国际笔试题面试题
2013/07/10 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
社团成立邀请函
2014/01/08 职场文书
公积金单位接收函
2014/01/11 职场文书
购房协议书范本
2014/04/11 职场文书
财务管理专业求职信
2014/06/11 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
情人节单身感言
2015/08/03 职场文书
初中班主任教育随笔
2015/08/15 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby