<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>register</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        form {

            width: 500px;

            margin: 0 auto;

            border: 1px solid #ccc;

            padding: 10px;

        }

        .int, .sub {

            height: 30px;

            line-height: 30px;

        }

        .high {

            color: red;

        }

        .formtips.onSuccess, .formtips.onError {

            padding: 2px;

        }

        .formtips.onSuccess {

            border: 1px solid green;

            color: #000000;

        }

        .formtips.onError {

            border: 1px solid red;

            color: red;

        }

    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

<form action="" method="post">

    <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>

<script type="text/javascript">

    //给必填的input加红星星

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

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

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

        //验证表单元素

        $('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>');

                }

            }

        }).keyup(function(){

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

        }).focus(function(){

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

        });

        //验证邮箱

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

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

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

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

                if (this.value == "" || (this.value != "" && !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.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>');

                    //$parent.append('<span>' + okMsg + '</span>');  //为什么这样写会出现两个span啊

                }

            }

        }).keyup(function(){

            $(this).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>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <style type="text/css">
        * {
            margin: ;
            padding: ;
        }

        form {
            width: px;
            margin: 0 auto;
            border: px solid #ccc;
            padding: px;
        }

        .int, .sub {
            height: px;
            line-height: px;
        }

        .high {
            color: red;
        }

        .formtips.onSuccess, .formtips.onError {
            padding: px;
        }

        .formtips.onSuccess {
            border: px solid green;
            color: #000000;
        }

        .formtips.onError {
            border: px solid red;
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="" method="post">
    <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>
<script type="text/javascript">
    //给必填的input加红星星
$("form :input.required").each(function () {
        var $required = $("<strong class='high'>*</strong>");
        $(this).parent().append($required);

        //验证表单元素
$('form :input').blur(function () {
            var $parent = $(this).parent();
            $parent.find(".formtips").remove();
            //验证用户名
if ($(this).is("#username")) {
                if (this.value == "" || this.value.length < ) {
                    var errorMsg = '请输入至少6位的用户名';
                    $parent.append('<span class="formtips onError">' + errorMsg + '</span>');
                } else {
                    var okMsg = '输入正确';
                    $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
                }
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        //验证邮箱
$('form :input').blur(function(){
            if ($(this).is('#email')) {
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();
                if (this.value == "" || (this.value != "" && !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.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>');
                    //$parent.append('<span>' + okMsg + '</span>');  //为什么这样写会出现两个span啊
}
            }
        }).keyup(function(){
            $(this).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>
</html>

jQuery注册验证的更多相关文章

  1. jquery注册验证的写法

    在做注册页面时会用到jquery验证注册信息,用户名,密码,邮箱,手机号的验证,比较简单的,新手莫怪... <script> function Name(){ var name = $(& ...

  2. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  3. jQuery失去焦点的时候注册验证

    //注册验证$('form :input').blur(function () { if ($("#txtName").val() == "") { $(&qu ...

  4. ASP.NET MVC的客户端验证：jQuery的验证

    之前我们一直讨论的Model验证仅限于服务端验证,即在Web服务器根据相应的规则对请求数据实施验证.如果我们能够在客户端(浏览器)对用户输入的数据先进行验证,这样会减少针对服务器请求的频率,从而缓解W ...

  5. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  6. jQuery.validator 验证规则详解

    前言:jQuery.validator是一款非常不错的表单验证插件,验证方式非常简单方便,它还对HTML5做了兼容处理,了解了验证规则,就基本掌握了它的使用,下面就让我一一道来 jQuery.vali ...

  7. PHP+jQuery 注册模块的改进之二：激活链接的URL设置与有效期

    接<PHP+jQuery 注册模块的改进之一>继续修改: ①在注册成功后返回登录邮件页面( maillogin.php ),在页面中用户可以点击链接跳转到自己注册邮箱的登录页面,可以再次发 ...

  8. PHP+jQuery 注册模块开发

    /* ******* 环境: Apache2.2.8 + PHP5.2.6 + MySQL5.0.51b + jQuery-1.8.3.min.js ************** 其他组件:Zend_ ...

  9. php+jquery注册实例

    写了一个简单的PHP+jQuery注册模块,需要填写的栏目包括用户名.邮箱.密码.重复密码和验证码,其中每个栏目需要具备的功能和要求如下图: 在做这个模块的时候,很大程度上借鉴了网易注册( http: ...

随机推荐

  1. 解决Tomcat无法加载css和js等静态资源文件

    解决思路有两个 一是,你使用了Apache服务器,html不交给Tomcat处理,所以你找不到Html等静态资源,所以你先停掉阿帕奇,然后只用Tomcat猫试试. 二是,像我一样,使用了Jetty开发 ...

  2. 【 UVALive - 5095】Transportation（费用流）

    Description There are N cities, and M directed roads connecting them. Now you want to transport K un ...

  3. python装饰器之使用情景分析

    http://blog.csdn.net/yueguanghaidao/article/details/10089181

  4. 精确到时分秒的jQuery插件例子

    demo.html: <!DOCTYPE html> <html> <head>  <meta http-equiv="Content-Type&q ...

  5. linux查看端口号是否被占用

    etstat -anp |grep 端口号 root用户执行 netstat -ntupl n表示不查询dns t表示tcp协议 u表示udp协议 p表示查询占用的程序 l表示查询正在监听的程序 查看 ...

  6. LINUX系统中动态链接库的创建与使用{补充}

    大家都知道,在WINDOWS系统中有很多的动态链接库(以.DLL为后缀的文件,DLL即Dynamic Link Library).这种动态链接库,和静态函数库不同,它里面的函数并不是执行程序本身的一部 ...

  7. loadrunner打不开ie&ie默认浏览器设置方法

    loadrunner使用过程中频繁的出现问题,出现次数最多的就是lr打不开ie,或者ie一闪就关闭了,问题出在我默认浏览器的设置上,因为我原先并没有成功设置ie为默认浏览器.这是一个无意识的错误,我以 ...

  8. Matlab与CCS的连接

    1.CCS概述 Matlab 6.5(R13)或以上集成了CCSLink工具,可以支持CCS能够识别的任何板卡及其硬件DSP. 验证CCSLink是否在主机上安装成功,Matlab输入命令:help ...

  9. 在Xcode中使用Clang Format

    Xcode中的Re-Indent,顾名思义,只是一个调整缩进的功能,完全依赖它来进行代码格式化显然不够用.我们使用了一个叫做ClangFormat-Xcode的插件,配合Re-Indent一起来做代码 ...

  10. JavaScript高级程序设计8.pdf

    基本包装类型 为了便于操作基本类型值,ECMAScript定义了3个特殊的引用类型Boolean,Number和String.这些类型与本章介绍的其他用类型相似,同时也具备与各自的基本类型相应的特殊行 ...