zoukankan      html  css  js  c++  java
  • Jquery的小案例4、实现表单的验证(用户名和邮箱)

    <html>
    <head>
        <meta charset="utf-8"/>
        <script  src="jquery-1.4.2.min.js"></script>
    //在此处的Jquery文件封装的js文件下载地址http://download.csdn.net/detail/feilong_12/5210621   
        <script>

           $(function(){
                $(":input").each(function(){
                        var $ss=$("<strong>*</strong>");
                        $(this).parent().append($ss);
                });
                $(":input.name").blur(function(){
                    if($(this).is(".name")){
                    $(".formtip").remove();
                        if(this.value==""||this.value.length<6){
                                var eg="<span class='formtip'>用户名至少是6个字母</span>";
                                $(this).parent().append(eg);
                        }else{
                        
                                var masg="<span class='formtip'>用户名可以使用</span>";
                                $(this).parent().append(masg);
                        }
                    
                    
                    }    
                    })
                    
                        $(":input.mail").blur(function(){
                                if($(this).is(".mail")){
                                $(".emailtip").remove();
                                var reg=/\w{1,}@\w+\.\w+/;
                                var $dd=$(".mail").val();
                                if(!reg.test($dd)){
                                    var errMsg="<span class='emailtip'>邮箱不合法</span>";
                                    $(this).parent().append(errMsg);
                                }else{
                                var eee="<span class='emailtip'>您输入的邮箱符合规则</span>";
                                $(this).parent().append(eee);
                                }
                                }    
                        });
                        
                })
        </script>
    </head>
    <body>
            <div >用户名:<input type="text" class="name"/></div><br/>
            <div >密码:<input type="password"  class="pass"/></div>
            </br>
            <div  >邮箱:<input type="text" class="mail"/></div>
            <br/>
            <input type="button" value="注册"/>
    </body>
    </html>

  • 相关阅读:
    像asp.net Mvc一样开发nodejs+express Mvc站点
    js数组方法大全
    自己的时间规划
    7月暑假生活总结
    01. What Is Discrete Mathematics(中英字幕 by Ocean-藏心)
    找工作专题---二分查找
    angular.js 入门基础
    WCF实例管理
    是技术牛人,如何拿到国内IT巨头的Offer
    python
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995405.html
Copyright © 2011-2022 走看看