SOURCE

$('#verification').hide();
 $("#hide").click(function(){
    $("#acc").hide(1000);
  });
  $("#show").click(function(){
    $("#acc").show();
  });
 
 
$('#login').click(function () {
  if ($(":text").val().length == 0) {
    $('#username').focus();
    $("#errorMessage").html(
      "请您填写手机/邮箱/用户名");
  } else if ($(":password").val().length == 0) {
    $('#password').focus();
    $("#errorMessage").html(
         "请您填写密码");
    $('#verification').show();
  } else if ($('#verification').val().length == 0) {
    $('#verification').focus();
    $('#errorMessage').html("请您填写验证码");
  }
});
$('#verification').blur(function () {
  if ($('#username').val().length != 0 && $('#password').val().length != 0) {

  if ($('#verification').val().length == 0) {
    $('#errorMessage').html("请您填写验证码");
  } else if ($('#verification').val() != 'yzm') {
      $("#errorMessage").html(
      "您输入的验证码有误: " + $('#verification').val());
  } else {
    $("#errorMessage").html('');
  }
  }
});

<div id="abb">
 <b>新闻抢先看</b><br/>
  <b>会员注册</b>
  
<p id="errorMessage"></p>
<input  id='username' type="text" 
       name="username"><br />
<input type="password" id='password' name="password"><br/>
<input type="text" id='verification'/>
<br />
  <button id='login'>登录</button>
  <button>进入主页</button>
  <p id='acc'>正确的验证码：zym</p>
  <button id="hide">隐藏</button>
<button id="show">显示</button>

    </div>

#errorMessage {
  color: red;
}
#abb{
  text-align:center;
  background-size: cover ;
background-repeat:no-repeat;
  width:300px;
  height:200px;
  
  padding: 100px;
  border: 1px solid #ccc;
 background-image:url(http://img9.ph.126.net/vNEm1BXb8KL9Xrq3fB3jzw==/2696248801928739219.gif)
}