jquery实现一个简单的表单验证实例


Posted in Javascript onMarch 30, 2016

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证。本文章向大家介绍jquery客户端验证表单的一个简单实例。实例仅作参考。

<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>
<script src="/Public/js/jquery-1.7.1.min.js"></script>
<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实现一个简单的表单验证实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
webpack的CSS加载器的使用
Sep 11 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
深入浅析React中diff算法
May 19 Javascript
js实现密码强度检测【附示例】
Mar 30 #Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 #Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 #Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
You might like
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php中session使用示例
2014/03/29 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python中四舍五入的正确打开方式
2021/01/18 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
网络安全方面的面试题
2016/01/07 面试题
英语系本科生个人求职信
2013/09/21 职场文书
材料化学应届生求职信
2013/10/09 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript