一个小的注册界面demo

最新推荐文章于 2023-01-18 20:28:33 发布
Gemini_骑士
最新推荐文章于 2023-01-18 20:28:33 发布
阅读量478
点赞数
CC 4.0 BY-SA版权
文章标签：界面
本文链接：https://blog.youkuaiyun.com/qq_39923392/article/details/78477644
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="css/book1.css" rel="stylesheet" /> 
        <script src="js/jquery-1.11.1.min.js"></script>
        <script>
            $(function(){
                 //判断用户名
                $("#in1").blur(function(){
                 //$("span").html("aa");
                 var in1 = $("#in1");
                    if(in1.val().length < 3){
                        $("#sp1").css("color","red");
                        $("#sp1").html("用户名输入不正确");
                        $("#in1").css("border-color","red");
                        return;
                    }else{
                        $("#sp1").css("color","green");
                        $("#sp1").html("√");
                        $("#in1").css("border-color","green");
                    }

                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });
                //判断邮箱
                $("#in2").blur(function(){
                        var in2 = $("#in2");
                        var shu=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                        //var ss = /@/;
    //                  if(!/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value))){
    //                      $("#sp2").html("邮箱输入不正确");
    //                      $("#sp2").css("color","red");
    //                      return;
    //                  }else{
    //                      $("#sp2").html("√");
    //                      $("#sp2").css("color","green");
    //                  }
                    if(!in2.val().match(shu)){//判断是否加入 @ 符号
                        $("#sp2").html("邮箱输入不正确");
                        $("#sp2").css("color","red");
                        $("#in2").css("border-color","red");
                        return;
                    }else{
                        $("#sp2").html("√");
                        $("#sp2").css("color","green");
                        $("#in2").css("border-color","green");
                    }
                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });

                //判断手机号
                $("#in3").blur(function(){
                    var in3 = $("#in3");
                    if(in3.val().length != 11){//长度必须为11位
                        $("#sp3").html("邮箱输入不正确");
                        $("#sp3").css("color","red");
                        $("#in3").css("border-color","red");
                        return;
                    }else{
                        $("#sp3").html("√");
                        $("#sp3").css("color","green");
                        $("#in3").css("border-color","green");
                    }
                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });

                //判断身份证号
                $("#in4").blur(function(){
                    var in4 = $("#in4");
                    if(in4.val().length != 18){//长度必须为18位
                        $("#sp4").html("邮箱输入不正确");
                        $("#sp4").css("color","red");
                        $("#in4").css("border-color","red");
                        return;
                    }else{
                        $("#sp4").html("√");
                        $("#sp4").css("color","green");
                        $("#in4").css("border-color","green");
                    }
                }).focus(function(){//点到输入框的时候就提醒
                         $(this).triggerHandler("blur");//触发blur事件
                }).keyup(function(){//输入的时候进行提醒
                     $(this).triggerHandler("blur");//触发blur事件
                });

                $("#in5").click(function(){
                    var in1 = $("#in1");
                    if(in1 == true){
                        alert("aa");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div class="d1">
            姓名：<input id="in1"/><span style="margin-left: 5px;" id="sp1"></span><br />
            Email地址：<input  type="email" id="in2"/><span style="margin-left: 5px;" id="sp2"></span><br />
            手机号：<input  type="number"  id="in3"/><span style="margin-left: 5px;" id="sp3"></span><br />
            身份证号：<input   id="in4"/><span style="margin-left: 5px;" id="sp4"></span><br />
            <input type="submit" value="提交"  id="in5"/><br />
        </div>
    </body>
</html>