htmljavascript
<form class="reg_info" action="" method="post">
<div class="col-md-6 login-do1 animated wow fadeInLeft" data-wow-delay=".5s">
@if(count($errors)>0)
@if(is_object($errors))
@foreach($errors->all() as $error)
<p style="color: red;">{
{$error}}</p>
@endforeach
@else
<p style="color: red;">{
{$error}}</p>
@endif
@endif
<div class="login-mail">
<input type="text" id="username" name="user_name" placeholder="username" required="">
<i class="glyphicon glyphicon-lock"></i>
<p></p>
</div>
<div class="login-mail">
<input type="password" id="password" name="password" placeholder="Password" required="">
<i class="glyphicon glyphicon-lock"></i>
<p></p>
</div>
<div class="login-mail">
<input type="password" id="repeat_password" name="password_confirmation" placeholder="Repeated password" required="">
<i class="glyphicon glyphicon-lock"></i>
<p></p>
</div>
<!-- 驗證碼 -->
<div class="login-mail" style="width: 300px;">
<input type="text" id="code" name="code" placeholder="code" required="">
<p></p>
</div>
<img src="{
{url('captcha')}}" style="width: 130px;height: 60px;margin-left: 410px;position: relative;top: -74px;" onclick="this.src=this.src+'?'+Math.random()" class="code" >
<input type="checkbox" id="checkbox" name="checkbox" >I agree with the terms
</div>
<div class="col-md-6 login-do animated wow fadeInRight" data-wow-delay=".5s">
<label class="hvr-sweep-to-top login-sub">
<input type="submit" value="Submit">
</label>
<p>Already register</p>
<a href="login.html" class="hvr-sweep-to-top">Login</a>
</div>
<div class="clearfix"> </div>
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
</form>
js php
/*
author:咔咔
address:陝西西安
wechat:fangkangfk
*/
<script type="text/javascript">
var tag = false;
// 驗證帳號
function check_name(){
var name = $('#username').val();
var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
if(!reg.test(name)){
$('#username').parent().find('p').text('帳號必須爲6-12位的數字和字母的組合').css('color','red','font-size','14px')
return false;
}else{
if(name){
$.get('{
{url("checkName")}}',{name:name},function(data){
if(data.code == 400){
$('#username').parent().find('p').text(data.msg).css('color','red')
tag = false;
}else{
$('#username').parent().find('p').text('')
tag = true;
}
},'json')
return tag;
}
}
}
// 驗證密碼
function check_password()
{
var password = $('#password').val();
var reg=/^[A-Za-z0-9]{6,18}$/;
if(!reg.test(password)){
$('#password').parent().find('p').text('密碼必須爲6-18位的數字和字母的組合').css('color','red','font-size','14px')
return false;
}else{
$('#password').parent().find('p').text('')
return true;
}
}
// 驗證重複密碼
function check_repeat()
{
var password = $('#password').val();
var repeat_password = $('#repeat_password').val();
if(password != repeat_password){
$('#repeat_password').parent().find('p').text('倆次密碼不一致').css('color','red','font-size','14px')
return false;
}else{
$('#repeat_password').parent().find('p').text('')
return true;
}
}
// 驗證驗證碼
function check_code()
{
var code = $('#code').val();
$.get("{
{url('checkCode')}}",{code:code},function(data){
if(data.code == 400){
$('#code').parent().find('p').text(data.msg).css('color','red','font-size','14px');
return false;
}else{
$('#code').parent().find('p').text('');
return true;
}
});
}
// 觸發驗證帳號事件
$('#username').keyup(function(){
check_name();
})
// 觸發驗證密碼
$('#password').keyup(function(){
check_password();
})
// 觸發驗證重複密碼
$('#repeat_password').keyup(function(){
check_repeat();
})
// 觸發驗證驗證碼
$('#code').keyup(function(){
check_code();
})
// 表單提交的最後一步認證
$('.reg_info').submit(function(){
// 驗證條款
var checked = $('#checkbox').prop('checked')
if(!checked){
alert('請贊成條款');
return false;
}
if(check_name() && check_password() && check_repeat()){
return true;
}else{
return false;
}
})
</script>
後臺：css
<?php
namespace app\Http\Controllers\Index;
use DB;
use Illuminate\Http\Request;
use App\Http\Controllers\CommonController;
use Illuminate\Support\Facades\Validator;
use App\Http\model\User;
use Gregwar\Captcha\CaptchaBuilder;
use Session;
use Crypt;
/**
* 用戶註冊類
*/
class RegisterController extends CommonController
{
// 用戶註冊頁面
public function index(Request $request)
{
//設置頁面信息
$data = $this->setPageInfo('Register','','');
// dd($data);
//獲取請求方式
$method=$request->method();
if($method == 'POST'){
$input = $request->all();
$rules = [
'code'=>'required',
'user_name'=>'required',
'password' => 'required|confirmed',
];
$message = [
'required' => ':attribute不能爲空',
'password.confirmed' => '兩次輸入的密碼不一致'
];
$validator = Validator::make($input, $rules, $message);
/*$validator->passes()驗證經過返回true
* $validator->fails()驗證經過返回false
* */
// 驗證是否輸入的內容是否所有經過驗證
if($validator->fails()){
// laravle自帶的返回錯誤的方法
return back()->withErrors($validator);
}
$user = new user();
$user->user_name = $input['user_name'];
$user->password = Crypt::encrypt($input['password']);
$data = $user->save($data);
}
return view('home.register')->with([
'data'=>$data
]);
}
// 驗證用戶名是否重複
public function checkName(Request $request)
{
// 獲取用戶名
$username = $request->input('name');
if($username){
$userData = new user();
// 查詢數據庫判斷是否存在用戶輸入的值
$data = $userData->where([
'user_name'=>$username
])->first();
if($data){
$send = ['code'=>400,'msg'=>'用戶名已存在'];
}else{
$send = ['code'=>200];
}
return $send;
}
}
// 驗證碼
public function code()
{
$builder = new CaptchaBuilder();
$builder->build(150,32);
$phrase = $builder->getPhrase();
//把內容存入session
// Session::flash('milkcaptcha', $phrase); //存儲驗證碼
session(['code' => $phrase]);
ob_clean();
return response($builder->output())->header('Content-type','image/jpeg');
}
// 驗證驗證碼
public function checkCode(Request $request)
{
$inputCode = $request->input('code');
$code = session('code');
if($inputCode != $code){
$send = ['code'=>400,'msg'=>'驗證碼輸入錯誤'];
}else{
$send = ['code'=>200];
}
return $send;
}
}