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

下面的代码是利用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. jQuery File Upload跨域上传

    最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...

  2. Asp.net Core WebApi 使用Swagger做帮助文档，并且自定义Swagger的UI

    WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...

  3. 删除.gitignore中的在version control中的文件

    如果有一个文件例如xyz在版本控制系统中,然后你发现这个文件不应该提交到git上,所以加了.gitignore文件并将其加入其中,但是git不会自动讲其从版本库中移除它.如果你只有一个文件,你可以使用 ...

  4. oracle create table(转)

    //建测试表 create table dept( deptno number(3) primary key, dname varchar2(10), loc varchar2(13) ); crea ...

  5. ListView具有多种item布局——实现微信对话列

    这篇文章的效果也是大家常见的,各种通讯应用的对话列表都是这种方式,像微信.whatsapp.易信.米聊等.我们这篇文章也权当为回忆,形成简单的笔记.这篇文章参考了2009年Google IO中的< ...

  6. 审核流(3)低调奢华，简单不凡，实例演示-SNF.WorkFlow--SNF快速开发平台3.1

    下面我们就从什么都没有,结合审核流进行演示实例.从无到有如何快速完美的实现,然而如此简单.低调而奢华,简单而不凡. 从只有数据表通过SNF.CodeGenerator代码生成器快速生成单据并与审核流进 ...

  7. Machine Learning : Pre-processing features

    from:http://analyticsbot.ml/2016/10/machine-learning-pre-processing-features/ Machine Learning : Pre ...

  8. 通过IIS不能连接远程数据库的问题

    近期遇到一个奇怪的问题:在调试MES程序时发现,如果连接的是远程的SQL SERVER数据库(通过了IIS),则提示连接失败,就是经常见到的数据库不允许远程连接的错误提示: 而且又测试了以下几种情况: ...

  9. [OpenCV] Install openCV in Qt Creator

    Learn openCV.pdf qmake: link with opencv (Key Point) QT += core gui greaterThan(QT_MAJOR_VERSION, 4) ...

  10. read和write函数

    读函数read  ssize_t read(int fd,void *buf,size_t nbyte)  如果是ECONNREST表示网络连接出了问题. 写函数write  ssize_t writ ...