做好了一個很簡單的前端驗證加上後端的跳轉

今天要發布的這個可能是自己最粗心的一次了，很多問題都想明白了，可是做的時候卻發現不是自己想像的那樣，還得慢慢的調試，在網上查了很多方法總是行不通，還是自己摸索出來的！

前端顯示+驗證+後台查詢，小夥伴們歡迎指點！

前台要顯示的代碼html：

<form method="post" id="form" action="{:url(index/main)}"> <div class="form-group mg-t20"> <i class="icon-user icon_font"></i> <input type="text" class="login_input" id="username" placeholder="請輸入用戶名" /> </div> <div class="form-group mg-t20"> <i class="icon-lock icon_font"></i> <input type="password" class="login_input" id="password" name="password" placeholder="請輸入密碼" /> </div> <div id="msg"></div> <div class="checkbox mg-b25"> <label> <input type="checkbox" checked="checked" />記住我的登錄信息 </label> </div> <button style="submit" class="login_btn" type="submit" id="submit" >登 錄</button> </form>

使用ajax原來是很簡單的，可是真的做了卻狠痛苦呀！

奉上script代碼，這裡使用的jQuery,$.ajax最底層的方法，大神莫吐槽！

<script type="text/javascript"> $(function(){ $("#submit").bind("click",function(event){ $username = $("#username").val(); $password = $(#password).val(); if ($username == " " || $password == "") { // 阻止默認行為 $("#msg").html("<p>用戶名或密碼不能為空！</p>"); return false; }else{ $.ajax({ data: {username: $username, password: $password}, async: false, type: "post", dataType: "json", url: "{:url(index/check)}", //驗證的頁面 success: function(data){ // 獲取成功之後的所有值 console.log(data); if (data.state == 1) { window.location.href = "{:url(index/main)}"; console.log(data.state); }else{ $("#msg").html("<p>請輸入正確的用戶名或密碼</p>"); return false; } } }); } return false; }) }) </script>

接下來就是要使用php來做了，這裡採用的tp5的框架，很多還在摸索中行進！

public function check() { $ret = []; $username = input(username); //獲取前台的用戶名 $password = input(password); //獲取前台的密碼 $data = Db::table(user)->where(u_name,$username)->where(u_pwd,$password)->find(); //查詢密碼是不是正確的 // 條件判斷 if($data){ $ret = [state=>1, msg=>查詢到sql]; }else{ $ret = [state=>0, msg=>未查詢到sql]; } // 將獲取到的數值解析成為json格式 echo json_encode($ret); }

最後輸出的結果有正確的，和不正確的：

圖一表示正確

圖二表示錯誤

今天先分享這些吧，以後會有更大的進步，更多的技術，希望能和更多的小夥伴們共同成長！

推薦閱讀：