现在很多网站的注册模块都可以实现即时检查格式是否正确，这样极大的增强了用户体验，对开发非常有利。

下面的代码是利用jquery实现了对一个表单字段格式的即时检查（包括字段长度、邮箱格式），同时在提交时，再次出发检查事件。

注意这个检查是keyup和focus上为主，利用这两个事件来触发blur（失去焦点）事件。

<!DOCTYPE html>

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

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <script src="jquery-1.3.2.min.js"></script>

    <script>

        $(function () {

　　　　　　　　//为每个必填字段后面加上*

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

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

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

            });
　　　　　　　　//textbox失去焦点事件

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

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

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

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

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

                        var errorMsg = "请输入至少6位的用户名";

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

                    } else {

                        var okMsg = "输入正确"

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

                    }

                }

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

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

                        var errorMsg = "请输入正确的E-Mail地址";

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

                    } else {

                        var okMsg = "输入正确"

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

                    }

                }

            }).keyup(function () {

                $(this).triggerHandler("blur");//keyup和focus利用triggerHandler来触发blur事件

            }).focus(function () {

                $(this).triggerHandler("blur");

            });

            $("#send").click(function () {//提交按钮事件

                $("form .required:input").trigger('blur');

                var numError = $('form .onError').length;

                if(numError)

                {

                    return false;

                }

                alert("注册成功，密码已发到你的邮箱，请查收");

            });

        });

    </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. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

  2. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  3. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  4. BootStrap 智能表单系列 七 验证的支持

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

  5. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  6. BootStrap 智能表单系列 三 分块表单配置的介绍

    相信广大博友肯定碰到过一个编辑页面分了很多块的情况,智能表单插件已经为您支持了这种情况, 代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  7. BootStrap 智能表单系列 二 BootStrap支持的类型简介

    代码如下(链接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form1-basic.html): <! ...

  8. 第86天：HTML5应用程序标签和智能表单

    一.HTML5应用程序标签 1.datalist需要数据载体 input list属性指向数据源 2.progress进度条 -webkit-appearance: none;   /*如果要改默认样 ...

  9. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

随机推荐

  1. c++中的##和#的区别

    ##是一个连接符号,用于把参数连在一起 #是“字符串化”的意思.出现在宏定义中的#是把跟在后面的参数转换成一个字符串 #define paster( n ) printf( "token & ...

  2. Amazon的Fire Phone之于Android开发者

    在上周Amazon也耐不住加入了手机竞争行列之中,发布了自己的Fire Phone,于是Android家族又多了一位变种成员,Android系统的碎片化程度也进一步加剧.因为工作的关系,我有幸在上个月 ...

  3. 基于nodejs实现js后端化处理

    今天D哥给我提了个问题,"用php执行过js没"?咋一听,没戏~~毕竟常规情况下,js是依赖浏览器运行的.想在php后端采集的同时利用js运行结果并传递给php使用,没戏! 然后回 ...

  4. IOS 使用SDWebImage实现仿新浪微博照片浏览器

    使用第三方库SDWebImage实现仿新浪微博照片浏览器,可以下载图片缓存,点击之后滚动查看相片,具体效果如下: 代码如下: WeiboImageView.h: #import <UIKit/U ...

  5. Visual Studio与Eclipse与IntelliJ快捷键对比

  6. SNF开发平台WinForm之十一-程序打包-SNF快速开发平台3.3-Spring.Net.Framework

    原来我们用的是微软自带的打包工具去打包,但感觉好像也是第三方做的打包并且很是麻烦,还有时不成功报错.那综合考虑就找一个简单实用的打包工具吧,就找到了NSIS这个.具体打包步骤如下: 1.安装NSIS ...

  7. (转)linux文件读写的流程

    转自http://hi.baidu.com/_kouu/item/4e9db87580328244ef1e53d0 在<linux内核虚拟文件系统浅析>这篇文章中,我们看到文件是如何被打开 ...

  8. Lua中的require

    lua中的require机制    为了方便代码管理,通常会把lua代码分成不同的模块,然后在通过require函数把它们加载进来.现在看看lua的require的处理流程.1.require机制相关 ...

  9. NGUI 修改Shader支持灰色滤镜

    之前有人做过,不过效率不高: http://blog.csdn.net/onerain88/article/details/12197277  他的代码: fixed4 frag (v2f i) : ...

  10. Web离线存储的几种方式

    随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...