提交姓名邮箱

最新推荐文章于 2021-06-09 22:31:48 发布

gh323093

最新推荐文章于 2021-06-09 22:31:48 发布

阅读量417

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78477619

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style type="text/css">
        input{
            margin-top: 5px;
            width: 200px;
        }
    </style>
    <script src="../jquery-1.11.1/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" style="width: 50px"/><br />
</div>
</body>
</html>

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
提交姓名邮箱

html>html>head> meta charset="utf-8" /> title>Titletitle> style type="text/css"> input{ margin-top: 5px; width: 200px; } style> script src
复制链接

扫一扫