基于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判断样式className同时增加class或删除class
Jan 30 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
Vue3为什么这么快
Sep 23 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP文件操作详解
2016/12/30 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
javascript判断office版本示例
2014/04/11 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
python实现的防DDoS脚本
2011/02/08 Python
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python实现图片识别汽车功能
2018/11/30 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python实现合并两个排序的链表
2019/03/03 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
邀请书模板
2015/02/02 职场文书
工作会议简报
2015/07/20 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle