一个小的注册界面demo

来源：互联网发布：图片克隆软件编辑：程序博客网时间：2024/06/01 11:06
<!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>
阅读全文
0 0