//运用jQuery写的验证表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

    <title></title>

    <script src="js/jquery-1.3.1.js"></script>

    <script src="js/lib/jquery.validate.js"></script>

    <script src="js/lib/jquery.validate.messages_cn.js"></script>

    <style>

        body {

            font: 12px/19px Arial, Helvetica, sans-serif;

            color: #666;

        }

        form div {

            margin: 5px 0;

        }

        .int label {

            float: left;

            width: 100px;

            text-align: right;

        }

        .int input {

            padding: 1px 1px;

            border: 1px solid #ccc;

            height: 16px;

        }

        .sub {

            padding-left: 100px;

        }

        .sub input {

            margin-right: 10px;

        }

        .formtips {

            width: 200px;

            margin: 2px;

            padding: 2px;

        }

        .onError {

            background: #FFE0E9 url(images/reg3.gif) no-repeat 0 center;

            padding-left: 25px;

        }

        .onSuccess {

            background: #E9FBEB url(images/reg4.gif) no-repeat 0 center;

            padding-left: 25px;

        }

        .high {

            color: red;

        }

    </style>

    <script>

        $(function () {

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

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

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

            })

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

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

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

                if ($(this).is("#username")) {

                    if (this.value == '' || this.value.length < 6) {

                        var errmsg = '请输入正确的格式.';

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

                    } else {

                        var sucssemsg = '格式输入正确';

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

                    }

                }

                if ($(this).is("#email")) {

                    //邮箱格式正则表达式的用法

                    if (this.value == '' || ( this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {

                        var errmsg = '请输入正确的格式.';

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

                    } else {

                        var sucssemsg = '格式输入正确';

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

                    }

                }

            })

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

                    var onerr = $(this).parent().siblings().children().hasClass("onError");//出错就会添加class为onerror的元素

                    if(onerr) {

                        return false;

                    } else {

                        alert("你已经注册成功了");

                    }

                }

            )

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

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

            })

        })

    </script>

</head>

<body>

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

    <div class="int">

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

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

    </div>

    <div class="int">

        <label for="email">邮箱:</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>

</body>

</html>

运用jQuery写的验证表单的更多相关文章

  1. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  2. jquery通过class验证表单不能为空

    在开发系统时,往往都有某些表单数据为必填项,若用jQuery通过ID去验证,不仅会影响效率,还会有所遗漏,不易于后期维护. 本章将介绍如何利用jQuery,通过为表单配置class进行统一验证.(ID ...

  3. jquery.validate 使用--验证表单隐藏域

    jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...

  4. JavaScript/Jquery：Validform 验证表单的相关属性解释

    当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...

  5. JQuery如何在验证表单失败的情况下阻止表单提交

    自定义验证时,使用了return false和event.preventDefault(),但是验证失败之后表单还是提交了 这个问题我也碰到了,尝试了多次也没有用,在调试的时候也发现确实return了 ...

  6. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  8. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  9. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

随机推荐

  1. (转)Java中equals和==的区别

    java中的数据类型,可分为两类:  1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean    他们之间的比较,应用双等号( ...

  2. JStorm与Storm源码分析（四）--均衡调度器，EvenScheduler

    EvenScheduler同DefaultScheduler一样,同样实现了IScheduler接口, 由下面代码可以看出: (ns backtype.storm.scheduler.EvenSche ...

  3. Linux(9)后台运行python程序并输出到日志文件

    后台运行python程序并标准输出到文件 现在有test.py程序要后台部署, 里面有输出内容 使用命令: nohup python -u test.py > test.log 2>&am ...

  4. 数据结构与算法--KMP算法查找子字符串

    数据结构与算法--KMP算法查找子字符串 部分内容和图片来自这三篇文章: 这篇文章.这篇文章.还有这篇他们写得非常棒.结合他们的解释和自己的理解,完成了本文. 上一节介绍了暴力法查找子字符串,同时也发 ...

  5. 贡献你的代码，将jar包发布到Maven中央仓库以及常见错误的解决办法

    前几天将自己的日志工具发布到了Maven中央仓库中.这个工具本省没有多少技术含量,因为是修改别人的源代码实现的,但是将jar发布到Maven仓库却收获颇丰,因为网上有些教程过时了,在此分享下自己发布j ...

  6. Python初学时购物车程序练习实例

    不多说了,直接上代码: #Author:Lancy Wu product_list=[ ('Iphone',5800), ('Mac Pro',9800), ('Bike', 800), ('Watc ...

  7. WPF中使用Data Annotations验证Model

    .NET Framework中System.ComponentModel.DataAnnotations提供了很多属性来验证对象的属性.可以在C:\Program Files (x86)\Refere ...

  8. angular学习（二）-- Directive

    1.2 指令:Directive AngularJS 通过被称为 指令 的新属性来扩展 HTML, 具体表现形式一般为带有前缀 ng-xxx 的 HTML 属性. 指令的使用形式 ng-xxx 的属性 ...

  9. python编程基础知识—列表（二）

    3操作列表 3.1 遍历整个列表 使用for循环 cars = ['bmw','audi','toyota','Jeep'] for i in cars: print(i) bmw audi toyo ...

  10. python 在大文件里面删除某一行，比较有效率的方法

    用 python 处理一个文本时,想要删除其中中某一行,常规的思路是先把文件读入内存,在内存中修改后再写入源文件. 但如果要处理一个很大的文本,比如GB级别的文本时,这种方法不仅需要占用很大内存,而且 ...