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

下面的代码是利用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. 【转】20个Cydia常见错误问题解决方法汇总

    对于已经越狱的用户来说,经常会使用Cydia来安装一些酷炫或实用插件,但是有时候它总是会出现一些问题,以下收集了在Cydia经常遇到的问题,供大家参考: 一.主屏幕没有 Cydia 图标 1.设备需已 ...

  2. <《巴菲特之道 (第三版)》>读书笔记

    以便宜的价格买入长期绩优的股票 他把对公司的投资看做是拥有公司的一部分股权,看重的是公司的长期经济价值 别人越是草率,我们越要加倍慎重 如果你发现自己已经在陷阱中,最重要的是想办法让自己不要再往下陷 ...

  3. PL-SQL 存储函数和存储过程

     PL-SQL 存储函数和存储过程 ORACLE 提供能够把PL/SQL 程序存储在数据库中,并能够在不论什么地方来执行它.这样就叫存储过程或函数. 过程和函数统称为PL/SQL子程序.他们是被命 ...

  4. nlog(n)解动态规划--最长上升子序列(Longest increasing subsequence)

    最长上升子序列LIS问题属于动态规划的初级问题,用纯动态规划的方法来求解的时间复杂度是O(n^2).但是如果加上二叉搜索的方法,那么时间复杂度可以降到nlog(n).  具体分析参考:http://b ...

  5. iOS开发——项目实战总结&关于随机量

    关于随机量 rand 是一个标准的 C 函数. random 是定义为 POSIX 标准的一部分. arc4random 是在 BSD 和派生平台. 随机数 arc4random_uniform(N) ...

  6. C# winForm 窗体闪烁问题

    在构造函数里加上以下代码: this.DoubleBuffered = true;//设置本窗体            SetStyle(ControlStyles.UserPaint, true); ...

  7. 同步与异步&阻塞与非阻塞

    摘要 一直为同步异步,阻塞非阻塞概念所困扰,特定总结了下,原来是这么个意思 一直为同步异步,阻塞非阻塞概念所困扰,特定总结了下 一.同步与异步的区别 1.概念介绍 同步:所谓同步是一个服务的完成需要依 ...

  8. git删除远程文件夹或文件的方法

    由于本地修改了文件夹大全名大小写的原因,同步到git上并不区分大小写,造成了一些文件同步不了,所以要先把git远程库上文件夹删除掉,然后再重新同步 如下,我把src里的全部移除,但是本地文件还保留. ...

  9. C用函数指针模拟重载 C++重载

    C中为什么不支持重载,即同一作用域内不允许出现同名函数? 我们都知道重载是c++面向对象的特性.c语言中是不存在的.所谓重载简单来说就是一个函数名可以实现不同的功能,要么输入参数不同或者参数个数不同, ...

  10. apache2.4 以上设定gzip压缩

    国内很多文章都是抄来抄去,用不成,用我这个就可以了 编辑 http.conf 文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释 ...