基于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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
深入理解js generator数据类型
Aug 16 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
vue组件name的作用小结
May 23 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遍历二维数组的代码
2011/04/22 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
python分割和拼接字符串
2013/11/01 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
《听鱼说话》教学反思
2014/02/15 职场文书
学校教师安全责任书
2014/07/23 职场文书
社区助残日活动总结
2014/08/29 职场文书
公司租房协议书
2014/10/14 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Golang 并发下的问题定位及解决方案
2022/03/16 Golang