jQuery之简单的表单验证实例


Posted in Javascript onJuly 07, 2016

html部分:

<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>

jQuery部分:

<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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
vue使用recorder.js实现录音功能
Nov 22 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
用vue设计一个日历表
Dec 03 Vue.js
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
Node.js DES加密的简单实现
Jul 07 #Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 #Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 #Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 #Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 #Javascript
You might like
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php生成与读取excel文件
2016/10/14 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
python解析文件示例
2014/01/23 Python
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
学习考察心得体会
2014/09/04 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
给下属加薪申请报告
2015/05/15 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
新闻通讯稿范文
2015/07/22 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Java spring定时任务详解
2021/10/05 Java/Android
python中的sys模块和os模块
2022/03/20 Python