小白的边学边写，一个基于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值来获取服务器上数据库的内容。