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>

  • 相关阅读:
    Servlet 规范 简介
    Redis简介
    some tips
    初识Servlet
    JVM基础知识
    使用typora编辑博客
    航海が始まる日
    比较好的IT教程网
    vue 使用心得---工作中一些关键点
    Vue父组件主动获取子组件的数据和方法
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995405.html
Copyright © 2011-2022 走看看