表单验证

最新推荐文章于 2024-08-02 00:06:19 发布

love-study-lele

最新推荐文章于 2024-08-02 00:06:19 发布

阅读量275

点赞数

分类专栏： jq 文章标签：表单验证

本文链接：https://blog.csdn.net/qq_40639990/article/details/78303988

版权

jq 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>表单验证</title>
    <style type="text/css">
      *{
        padding:0;
        margin:0;
      }


      .message p{
        color:red;
        visibility:hidden;
      }
    </style>
  </head>
  <body>
    <div class="message">
      <p>你的用户名和密码不能为空</p>
      用户名:<input type="text" name="username" value="" placeholder="">
      <br /><br />
      密  码:<input type="password" name="password" value="" placeholder="">
      <br /><br />
      <button id='login'>login</button>
    </div>
  </body>
   <script src="./jquery.min.js" charset="utf-8"></script>
      <script type="text/javascript">

          $(function(){

            $('.message input').focus(function(){
              $('.message p').css('visibility','hidden');
            })


            $('#login').click(function(){

              var username = $('.message input[name=username]').val();
              var passwd  = $('.message input[name=password]').val();


              if((!username)||(!password)){

                $('.message p').css('visibility','visible');
              }
            })

          })

      </script>

</html>