最常用的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实现frame之间互通的方法
Jun 26 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python算法学习之基数排序实例
2013/12/18 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python实现图像几何变换
2015/07/06 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python中的引用知识点总结
2019/05/20 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python数据正态性检验实现过程
2020/04/18 Python
python中的yield from语法快速学习
2020/11/06 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
中学家长会邀请函
2014/01/17 职场文书
班级标语大全
2014/06/21 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
承诺函格式模板
2015/01/21 职场文书
个人政治思想总结
2015/03/05 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android