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

下面的代码是利用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. 【原创】开源BI领袖-SpagoBI5.X最详细的中文版介绍

    SpagoBI是唯一100%的开源商业智能套件由 Engineering Group的SpagoBI实验室(www.eng.it)开发和管理.它提供了强大的分析能力,从传统的报表和图表功能到自助分析. ...

  2. MySQL、PostgreSQL、Ingres r3、MaxDB等开源数据库的详细比较

    1.MySQL 5 作为当今最流行的开放源码数据库之一,MySQL数据库为用户提供了一个相对简单的 解决方案,适用于广泛的应用程序部署,能够降低用户的TCO.MySQL是一个多线程.结构化查询语言(S ...

  3. VirtualBox的四种网络连接方式

    VirtualBox中有4中网络连接方式:a. NAT                          网络地址转换模式(Network Address Translation)b. Bridged ...

  4. JSON处理

    var ajax = function () { mui.ajax(projectPath+'/goods/goodsprice.do', { dataType: 'json', type: 'pos ...

  5. Xcode8新特性和iOS10新特性

    从 Xcode 8.0 开始,目前所有的插件都无法工作! NSLog 无法输出 -- 此bug等待正式版本... Xcode 提供了文档注释快捷键option + cmd + / 但是要把系统升级到1 ...

  6. Python中的模块与包

    标准库的安装路径 在import模块的时候,python是通过系统路径找到这些模块的,我们可以将这些路径打印出来: >>> pprint.pprint(sys.path) ['', ...

  7. SQL语句转摘

    http://www.cnblogs.com/Olive116/p/3271706.html 收藏没有用,来收到留链接

  8. Windows下启动各服务命令

    1. gpedit.msc-----组策略 2. nslookup-------IP地址侦测器 3. explorer-------打开资源管理器 4. logoff---------注销命令 5. ...

  9. cocos2dx 帧动画的两种创建方式

    看了好几天cocos2dx的帧动画,现在才有点眉目,为了高效期间我们一般会用到 精灵帧缓存(CCSpriteFrameCache) 和动画缓存(CCAnimationCache) .大体的操作步骤: ...

  10. ios 关于文件操作 获取 文件大小

     分类: Apple IPhone2012-06-28 11:31 4664人阅读 评论(0) 收藏 举报 ios语言manager测试c c语言 实现 #include "sys/stat ...