SOURCE

$('#verification').hide();
$('#ww').hide();
 $("#ppa").click(function(){
    $("p").toggle();
  });
$('#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() != 'mfxy') {
      $("#errorMessage").html(
      "您输入的验证码有误: " + $('#verification').val());
  }
    else {
    $("#errorMessage").html('登录成功');
  }
  }
});

<div id="wi">
  <h1>魔法小樱粉会员登录</h1>
  <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 id='ppa'>你想要的验证码</button>
<p id="ww">mfxy,看完记得关上哦</p>

</div>

#errorMessage{
  color:red;
}
#wi{

 text-align:center;
  background-size: cover ;
background-repeat:no-repeat;
  width:300px;
  height:200px;
  
  padding: 100px;
  border: 1px solid #ccc;
  background-image:url(http://file06.16sucai.com/2016/0705/bc5170d3e96b42712fcf595037c0633a.jpg);
  color:black;
  margin: 20px auto;


}