laravel註冊頁面（jquery驗證）
阿新 • • 發佈：2018-12-13
html
<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
/* 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>
後臺：
<?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; } }