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

下面的代码是利用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. DB系统预警联系人API

    Author:Skate Time:2014/12/16 DB系统预警联系人API 在我们维护系统时,须要把系统的报警信息即时传递给对应同学.假设把联系方式直接写到脚本里.对以后的维护变更将埋下祸根, ...

  2. Console中加入招聘等个性化信息

    try { if (window.console && window.console.log) { console.log("%c XX息科技 ", "f ...

  3. [转载] A set of top Computer Science blogs

    This started out as a list of top Computer Science blogs, but it more closely resembles a set: the o ...

  4. [原]cocos2d-lua 常用法汇总

    1.CCEditBox local back = CCScale9Sprite:create("res/ui/images/im_02.png", CCRect(20, 20, 1 ...

  5. Emit动态生成代码

    Emit动态生成代码 引用:秒懂C#通过Emit动态生成代码 首先需要声明一个程序集名称, // specify a new assembly name var assemblyName = new ...

  6. android 开发 - 使用okhttp框架封装的开发框架

    概述 在android开发中经常要访问网络,目前最流行的网络访问框架就是Okhttp了,然而我们在具体使用时,往往仍然需要二次封装.我使用Builder设计模式进行了封装形成oknet开源库. 介绍 ...

  7. ITSEC TEAM 2013培训公开视频

    信息安全·WEB安全培训 - 做最靠谱的WEB安全培训网站  http://edu.itsec.pw/ ITSEC TEAM 2013公开课视频 包含XSS.CCNA 视频截图: 视频连接:http: ...

  8. Oracle外键不加索引会引起死锁问题

    转载链接:http://www.jb51.net/article/50161.htm 这篇文章主要介绍了Oracle外键不加索引引起死锁的情况及解决,需要的朋友可以参考下 --创建一个表,此表作为子表 ...

  9. 字节对齐导致的iOS EXC_ARM_DA_ALIGN崩溃

    本文原链接: http://www.cnblogs.com/zouzf/p/4455167.html 先看一下这个链接:http://www.cnblogs.com/ren54/archive/201 ...

  10. notepad++插件

    html插件 https://github.com/downloads/davegb3/NppTidy2/Tidy2_0.2.zip