<!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. “未能加载文件或程序集file:///E:/MoneySet.dll或它的某一个依赖项，试图加载格式不正确的程序,行203，位置5. 文件：MReportSet.resx”，

    http://bbs.csdn.net/topics/390334265 1.右键卸载项目2.右键选择编辑工程文件,在打开的文件的最后一行</project>之前加以下内容: <Pr ...

  2. jsp分页技术

    1.以下为分页类: import java.io.Serializable;  import java.util.List;    import org.apache.commons.lang.bui ...

  3. 有感，懂市场比懂产品重要，懂产品比懂技术重要——想起凡客诚品和YY语音了

    一个创业公司,最好三样都要有,但应该CEO是懂市场,经理懂产品,程序员最好懂技术厉害一点-这还不算,销售也要厉害一点,不能守株待兔- 美工——有钱最好请个美工,最起码也要请人设计修改一下- 财务——不 ...

  4. lc面试准备:Implement Stack using Queues

    1 题目 Implement the following operations of a stack using queues. push(x) -- Push element x onto stac ...

  5. lc面试准备:Number of 1 Bits

    1 题目 Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also ...

  6. new 与override 区别

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Newover ...

  7. 初遇ping++

    运行遇到的bug java.lang.NoClassDefFoundError: Failed resolution of: Lcom/pingplusplus/android/PingppLog; ...

  8. netstat 命令state值

    1.LISTENING状态 FTP服务启动后首先处于侦听(LISTENING)状态. State显示是LISTENING时表示处于侦听状态,就是说该端口是开放的,等待连接,但还没有被连接.就像你房子的 ...

  9. UVa 11077 Find the Permutations（置换+递推）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=35431 [思路] 置换+递推 将一个排列看作一个置换,分解为k个循 ...

  10. 宁波Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...