小白的边学边写，一个基于laravel的APP接口【API】（三）

econi 发布于2019-07-24 10:31 / 2165人阅读

摘要：但是，作为一名合格的，我们也应该具备一些前端知识。但是，我们还需要验证手机号是否是唯一的，如果不唯一则应告知给客户端。

前言

前两篇文章我们已经把基本的注册功能给完成了。但是，作为一名合格的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值来获取服务器上数据库的内容。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/35771.html

小白的边学边写，一个基于laravel的APP接口【API】（二）

摘要：当注册成功以后，我们应该立即返回确认用户登录的值，并且作为的变量给储存起来，直到退出时删除，或者超出时间后删除。在文档里也有提及，对，就是那个叫的东东。用户信息也被正常写入，之后就可以欢快的扩展注册机制啦。前言根据上一篇文章，我们已经吧dingo/api给安装并且调试好了，那么下一步，就是来完善咱们的API了。最首要的步骤一定是要先把注册的功能给完善了，好了，那就给第一条正式API...

Travis 2019-07-31 16:07 评论0 收藏0
小白的边学边写，一个基于laravel的APP接口【API】（二）

摘要：当注册成功以后，我们应该立即返回确认用户登录的值，并且作为的变量给储存起来，直到退出时删除，或者超出时间后删除。在文档里也有提及，对，就是那个叫的东东。用户信息也被正常写入，之后就可以欢快的扩展注册机制啦。前言根据上一篇文章，我们已经吧dingo/api给安装并且调试好了，那么下一步，就是来完善咱们的API了。最首要的步骤一定是要先把注册的功能给完善了，好了，那就给第一条正式API...

skinner 2019-07-24 10:31 评论0 收藏0
小白的边学边写，一个基于laravel的APP接口【API】（二）

摘要：当注册成功以后，我们应该立即返回确认用户登录的值，并且作为的变量给储存起来，直到退出时删除，或者超出时间后删除。在文档里也有提及，对，就是那个叫的东东。用户信息也被正常写入，之后就可以欢快的扩展注册机制啦。前言根据上一篇文章，我们已经吧dingo/api给安装并且调试好了，那么下一步，就是来完善咱们的API了。最首要的步骤一定是要先把注册的功能给完善了，好了，那就给第一条正式API...

jlanglang 2019-06-27 12:07 评论0 收藏0
小白的边学边写，一个基于laravel的APP接口【API】（三）

摘要：但是，作为一名合格的，我们也应该具备一些前端知识。但是，我们还需要验证手机号是否是唯一的，如果不唯一则应告知给客户端。前言前两篇文章我们已经把基本的注册功能给完成了。但是，作为一名合格的PHPer，我们也应该具备一些前端知识。HTML+css已经是最基本的技能了，那么接下来，就来点题外内容，让我们去研究一下JavaScript吧。首先先说明用js要做什么事情，对，就是完善注册页面的...

TerryCai 2019-08-19 17:55 评论0 收藏0
小白的边学边写，一个基于laravel的APP接口【API】（三）

摘要：但是，作为一名合格的，我们也应该具备一些前端知识。但是，我们还需要验证手机号是否是唯一的，如果不唯一则应告知给客户端。前言前两篇文章我们已经把基本的注册功能给完成了。但是，作为一名合格的PHPer，我们也应该具备一些前端知识。HTML+css已经是最基本的技能了，那么接下来，就来点题外内容，让我们去研究一下JavaScript吧。首先先说明用js要做什么事情，对，就是完善注册页面的...

caige 2019-07-31 16:07 评论0 收藏0