<!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. CFUUIDRef和CFStringRef-生成唯一标识符

    - (NSString *)createCUID:(NSString *)prefix{ NSString *  result; CFUUIDRef   uuid; CFStringRef uuidS ...

  2. RedHat 6.5 离线安装 apache2.4.23

    第一部分:安装gcc等 rpm -ivh mpfr-2.4.1-6.el6.x86_64.rpm rpm -ivh ppl-0.10.2-11.el6.x86_64.rpm rpm -ivh cpp- ...

  3. Android程序的隐藏与退出

    转自Android程序的隐藏与退出 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Destroy()方法来销毁当前Activit ...

  4. keil采用C语言模块化编程时全局变量、结构体的定义、声明以及头文件包含的处理方法

    以前写单片机程序时总是把所用函数和变量都写在一个c文件里,后来遇到大点的项目,程序动则几千行,这种方式无疑会带来N多麻烦,相信大家都有所体验吧! 后来学会了在keil里进行模块化编程,即只把功能相同或 ...

  5. lc面试准备：Remove Duplicates from Sorted List II

    1 题目 Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct ...

  6. HDU-4974 A simple water problem

    http://acm.hdu.edu.cn/showproblem.php?pid=4974 话说是签到题,我也不懂什么是签到题. A simple water problem Time Limit: ...

  7. Linux学习笔记27——共享内存

    一 共享内存 共享内存是由IPC为进程创建的一个特殊的地址范围,它将出现在该进程的地址空间中.其他进程可以将同一段共享内存连接到它们自己的地址空间中,所有进程都可以访问共享内存中的地址.如果某个进程向 ...

  8. Longest Consecutive Sequence hashset

    public class Solution { public int longestConsecutive(int[] num) { HashSet<Integer> hash=new H ...

  9. Cookie 和Session

    会话:  简单理解: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话要解决的问题: 每个用户与服务器进行交互的过程中,各自会有一些数据,程序 ...

  10. Parallel.Foreach的并发问题解决方法-比如爬虫WebClient

    场景五:线程局部变量 Parallel.ForEach 提供了一个线程局部变量的重载,定义如下: public static ParallelLoopResult ForEach<TSource ...