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>

  • 相关阅读:
    基于RBAC模型的权限设计:如何设计系统权限体系?
    移动应用开发中AppID、AppKey、AppSecret
    PHP使用Redis的Pub/Sub(发布订阅)命令
    Vue教程:windows下安装npm和cnpm
    Golang panic用法
    Golang 并发Groutine实例解读(二)
    js时间戳与日期格式的相互转换
    总结微信公众平台网页开发中遇到的ios的兼容问题
    总结安装webpack过程中遇到的错误及解决方案
    微信web页面返回刷新
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995405.html
Copyright © 2011-2022 走看看