<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Reg</title>
        <style>
            .state1{
                color:#aaa;
            }
            .state2{
                color:#000;
            }
            .state3{
                color:red;
            }
            .state4{
                color:green;
            }
        </style>
        <script src="jquery.js"></script>
        <script>
            $(function(){
 
                var ok1=false;
                var ok2=false;
                var ok3=false;
                var ok4=false;
                // 验证用户名
                $('input[name="username"]').focus(function(){
                    $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok1=true;
                    }else{
                        $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
                    }
                     
                });
 
                //验证密码
                $('input[name="password"]').focus(function(){
                    $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok2=true;
                    }else{
                        $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
                    }
                     
                });
 
                //验证确认密码
                    $('input[name="repass"]').focus(function(){
                    $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok3=true;
                    }else{
                        $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
                    }
                     
                });
 
                //验证邮箱
                $('input[name="email"]').focus(function(){
                    $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
                }).blur(function(){
                    if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
                        $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
                    }else{                 
                        $(this).next().text('输入成功').removeClass('state1').addClass('state4');
                        ok4=true;
                    }
                     
                });
 
                //提交按钮,所有验证通过方可提交
 
                $('.submit').click(function(){
                    if(ok1 && ok2 && ok3 && ok4){
                        $('form').submit();
                    }else{
                        return false;
                    }
                });
                 
            });
        </script>
    </head>
<body>
  
<form action='do.php' method='post' >
    用 户 名:<input type="text" name="username">
                <span class='state1'>请输入用户名</span><br/><br/>
    密　　码:<input type="password" name="password">
                <span class='state1'>请输入密码</span><br/><br/>
    确认密码:<input type="password" name="repass">
                <span class='state1'>请输入确认密码</span><br/><br/>
    邮　　箱:<input type="text" name="email">
                <span class='state1'>请输入邮箱</span><br/><br/>  
    <a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a>
</form>
</body>

Jquery 表单验证的更多相关文章

  1. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  2. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  3. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  4. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  5. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  6. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  7. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  8. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  9. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  10. jQuery表单验证案例

    目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...

随机推荐

  1. 纯JS实现中国行政区域上下联动选择地址

    一.实现目的: 如标题所述,通过JS来实现地址的选取,上一篇博客介绍的方式是通过java读取txt资源文件来实现地址的选择,通过ajax方式访问服务器实现省市区联动.此篇中将介绍如何使用JS实现相同功 ...

  2. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  3. 需要一个策略文件,但在加载此媒体时未设置checkPolicyFile标志

    LoaderContext的checkPolicyFile属性: 如果您从执行调用的 SWF 文件所在的域之外加载图像(JPEG.GIF 或 PNG),并且您预计将需要从 ActionScript 访 ...

  4. iOS8 定位补充

    iOS 8定位补充 iOS 8定位需要修改2个地方 1.info.plist文件中添加NSLocationAlwaysUsageDescription:描述信息 从iOS 8开始,用户定位分两种情况 ...

  5. MyElipes遇到 source not found解决方案(查看.class文件源码一劳永逸的解决方法)

    在用Myeclipse 或者是eclipse进行开发时候经常遇到这个问题. File class editor source not found 问题.原因很简单,就是因为这是一个源码包,相应的没有编 ...

  6. UISegmentedControl 控件

    一.创建 UISegmentedControl* mySegmentedControl = [[UISegmentedControl alloc]initWithItems:nil]; 是不是很奇怪没 ...

  7. Architecture.the-reactive-manifesto

    The Reactive Manifesto (Chinese Edition) Reference 1. The Reactive Manifesto http://www.reactivemani ...

  8. three.js 根据png生成heightmap

    Three.js: render real world terrain from heightmap using open data By jos.dirksen on Tue, 07/17/2012 ...

  9. MVC中使用EF：排序，过滤，分页

    原文链接:http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging ...

  10. c#一个泛型控制Textbox 和label 控件 泛型方法。

    class ControlHelper { public static void ShowOnTxtLbl<T>(T control, string mess) where T : Sys ...