摘要：但是，作為一名合格的，我們也應(yīng)該具備一些前端知識(shí)。但是，我們還需要驗(yàn)證手機(jī)號(hào)是否是唯一的，如果不唯一則應(yīng)告知給客戶端。

前兩篇文章我們已經(jīng)把基本的注冊(cè)功能給完成了。但是，作為一名合格的PHPer，我們也應(yīng)該具備一些前端知識(shí)。HTML+css已經(jīng)是最基本的技能了，那么接下來，就來點(diǎn)題外內(nèi)容，讓我們?nèi)パ芯恳幌?b>JavaScript吧。
首先先說明用js要做什么事情，對(duì)，就是完善注冊(cè)頁(yè)面的驗(yàn)證功能。我們的注冊(cè)信息有（用戶名）（手機(jī)號(hào)）（密碼），在一般網(wǎng)站或APP的注冊(cè)機(jī)制中，都會(huì)有讓用戶再輸入一遍密碼，以確保錄入正確的密碼防止因?yàn)閬y輸錯(cuò)輸導(dǎo)致的不便，因此還應(yīng)當(dāng)有（重復(fù)密碼）。

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

  // 表單驗(yàn)證
  var validator = new Validator("register",[
    {
      name: "name",
      display:"請(qǐng)?zhí)顚懹脩裘鹻{name}}|用戶名太短|用戶名太長(zhǎng)",
      rules: "required|min_length(6)|max_length(20)"
    },
    {
      name: "phone",
      display:"你輸入的{{phone}}不是合法手機(jī)號(hào)碼",
      rules: "is_phone"
    },
    {
      name: "password",
      display:"請(qǐng)輸入密碼|密碼長(zhǎng)度應(yīng)超過6位|密碼長(zhǎng)度應(yīng)少于20位",
      rules: "required|min_length(6)|max_length(20)"
    },
    {
      name: "password_confirmation",
      display:"請(qǐng)?jiān)佥斎胍槐槊艽a",
      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);
      }
      // 自動(dòng)清除內(nèi)容
      setTimeout(function(){
        $("#error_msg").empty();
      }, 5000);
      // console.log(validator);
    }else{
      submitForm();
    }
  });
  function writeError(errorMessage){
    var errorHtml = "
"+errorMessage+"close
";
    $("#error_msg").append(errorHtml);
  }

它都做了哪些事，首先所有內(nèi)容不能為空，然后驗(yàn)證了是否為空和長(zhǎng)度夠不夠還有兩次輸入密碼是否一致，最后把錯(cuò)誤信息用jQuery的append()函數(shù)插入到頁(yè)面上，并且規(guī)定了5秒后自動(dòng)清除。之后的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，完成表單的驗(yàn)證和上傳了，接下來我又想，是不是應(yīng)該寫一個(gè)點(diǎn)擊查看密碼的功能呢？
于是乎，就有了下面的東西。

  visibility
  
  密碼


  visibility
  
  重復(fù)密碼


  // 顯示隱藏密碼
  $("#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");
      }
    }
  });
  

附上效果圖

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

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

去測(cè)試

到這時(shí)功能就很完備了。

接下來我們將用得到的token值來獲取服務(wù)器上數(shù)據(jù)庫(kù)的內(nèi)容。