表单验证

来源:互联网 发布:索恩马克体测数据 编辑:程序博客网 时间:2024/06/10 08:59
<!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>

原创粉丝点击