摘要：但是，作為一名合格的，我們也應該具備一些前端知識。但是，我們還需要驗證手機號是否是唯一的，如果不唯一則應告知給客戶端。

前兩篇文章我們已經把基本的注冊功能給完成了。但是，作為一名合格的PHPer，我們也應該具備一些前端知識。HTML+css已經是最基本的技能了，那么接下來，就來點題外內容，讓我們去研究一下JavaScript吧。
首先先說明用js要做什么事情，對，就是完善注冊頁面的驗證功能。我們的注冊信息有（用戶名）（手機號）（密碼），在一般網站或APP的注冊機制中，都會有讓用戶再輸入一遍密碼，以確保錄入正確的密碼防止因為亂輸錯輸導致的不便，因此還應當有（重復密碼）。

開始之前先說說我的js資源吧，我用到了jQuery.js和Validator.js來開發這個功能。前者不必多說，后者是什么呢？Validator.js來自于大神的手筆，具體請看 Validator.js。
于是照著文檔和自己的理解，寫出了這么一段代碼（別忘記引入相關的js文件）

  // 表單驗證
  var validator = new Validator("register",[
    {
      name: "name",
      display:"請填寫用戶名{{name}}|用戶名太短|用戶名太長",
      rules: "required|min_length(6)|max_length(20)"
    },
    {
      name: "phone",
      display:"你輸入的{{phone}}不是合法手機號碼",
      rules: "is_phone"
    },
    {
      name: "password",
      display:"請輸入密碼|密碼長度應超過6位|密碼長度應少于20位",
      rules: "required|min_length(6)|max_length(20)"
    },
    {
      name: "password_confirmation",
      display:"請再輸入一遍密碼",
      rules: "required"
    }
  ],function(obj,evt){
    var checkPassword = $("#icon_password").val();
    var checkConfirmPassword = $("#icon_password_confirmation").val();
    if (checkPassword != checkConfirmPassword) {
      var message = {
        id: null,display: null,element: null,name: null,
        message: "兩次輸入的密碼不一致",messages: null,rule: null
      };
      obj.errors.push(message);
    }
    if(obj.errors.length>0){
      for (var i = 0; i < obj.errors.length; i++) {
        writeError(obj.errors[i].message);
      }
      // 自動清除內容
      setTimeout(function(){
        $("#error_msg").empty();
      }, 5000);
      // console.log(validator);
    }else{
      submitForm();
    }
  });
  function writeError(errorMessage){
    var errorHtml = "
"+errorMessage+"close
";
    $("#error_msg").append(errorHtml);
  }

它都做了哪些事，首先所有內容不能為空，然后驗證了是否為空和長度夠不夠還有兩次輸入密碼是否一致，最后把錯誤信息用jQuery的append()函數插入到頁面上，并且規定了5秒后自動清除。之后的submitForm()才開始提交表單。

  // 提交表單
  function submitForm() {
    var $registerForm = $("#register");    
    $.ajax({
      type: "post",
      url: "http://localhost/register",
      data: $registerForm.serialize(),
      async: false,
      dataType:"json",
      success: function(data){
          alert(JSON.stringify(data)); 
      }
    });    
  }

OK，完成表單的驗證和上傳了，接下來我又想，是不是應該寫一個點擊查看密碼的功能呢？
于是乎，就有了下面的東西。

  visibility
  
  密碼


  visibility
  
  重復密碼


  // 顯示隱藏密碼
  $("#see-pw1").click(function(){
    if ($("#icon_password").val() != "") {
      if ($("#icon_password").hasClass("see")) {
        $("#icon_password").removeClass("see");
        $("#icon_password").attr("type", "password");
        $("#see-pw1").text("visibility");
      }else{
        $("#icon_password").addClass("see");
        $("#icon_password").attr("type", "text");
        $("#see-pw1").text("visibility_off");
      }
    }
  });
  $("#see-pw2").click(function(){
    if ($("#icon_password_confirmation").val() != "") {
      if ($("#icon_password_confirmation").hasClass("see")) {
        $("#icon_password_confirmation").removeClass("see");
        $("#icon_password_confirmation").attr("type", "password");
        $("#see-pw2").text("visibility");
      }else{
        $("#icon_password_confirmation").addClass("see");
        $("#icon_password_confirmation").attr("type", "text");
        $("#see-pw2").text("visibility_off");
      }
    }
  });
  

附上效果圖

雖然說我們已經在前端完善了驗證規則，但是，如果一旦被別人得到了我們的API，那么就能胡亂的輸入數據了，真是一場災難。
所以對于APP來說，如何防止注冊的時候無法驗證注冊方的真實環境呢？就是說注冊者到底是不是用APP客戶端來注冊信息的。這里我又要提一點自己的個人見解了。在APP安裝完成之后我們應該及時告知服務器有一款APP被安裝了，并且在客戶端生成一段特殊標識傳回服務器，服務器將有特殊驗證規則的標識儲存起來，等注冊時由APP返回給服務器，OK，是對的注冊環境，再開始注冊。
但是我只是想想O(∩_∩)O~，實際做起來我還是有千萬個不想。但是，我們還需要驗證手機號是否是唯一的，如果不唯一則應告知給客戶端。
首先我們應該修改AuthenticateController.php文件的內容

//引入類
use Validator;
//在register方法內添加驗證規則的代碼
$validator = Validator::make($request->all(), [
    "phone" => "unique:users"
]);
if ($validator->fails())
{
    return response()->json("該用戶已存在");
}

去測試

到這時功能就很完備了。

接下來我們將用得到的token值來獲取服務器上數據庫的內容。