最常用的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使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jquery实现的放大镜效果示例
Feb 24 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
合作指挥官:孟斯克
2020/03/16 星际争霸
php如何调用webservice应用介绍
2012/11/24 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
php短址转换实现方法
2015/02/25 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
JavaScript中this详解
2015/09/01 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
python把一个字符串切开的实例方法
2020/09/27 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
小学后勤管理制度
2014/01/14 职场文书
开业主持词
2014/03/21 职场文书
投标诚信承诺书
2014/05/26 职场文书
初中作文评语
2014/12/25 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python