<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>表单校验</title>

         <meta name="author" content="Administrator" />

         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>

         <style type="text/css">

             .int {

                 margin-bottom: 5px;

             }

             .sub {

                 padding-left: 7%;

             }

         </style>

         <!-- Date: 2016-04-03 -->

     </head>

     <body>

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

             <div class="int">

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

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

             </div>

             <div class="int">

                 <label for="email">&nbsp;邮箱：</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>

         <script type="text/javascript">

             $(function() {

                 //为必填的内容加*。

                 $("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 = "请输入正确的邮箱地址。";

                             $parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");

                         }else{

                             var okMsg = "请输入正确的邮箱地址。";

                             $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");

                         }

                     }

                 });

             });

         </script>

     </body>

 </html>

关于jQuery表单校验的应用的更多相关文章

  1. 关于jQuery表单校验

    <style> .red{border: 1px solid red;} .wrong-tip{color: red;} </style> <form action=&q ...

  2. day32(表单校验js和jquery表单校验)

    校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...

  3. JQuery -- Validate, Jquery 表单校验

    1. Jquery 表单验证需要插件 jQuery validation 1.7  ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...

  4. jQuery表单校验

    主要特性: 表单提交前对所有数据进行校验,不符合不让提交(validate) 如果表单校验不通过,自动focus到第一个错误的域 自动在控件后面显示错误提示内容(error message) 支持根据 ...

  5. JQuery 表单校验插件 validate 使用纪录

    JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...

  6. jquery 表单校验

    <link type="text/css" href="<%=basepath%>css/form/validate.css" rel=&qu ...

  7. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  8. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  9. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

随机推荐

  1. HDU 5452 Minimum Cut

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5452题目大意: 给你一个图G,图中包含一颗生成树.要求只能删除生成树内的一条边,使得图不联通.问最小的删除 ...

  2. 【最大流】BAPC2014 A Avoiding the Apocalypse (Codeforces GYM 100526)

    题目链接: http://codeforces.com/gym/100526 http://acm.hunnu.edu.cn/online/?action=problem&type=show& ...

  3. Nodejs in Visual Studio Code 06.新建Module

    1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...

  4. [转]浏览器如何和Web服务器通信

    http://hi.baidu.com/ywqme/item/b5297014b2e58f4e6826bb74 概述 普通网民打开网页,访问网站,并不需要了解所谓HTTP协议.作为软件工程师,了解一下 ...

  5. Visual Studio的2个有趣的插件：声音控制和放屁：）

    .NET Slave | Talk to, hear, touch and see your code介绍了2个有趣的Visual Studio的插件,你可以通过它们和你的代码对话. 声音控制(Voi ...

  6. Java里的IO流里的FileInputStream 的读取并在前打印行数！

    大家好!!新人求罩! import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  7. Android获取cpu和内存信息、网址的代码

      android获取手机cpu并判断是单核还是多核 /** * Gets the number of cores available in this device, across all proce ...

  8. 动态规划晋级——POJ 3254 Corn Fields【状压DP】

    转载请注明出处:http://blog.csdn.net/a1dark 分析:刚开始学状压DP比较困难.多看看就发现其实也没有想象中那么难.这道题由于列数较小.所以将行压缩成二进制来看.首先处理第一行 ...

  9. JAVA复习2 JAVA开发环境配置

    我想写的东西主要是JAVA编程里的难点和易混淆点,所以在这里给大家提供一些经典的博客地址或网址.. W3C JAVA教程  JAVA开发环境配置篇: http://www.w3cschool.cc/j ...

  10. iOS 类似美团外卖 app 两个 tableView 联动效果实现

    写在前面 首先声明哈,不是广告,我就是用的时候觉得这个功能比较好玩,就想着实现了一下.效果如图: 接下来简单的说一下思路吧~ 大体思路 可能我们看到这种功能的实现的时候,首先想着的是我在这个控制器中左 ...