<!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. Ubuntu 12安装Virtualbox

    用aptitude或者apt-get安装Virtualbox,安装过程中会报:”No suitable module for running kernel found [fail]“,安装未成功. 在 ...

  2. I2C总线之(一)---概述

    概述: I²C 是Inter-Integrated Circuit的缩写,发音为"eye-squared cee" or "eye-two-cee" , 它是一 ...

  3. 用SharedPreferences保存List(Map(String, String))数据

    原因: SharedPreferences没有保存数组的方法,但是有时候为了保存一个数组而进行序列化,或者动用sqlite都是有点杀猪焉用牛刀的感觉,所以就自己动手改进一下吧. 解决方案: 采用的方式 ...

  4. 【POJ】2001 Shortest Prefixes

    字典树. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 26 typed ...

  5. R语言 典型相关分析

    1.关键点 #典型相关分析##典型相关分析是用于分析两组随机变量之间的相关程度的一种统计方法,它能够有效地揭示两组随机变量之间的相互(线性依赖)关系#例如 研究生入学考试成绩与本科阶段一些主要课程成绩 ...

  6. nginx+tomcat配置https

    nginx代理https后,应用redirect https变成http,很多页面报404.情况类似http://blog.sina.com.cn/s/blog_56d8ea900101hlhv.ht ...

  7. 【转】单独编译android framework模块出现的问题

    原文网址:http://blog.csdn.net/leonan/article/details/8629561 全编andorid后,单独修改编译一个framwork模块,make snod会有如下 ...

  8. VisualBox ubuntu14.04 64位 android4.4.4源码编译总结

    转载请保留出处:http://www.cnblogs.com/wi100sh/p/4337907.html 折腾了好几天,今天终于编译通过,用了4个多小时,太不容易了.如下图所示: 软件环境 虚拟机: ...

  9. 【转】Android--多线程之Handler--不错

    原文网址:http://www.cnblogs.com/plokmju/p/android_handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了 ...

  10. U3D物理碰撞总结

    OnCollisionEnter的触发条件: 1.都有boxcollider组件并且IsTrigger为false 2.主动碰撞的物体要有非运动学刚体组件,被动碰撞的物体有木有都行 3.如果主动碰撞的 ...