基于jQuery实现表单提交验证


Posted in Javascript onNovember 24, 2014

html表单代码:

   <form method="post" action=""> 

       <div class="int"> 

          <label for="username">用户名:</label> 

          <input type="text" id="username" class="required"/> 

       </div> 

       <div class="int"> 

           <label for="username">邮箱:</label> 

           <input type="text" id="email" class="required"/> 

       </div> 

       <div class="int"> 

           <label for="username">个人资料:</label> 

           <input type="text" id="personinfo"/> 

       </div> 

       <div class="sub"> 

           <input type="submit" value="提交" id="send"/> 

           <input type="reset" id="res"/> 

       </div> 

   </form> 

jQuery代码:

          $(function(){ 

            $("form :input.required").each(function(){ 

                var $required = $("<strong class='high'>*</strong>"); 

                //$(this).parent().append($required);  //追加到文档中 

                $(this).parent().prepend($required); 

            }); 

            $('form :input').blur(function(){ 

                var $parent = $(this).parent(); 

                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>'); 

                    } 

                } 

            }); 

            $("form :input").focus(function(){ 

                var $parent = $(this).parent(); 

                $parent.find(".formtips").remove(); 

            }); 

            $("#send").click(function(){ 

               var $parent = $(this).parent().parent(); 

               $parent.find(".formtips").remove(); 

               $("form .required:input").trigger('blur'); 

               var numError = $('form .onError').length; 

               if(numError){ 

                  return false; 

               } 

            }); 

            $("#res").click(function(){ 

                var $parent = $(this).parent().parent(); 

                $parent.find(".formtips").remove(); 

            }); 

        });

代码很简单,也很易懂,小伙伴们直接拿走用吧,这里就不详细说明了。

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
javascript流程控制语句集合
Sep 18 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
jQuery简单实现网页选项卡特效
Nov 24 #Javascript
jQuery选择器全集详解
Nov 24 #Javascript
常见的jQuery选择器汇总
Nov 24 #Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 #Javascript
Javascript学习笔记之数组的构造函数
Nov 23 #Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 #Javascript
Javascript 赋值机制详解
Nov 23 #Javascript
You might like
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
Laravel下生成验证码的类
2017/11/15 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
原生JS实现日历组件的示例代码
2017/09/22 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
工作中的自我评价如何写好
2013/10/28 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
内容编辑个人求职信
2013/12/10 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
英语生日邀请函
2014/01/23 职场文书
村干部培训班主持词
2014/03/28 职场文书
班主任个人工作反思
2014/04/28 职场文书
医学专业自荐信
2014/06/14 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
匿名信格式范文
2015/05/27 职场文书
投诉书格式范本
2015/07/02 职场文书