小白的邊學邊寫，一個基於laravel的APP接口【API】（三）

前言

前兩篇文章咱們已經把基本的註冊功能給完成了。可是，做爲一名合格的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 = '<div class="chip check-form">'+errorMessage+'<i class="material-icons">close</i></div>';
    $('#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，完成表單的驗證和上傳了，接下來我又想，是否是應該寫一個點擊查看密碼的功能呢？
因而乎，就有了下面的東西。

<!-- html部分 -->
<div class="input-field col s12">
  <i id="see-pw1" class="material-icons prefix">visibility</i>
  <input id="icon_password" type="password" class="validate" name="password">
  <label for="icon_password">密碼</label>
</div>
<div class="input-field col s12">
  <i id="see-pw2" class="material-icons prefix">visibility</i>
  <input id="icon_password_confirmation" type="password" class="validate" name="password_confirmation">
  <label for="icon_password_confirmation">重複密碼</label>
</div>

  // 顯示\隱藏密碼
  $('#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值來獲取服務器上數據庫的內容。