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 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 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 命令行参数详解及应用
2011/05/18 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
JS实现简单打字测试
2020/06/24 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
Python计算三维矢量幅度的方法
2015/06/15 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
开办饭店创业计划书
2013/12/28 职场文书
学校清明节活动总结
2014/07/04 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
学校通报表扬范文
2015/05/04 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
Python中使用ipython的详细教程
2021/06/22 Python