//运用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. redis 一般性使用概述

    最近一段时间与redis接触比较频繁.发现有些东西还是工作中经常会用到的,自己也花了点时间巩固下.本篇文章主要是以总结性的方式梳理,因为redis的主题很大,任何一个技术点展开都是几篇文章的量.也可以 ...

  2. Angular页面选项卡切换要注意的toggleClass

    在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="ac ...

  3. FFT_ad采样速率

    调用quartus的ip核测量频率和幅值,可以把程序分成四大部分.第一部分是AD采样模块,本次实验用的是ad828,最高采样率为70M, 根据奈贵斯特采样定律 Fs > 2Fc,即采样率要大于信 ...

  4. 花了一年时间开发出来的EZNest 自动套料软件

    随着国内钢结构制造业的迅猛发展,市场竞争也愈演愈烈.近来钢材价格的大幅攀升,节约用材已成为企制胜的戈键,提高钢材的利用车自然就成了目前许多企业十分关心的一件事.对十大型钢结构生产制造商来说,如留在传统 ...

  5. ICMP--ping--Traceroute

    ICMP经常被认为是IP层的一个组成部分.它传递差错报文以及其他需要注意的信息. ICMP报文通常被IP层或更高层协议TCP或UDP使用. 一些ICMP报文把差错报文返回给用户进程   ICMP报文是 ...

  6. 蓝桥杯比赛javaB组练习《牌型种数》

    牌型种数 小明被劫持到X赌城,被迫与其他3人玩牌.一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张.这时,小明脑子里突然冒出一个问题:如果不考虑花色,只考虑点数,也不考虑自己得到的牌 ...

  7. python爬煎蛋妹子图--20多行代码搞定煎蛋妹子图库

    如果说一个人够无聊的话... 就会做一些十分美(wei)丽(suo)的事情啦哈哈哈... 好的,话不多说,进入正题. 正如标题所示,我们今天的目标很简单: 代码要少,妹子要好. 步骤如下: 1. 首先 ...

  8. Android数据库

    Android数据库 什么情况下我们才用数据库做数据存储? 大量数据结构相同的数据需要存储时.Android内置了sqlite,轻量级. 创建数据库的方法 创建一个类继承SqliteOpenHelpe ...

  9. git入门（3）git checkout 和git branch分支的创建和删除

    在一个项目中,需要多人同时开发,协同coding 要求: 开发时请用开发分支daily/0.0.1, 禁止直接使用master分支开发新建分支 git checkout -b daily/0.0.1 ...

  10. Alluxio 1.5集群搭建

    一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 二.文件准备 2.1 文件名称 alluxio-1.5.0-hado ...