View:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 |
@extends('layouts.front') @section('title', '註冊') @push('styles') <style> form .row > div:first-child{ color: #FFF; } .no-padding{ padding: 0; } .flex{ display: flex; } .mr-20{ margin-right: 20px; } </style> @endpush @push('scripts') <script charset="utf-8" src="{{BASE_URL}}assets/front/js/signup.js?v=1.0"></script> @endpush @push('modals') @endpush @section('content') <!-- Contact --> <section id="content"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading text-uppercase tx-white">註冊會員</h2> <h3 class="section-subheading text-muted tx-white">請於下方表單完整輸入</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <form id="signup_form" name="signup_form" novalidate action="#" method="post"> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 請輸入姓名 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="name" name="name" type="text" placeholder="姓名" required data-validation-required-message="請輸入姓名"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 請輸入身份證字號 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="pid" name="pid" type="text" placeholder="身份證字號" required data-validation-required-message="請輸入身份證字號" data-validation-callback-callback="check_id_callback"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 請輸入Email </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="email" name="email" type="email" placeholder="Email" required data-validation-required-message="請輸入Email" data-validation-email-message="Email格式錯誤"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 聯絡電話 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="phone" name="phone" type="tel" placeholder="電話" required data-validation-required-message="請輸入電話"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 手機號碼 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="mobile" name="mobile" type="tel" placeholder="手機號碼" required data-validation-required-message="請輸入手機號碼" pattern="\d{10}" data-validation-pattern-message="請輸入10位數字"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 傳真號碼 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="fax" name="fax" type="tel" placeholder="傳真號碼"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 聯絡住址 </div> <div class="col-8 col-sm-4"> <div class="form-group flex"> <div class="col-md-5 no-padding mr-20"> <select class="form-control" id="city" name="city" required data-validation-required-message="請選擇縣市"> <option value="">--選擇縣市--</option> @foreach($cities as $item) <option value="{{$item->city}}">{{$item->city}}</option> @endforeach </select> <p class="help-block text-danger"></p> </div> <div class="col-md-5 no-padding"> <select class="form-control" id="area" name="area" required data-validation-required-message="請選擇地區"> <option value="">--選擇地區--</option> </select> </div> </div> <div class="form-group"> <input class="form-control" id="address" name="address" type="text" placeholder="地址" required data-validation-required-message="請輸入地址"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 銀行代碼 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <select class="form-control" id="bank" name="bank" required data-validation-required-message="請選擇銀行"> <option value="">--選擇--</option> @foreach($banks as $item) <option value="{{$item->bank_id}}">{{$item->bank_id . ' ' . $item->bank_name}}</option> @endforeach </select> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 分行代碼 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <select class="form-control" id="branch_id" name="branch_id" required data-validation-required-message="請選擇分行"> <option value="">--選擇--</option> </select> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 銀行帳號 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="bank_account" name="bank_account" type="text" placeholder="銀行帳號" required data-validation-required-message="請輸入銀行帳號"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 密碼 (至少5碼) </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="password" name="password" type="password" placeholder="密碼 (至少5碼)" required data-validation-required-message="請輸入密碼 (至少5碼)" minlength="5" data-validation-minlength-message="密碼至少5碼"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row justify-content-center"> <div class="col-4 col-sm-3"> 確認密碼 </div> <div class="col-8 col-sm-4"> <div class="form-group"> <input class="form-control" id="passwordAgain" name="passwordAgain" type="password" required data-validation-required-message="請再次輸入密碼" data-validation-matches-match="password" data-validation-matches-message="必須和上方輸入的密碼相同" minlength="5" data-validation-minlength-message="密碼至少5碼"> <p class="help-block text-danger"></p> </div> </div> </div> <div class="row"> <div class="col-lg-12 text-center"> <div id="success"></div> <button class="btn btn-primary btn-xl text-uppercase" type="submit">確定註冊</button> {{ csrf_field() }} <!--線上遊戲--> <input type="hidden" name="cat" value="34"> </div> </div> </form> </div> </div> </div> </section> @endsection |
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(document).ready(function(){ $('#city').on('change', function(e){ var $this = $(this); var city = $this.val(); member_app.show_areas(city); }); $('#bank').on('change', function(e){ var $this = $(this); var bank_id = $this.val(); member_app.show_branches(bank_id); }); /* $("input,select,textarea").not("[type=submit]").jqBootstrapValidation({ submitError: function ($form, event, errors) { console.log(errors); }, submitSuccess: function ($form, event) { console.log(event); } }); */ $('#signup_form').on('submit', function(e){ e.preventDefault(); member_app.create_member(); }); member_app.init(); }); function check_id_callback($el, value, callback) { var result = checkID(value); callback({ value: value, valid: result, message: "身份證號碼格式錯誤" }); } function checkID(id){ //建立字母分數陣列(A~Z) var city = new Array( 1,10,19,28,37,46,55,64,39,73,82, 2,11, 20,48,29,38,47,56,65,74,83,21, 3,12,30 ) id = id.toUpperCase(); // 使用「正規表達式」檢驗格式 if (id.search(/^[A-Z](1|2)\d{8}$/i) == -1) { //alert('基本格式錯誤'); return false; } else { //將字串分割為陣列(IE必需這麼做才不會出錯) id = id.split(''); //計算總分 var total = city[id[0].charCodeAt(0)-65]; for(var i=1; i<=8; i++){ total += eval(id[i]) * (9 - i); } //補上檢查碼(最後一碼) total += eval(id[9]); //檢查比對碼(餘數應為0); return ((total%10 == 0 )); } } var member_app = function(){ var $c = null; var $form = null; var member_id = 0; var parent_id = 0; var action = 'new'; function init(){ $form = $('#signup_form'); } function show_areas(city){ var params = { 'city': city }; $.get(base_url + 'ajax/areas', params, function(data){ if(typeof data.status == 'undefined'){ alert(data); }else if(data.status == 'fail'){ alert(data.message); }else{ refresh_areas(data.data); } }); } function refresh_areas(data){ var $s = $('#area'); $s.find('option:gt(0)').remove(); for(var i = 0; i < data.length; i++){ var area = data[i]; $s.append('<option value="' + area.id + '">' + area.zip_code + ' ' + area.area + '</option>'); } } function show_branches(bank_id){ var params = { 'bank_id': bank_id }; $.get(base_url + 'ajax/branches', params, function(data){ if(typeof data.status == 'undefined'){ alert(data); }else if(data.status == 'fail'){ alert(data.message); }else{ refresh_branches(data.data); } }); } function refresh_branches(data){ var $s = $('#branch_id'); $s.find('option:gt(0)').remove(); for(var i = 0; i < data.length; i++){ var item = data[i]; $s.append('<option value="' + item.branch_id + '">' + item.branch_id + ' ' + item.branch + '</option>'); } } function show_response_error(errors){ var str = ''; //console.log(errors); for(var key in errors){ var err = errors[key]; str += err[0] + '\n'; } alert(str); } function create_member(){ var params = $form.serialize(); /* var extra = { id: id } params += '&' + $.param(extra); */ //console.log(params); //return; $.ajax({ type: 'post', url: base_url + 'member/signup_save', data: params, dataType: 'json', success: function(data){ if(typeof data.status == 'undefined'){ alert(data); }else if(data.status == 'fail'){ alert(data.message); }else{ //console.log(data); alert('新增成功'); } }, error: function(data){ var errors = data.responseJSON; show_response_error(errors); } }); } return { init: init, show_areas: show_areas, show_branches: show_branches, create_member: create_member } }(); |
Conroller:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
public function signup_save(NewMemberReq $req){ $fields = Config::get('front.member_fields'); $data = $req->input(); logg($data); $data = request_data($req, $fields); if(is_array($data) == false){ show_alert($data); } logg($data); if($this->check_nid($data['pid']) == false){ show_alert('身份證錯誤'); } //Check email $user = MemberM::user_by_email($data['email']); if($user != false){ show_alert('Email已經存在'); } $member_id = MemberM::new_member($data); if($member_id == false){ show_alert('無法新增會員'); } $login = [ 'id' => $member_id, 'name' => $data['name'] ]; session($login); show_alert('註冊成功!', BASE_URL); } |
Form Request Validator:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; use Illuminate\Validation\Rule; class NewMemberReq extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'action' => 'required|' . Rule::in(["new", "update"]), 'name' => 'required', 'pid' => 'required', 'email' => 'required|email|unique:member', 'phone' => 'required', 'mobile' => 'required|numeric|digits:10', 'city' => 'required', 'area' => 'required|numeric', 'address' => 'required', 'bank' => 'required', 'branch_id' => 'required', 'bank_account' => 'required', 'password' => 'required|min:5', 'cat' => 'required|numeric', ]; } public function messages() { return [ 'action.in' => '動作代碼錯誤', 'name.required' => '姓名為必填', 'pid.required' => '身份證號為必填', 'email.required' => 'Email為必填', 'email.email' => 'Email格式不正確', 'email.unique' => 'Email已經存在', 'phone.required' => '電話為必填', 'mobile.required' => '手機號碼為必填', 'mobile.numeric' => '手機號碼為10位數字', 'mobile.digits' => '手機號碼為10位數字', 'city.required' => '縣市為必填', 'area.required' => '地區為必填', 'area.numeric' => '地區為數字', 'address.required' => '地址為必填', 'bank.required' => '銀行為必填', 'branch_id.required' => '分行為必填', 'bank_account.required' => '銀行帳號為必填', 'password.required' => '密碼為必填', 'password.min' => '密碼至少要5碼', 'cat.required' => '產品分類為必填', 'cat.numeric' => '產品分類為數字', ]; } } |