最常用的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自定义多选下拉框效果
Jun 19 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
fgetcvs在linux的问题
2012/01/15 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
一个JS翻页效果
2007/07/23 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python实现翻转数组功能示例
2018/01/12 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
PHP面试题附答案
2015/11/28 面试题
大专生工程监理求职信
2013/10/04 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
女性励志书籍推荐
2019/08/19 职场文书
python 爬取天气网卫星图片
2021/06/07 Python