//运用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. （转）log4j（六）——log4j.properties简单配置样例说明

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 1 老规矩,先来个栗子,然后再聊聊感受 (1)使用配文件的方式,是不是感觉非常的清爽,如果不在程序中读取配置文件就更加的清 ...

  2. POI读取excel工具类 返回实体bean集合(xls,xlsx通用)

    本文举个简单的实例 读取上图的 excel文件到 List<User>集合 首先 导入POi 相关 jar包 在pom.xml 加入 <!-- poi --> <depe ...

  3. 关于html转换为pdf案例的一些测试与思考

    由于工作所需,最近花时间研究了html转换为pdf的功能.html转换为pdf的关键技术是如何处理网页中复杂的css样式,通过在网上收集资料,发现目前html 转换为pdf的解决方案主要分为三类: 客 ...

  4. 【JAVASCRIPT】React + Redux

    摘要 Redux 数据流图 View 层由React 控制, 根据state 变化 刷新渲染组件,作用是根据更新的数据重新渲染组件 Stroe 层其实就是state存储器,作用是更新数据 Dispat ...

  5. Flunetd 用于统一日志记录层的开源数据收集器

    传统的日志查看方式 使用fluentd之后 一.介绍 Fluentd是一个开源的数据收集器,可以统一对数据收集和消费,以便更好地使用和理解数据. 几大特色: 使用JSON统一记录 简单灵活可插拔架构 ...

  6. teamviewer试用期到期解决

    1.命令行输入:%appdata%删除teamviewer文件夹2.命令行输入:regedit删除teamviewer文件夹3.卸载tv4.控制面板->设备管理器->网络适配器->f ...

  7. PocScan的搭建与使用

    安装Docker, 然后下载镜像 $ sudo curl -sSL https://get.daocloud.io/docker | sh $ sudo systemctl start docker ...

  8. 2.跑nodejs文件

    1.安装nodejs的环境,这里不介绍了. app.js 'use strict'; //process.argv 接受变量 var command = process.argv[2]; var a ...

  9. MJRefresh 使用注意点

    1.使用上拉加载更多, 当数据加载完调用[ableView.mj_footer endRefreshingWithNoMoreData]方法显示已经全部加载完毕这个方法,一定要放在[tableView ...

  10. F数圈圈

    Description 幼儿园的小朋友对数字其实不是很感兴趣,他们更感兴趣的是形状,现在给你一个数字,小朋友都会数出其中一共有多少圆圈圈 Input 一个数字n长度不超过19位 Output 输出其中 ...