媒介
前两篇文章我们已把基础的注册功用给完成了。然则，作为一位及格的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值来猎取服务器上数据库的内容。
