<!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. redis问题解决

    一, redis的奇葩问题:我使用命令 redis-cli shutdown 关闭redis之后就再也灭洋启动了! 尝试1: 使用命令 sudo /etc/init.d/redis-server st ...

  2. Seven Steps to Success Machine Learning in Practice

    Seven Steps to Success Machine Learning in Practice Project failures in IT are all too common. The r ...

  3. SQL SELECT基本语句结构

    (1)SELECT select_list (2) FROM table_list (3)   WHERE search_conditions     GROUP BY group_by_list   ...

  4. 【UVA11294】Wedding （2-SAT）

    题意: 有N-1对夫妻参加一个婚宴,所有人都坐在一个长长的餐桌左侧或者右侧,新郎和新娘面做面坐在桌子的两侧.由于新娘的头饰很复杂,她无法看到和她坐在同一侧餐桌的人,只能看到对面餐桌的人.任意一对夫妻不 ...

  5. linux下常用网络操作汇总

    首先说明下RHEL6下设置IP地址的确和RHEL5下有几点是不同的. 我装完RHEL6中默认选择的是DHCP自动获取方式: [root@localhost ~]# vi /etc/sysconfig/ ...

  6. 【POJ】2117 Electricity

    无向图求割点和连通块. /* POJ2117 */ #include <iostream> #include <vector> #include <algorithm&g ...

  7. Android学习笔记（六）Fragment的生命周期

    在上一篇博文中对Fragment做了简单的介绍,现在再来探讨一下Fragment的生命周期. 一.Fragment的几种状态: 与Activity类似,Fragment也有一下几种状态: · 活动状态 ...

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

    Number是数字值对应的引用类型 var numberObject=new Number(10); Number也重写了valueof().toLocaleString().和toString()方 ...

  9. JavaScript高级程序设计7.pdf

    function类型 每个函数都是function类型的实例,函数是对象,函数名是指向对象的指针 function sum(num1,num2) { return num1+num2; } //等价于 ...

  10. c语言中static的语义

    1.static变量: 1).局部 a.静态局部变量在函数内定义,生存期为整个源程序,但作用域与自动变量相同,只能在定义该变量的函数内使用.退出该函数后, 尽管该变量还继续存在,但不能使用它. b.对 ...