//运用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. 【SignalR学习系列】3. SignalR实时高刷新率程序

    创建项目 创建一个空的 Web 项目,并在 Nuget 里面添加 SignalR,jQuery UI 包,添加以后项目里包含了 jQuery,jQuery.UI ,和 SignalR 的脚本. 创建基 ...

  2. taskctl实现自定义mysql存储过程作业类型调用

    TASKCTL支持任意作业类型的扩展,但目前TASKCTL 4.1.3版本中并没有内置mysql存储过程的作业插件.通过介绍使TASKCTL支持调度mysql存储过程作业类型的步骤,一方面解决一些朋友 ...

  3. python函数（4）：递归函数及二分查找算法

    人理解循环,神理解递归!  一.递归的定义 def story(): s = """ 从前有个山,山里有座庙,庙里老和尚讲故事, 讲的什么呢? ""& ...

  4. VMware workstation虚拟集群实践（1）—— 配置集群多节点互信

    一. 简述 节点互信,是集群管理的基本操作之一.节点互信是通过SSH协议的公钥密钥认证来代替密码认证来实现的.对于单点批量管理多个节点,多个节点之间相互通信来说,配置SSH单方向信任,或者互信十分必要 ...

  5. Javascript DOM 编程艺术———总结-1

    第一章: 1.DOM:是一套对文档内容进行抽象和概念化的方法,是一种API. 2.W3C对DOM的定义:一个与系统平台和编程语言无关的借口程序和脚本可以通过这个接口动态的访问和修改文档内容,结构和样式 ...

  6. NYOJ--241--字母统计

    /* Name: NYOJ--241--字母统计 Date: 18/04/17 17:12 Description: 水过,C++11特性不能用,尴尬 */ #include<bits/stdc ...

  7. DOS批处理中%cd%和%~dp0的区别[forward]

    DOS批处理中%cd%和%~dp0的区别   在DOS的批处理中,有时候需要知道当前的路径. 在DOS中,有两个环境变量可以跟当前路径有关,一个是%cd%, 一个是%~dp0.      这两个变量的 ...

  8. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  9. STL容器的reserve()函数和resize()函数解析

    以vector为例,我们都知道可以用reserve()和resize()函数来为容器预留空间或者调整它的大小. 不过从它俩的名字上可以看出区别: reserve():serve是"保留&qu ...

  10. dom作业

    <body> <select size="7" style="width: 200px;" id="slt"> &l ...