//运用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. oracle-plsql序列问题

    场景:用来汇总工作中数据库的异常问题! 1 问题 序列在会话中未定义 解决: 创建Sequence后直接查询它的当前值(CURRVAL)会出错,要先调用Sequence对象.NEXTVAL,才能查询当 ...

  2. Yii框架用ajax提交表单时候报错Bad Request (#400): Unable to verify your data submission.

    提交表单报400错误,提示 "您提交的数据无法验证"原来是csrf验证的问题,因为表单是自己写的,在Yii框架中,为了防止csrf攻击,对post的表单数据封装了CSRF令牌验证. ...

  3. Docker学习--->>Docker的认识，安装，及常用命令熟悉

    Docker是什么? 在平常的软件开发中,会面临着开发不同的程序或服务需要不同的环境.而在该环境上开发完成后,想要在其他的环境上部署,则需要自己去重新部署,而Docker的出现使得这样的迁移变得容易. ...

  4. Android学习笔记-ScrollView(滚动条)

    本节引言: 本节带来的是Android基本UI控件中的第十个:ScrollView(滚动条),或者我们应该叫他 竖直滚动条,对应的另外一个水平方向上的滚动条:HorizontalScrollView, ...

  5. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  6. echarts_部分图表配置_堆叠折线图

    echarts基本图表使用: 1.获取包裹元素(var myChart = echarts.init(document.getElementById('thisId'));)2.设置option(op ...

  7. Go的基本环境配置

    参考 https://golang.org/doc/install?download=go1.7.1.linux-amd64.tar.gz https://github.com/qlshine/the ...

  8. Jersey实现Restful服务

    jersey 是基于Java的一个轻量级RESTful风格的Web Services框架.以下我基于IDEA实现Restful完整Demo. 1.创建maven-web工程,后面就是正常的maven工 ...

  9. SASS笔记

    前端开发离不开三剑客:html.Javascript.css. html:主要进行网页内容的开发语言: JavaScript: 主要对页面业务逻辑的开发语言: css:主要对网页外观样式进行注解的文本 ...

  10. 找不到包含 OwinStartupAttribute 的程序集。 - 找不到包含 Startup 或 [AssemblyName].Startup 类的程序集。

    打开web.config添加 <add key="owin:appStartup" value="false" /> <add key=&qu ...