JQuery判断格式

最新推荐文章于 2021-08-03 18:07:13 发布

Charlie·

最新推荐文章于 2021-08-03 18:07:13 发布

阅读量325

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .inner{
            width: 1000px;
            height: 100px;
            margin: 100px auto;

        }

        p{
            margin-top: 10px;
            margin-bottom: 10px;
        }div{
            margin-top: 10px;
            margin-bottom: 10px;
        }
        h3{
            margin-top: 10px;
            margin-bottom: 10px;
        }
        div button{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="inner">
    <h3>首页>演示预约</h3>
    <p>请您认真填写如下信息，我们将根据您的需求安排客服人员尽快与您联系，我们将根
        据您的详细需求为您提供一次远程上门演示，并结合演示效果为您开通满足您需求的
        使用账号。</p>
    <div>公司名称：<input type="text" class="name"><span class="sname"></span></div>
    <div>  联  系  人  ：<input type="text" class="linkman"><span class="slinkman"></span></div>
    <div>
        <input type="radio"  name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
        <span class="ssex"></span>
        </div>
    <div>  手  机  号  ：<input type="text" class="number"><span class="snumber"></span></div>
    <div>  邮        箱      ：<input type="text" class="email"><span class="semail"></span></div>
     <div>
         需求：<input type="checkbox">人力资源管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">客户关系管理 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">项目管理<br>
        <input type="checkbox">项目财务核算&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">工时管理 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">费用管理<br>
        <input type="checkbox">文档管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">物品管理 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">员工自助平台<br>
        <input type="checkbox">职能BI&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox">移动办公（可多选）
         <span class="scheckbox"></span>
     </div>
    <button class="btn">提交申请</button>
    <p>想了解更多信息，可进行咱先咨询或拨打免费客服热线电话4007-888-7772进行咨询</p>
     <script src="../jquery-1.11.1.min.js"></script>
    <script>

        $(function () {

           $(".btn").click(function () {

               var name=$(".name").val().length;
               console.log(name);
               if (name<1){
                   $(".sname").css("color","red").html("公司名称未输入");
               }else{
                   $(".sname").css("color","red").html("√");
               }




                var linkman=$(".linkman").val().length;
                console.log(linkman);
                if (linkman<1){
                    $(".slinkman").css("color","red").html("公司名称未输入");
                }else{
                    $(".slinkman").css("color","red").html("√");
                }


               var sex=$('input:radio[name="sex"]:checked').val();
               if(sex==null){
                   $(".ssex").css("color","red").html("请选择性别");

               }
               else{
                   $(".ssex").css("color","red").html("√");

               }

               var number=$(".number").val().length;
               console.log(number);
               if(number==11){
                   $(".snumber").css("color","red").html("√");
               }else{
                   $(".snumber").css("color","red").html("手机号输入不正确");
               }

               var b=$(".email").val().indexOf("@");
               console.log(b);
               if (b!=-1){
                   $(".semail").text("√").css("color","red");
               }else {
                   $(".semail").text("用户名格式不正确").css("color","red");
               }

                var duo=$("input[type='checkbox']").is(":checked");
                    console.log(duo)
               if (duo==true){
                   scheckbox
                   $(".scheckbox").text("√").css("color","red");
               }else{
                   $(".scheckbox").text("最少选择一个").css("color","red");
               }
            })


        })
    </script>
</div>

</body>
</html>