基于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 相关文章推荐
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
简单实现js上传文件功能
Aug 21 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JS简单表单验证功能完整示例
Jan 26 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
python中实现定制类的特殊方法总结
2014/09/28 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python ansible服务及剧本编写
2017/12/29 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
党员倡议书
2015/01/19 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技