使用javascript檢查驗證

Question

我發現了同樣的問題的幾個主題，但我不知道如何適應我的示例。

我有這個登錄表單：

<form action=do_login.php?id= method=post> 
        <label>Enter your Frequent Diner ID</label><br> 
        <div class="shake-id"> 
         <input id="fd-id" class="login-input" type="text" name=loginid value="" maxlength="8" placeholder="Frequent Diner ID" /><br> 
        </div> 
        <div class="id-alert" style="display: none;">Your Frequent Diner ID must have 8 digits. Check and try again</div> 
        <label>Enter your Password</label><br> 
        <div class="shake-pass"> 
         <input id="pass" class="login-input" type="password" name=password value="" maxlength="20" placeholder="Password" /><br> 
        </div> 
        <input type=hidden name=call_from value="login.php"> 
        <input type=hidden name=forward_url value="<?PHP echo urlencode(@$_REQUEST["forward_url"])?>"><br><br> 
        <input type=submit value="Login"> 
</form> 

然後我有這個文件做登錄：

<?php 
require_once("config.php"); 

require_once(PATH_FUNCTION."/check_permission.php"); 



//default login fail landing page 
$redirect = (isset($_REQUEST['call_from']))?PAGE_LOGINFAIL:PATH_PUBLIC; 
$errcode = "err1"; 
$forward_url = ""; 

if (strlen($_REQUEST['loginid'])>0&&strlen($_REQUEST['password'])>0) { 
unset($_SESSION["user"]);                 
$fields = array(
    "loginid" => @$_REQUEST['loginid'], 
    "password"=> @$_REQUEST['password'] 
    ); 
$user = new user("cuisine_user",$fields); 
$data=$user->login(); 

if ($data&&$data["login_fail"]==0) { 

    $errcode = "err0"; 
    $redirect=(@$_REQUEST['forward_url'])?urldecode(@$_REQUEST['forward_url']):PATH_PUBLIC; 

    //get session 
    $session=new session(); 

    $_SESSION["site_".SITE."_id"]=$session->newSession(); 
    //get user session 
    $_SESSION["user"]=$data; 


    $set_f = array("login_count"=>1+$data['login_count'],"login_fail"=>0); 
    $where_f = array("id"=>$data['id']); 
    $user->update($set_f,$where_f); 


    if (isset($_REQUEST['forward_url'])){ 
    $_SESSION["logout_url"] = PATH_PUBLIC; 
    } 
    else{ 
    if (isset($_SESSION['preview_mode']) && $_SESSION['preview_mode']) 
     $_SESSION["logout_url"] = PATH_PUBLIC."?mode=1"; 
    else 
     $_SESSION["logout_url"] = PATH_PUBLIC; 
    } 

    if (isset($_REQUEST['forward_url'])) 
    header('Location: '.$redirect); 
    echo "200:".$_SESSION["user"]["username"]; 
} 
else 
{ 
    // add login fail by 1 
    if ($data['login_fail']>0){ 
    $set_f = array("login_fail"=>$data['login_fail']); 
    $where_f = array("id"=>$data['id']); 
    //$user->update($set_f,$where_f); 
    } 
    $forward_url = (@$_REQUEST['forward_url'])?'&forward_url='.urldecode(@$_REQUEST['forward_url']):''; 
    if (isset($_REQUEST['forward_url'])) 
    header('Location: '.$redirect."?code=".$errcode.$forward_url); 
    echo "300"; 

} 

} 
else { 
    $forward_url = (@$_REQUEST['forward_url'])?'&forward_url='.urldecode(@$_REQUEST['forward_url']):''; 
    if (isset($_REQUEST['forward_url'])) 
    header('Location: '.$redirect."?code=".$errcode.$forward_url); 
    echo "400"; 
} 

die(); 
?> 

最後這個腳本再檢查一下字段：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script> 
//BLOCK THE LETTERS AND DOT/SLASH/ETC IN FD NUMBER 
$(document).ready(function() { 
    $("#fd-id").keydown(function (e) { 
     // Allow: backspace, delete, tab, escape, enter 
     if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 || 
      // Allow: Ctrl+A, Command+A 
      (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) || 
      // Allow: home, end, left, right, down, up 
      (e.keyCode >= 35 && e.keyCode <= 40)) { 
       // let it happen, don't do anything 
       return; 
     } 
     // Ensure that it is a number and stop the keypress 
     if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
      e.preventDefault(); 
     } 
    }); 
}); 

//CHECK WHEN CUSTOMER SUBMIT 
$('form').submit(function() { 

    var value = document.getElementById('fd-id').value; 

    if (value.length !== 8) { 
     $('.shake-id').effect("shake"); 
     $('.id-alert').fadeIn('slow'); 
     $('#fd-id').addClass('input-wrong'); 
     return false; 
    } 

}); 

//ACTIVATE FUNCTION VALIDATE 
$("#fd-id").on('input', validate); 

//CLEAN THE WRONG MESSAGE IF THE CUSTOMER TYPE ALL THE DIGITS 
function validate() { 
    var value = document.getElementById('fd-id').value; 

    if (value.length == 8) { 
     $('.id-alert').fadeOut('slow'); 
     $('#fd-id').removeClass('input-wrong'); 
    } 
    else if (value.length == 0) { 
     $('.id-alert').fadeOut('slow'); 
    } 
} 

</script> 

那麼現在我想驗證與JavaScript的密碼和logingid在同一個文件比我有我的形式。所以我可以添加一些我現在擁有的友好效果。 任何想法？因爲如果我去其他文件，我不能添加那麼效果。

Answer 1

我認爲你採取了錯誤的方法來輸入驗證。把它看作一組用戶必須遵循的規則，只要有錯誤，表單將不會被髮送。

你不應該阻止字符或不是。讓用戶根據自己的喜好進行填充，當輸入更改焦點和用戶嘗試提交時，您可以驗證（或標記爲錯誤）輸入。

現在，您可以通過多種不同的方式來實現這一點，但是今天將服務器和客戶端分開的工作非常流行。有一個完整的檢查系統客戶端是很好的，當一切正常時，您可以將它發送到服務器以進行更多檢查。

表單驗證器採用完全相同的方法。 由於您使用的是jQuery，因此您可能會使用validator。有跡象表明，存在着許多不同的：

• jqueryvalidation
• formvalidator
• jquery-validation

他們所有的工作幾乎相同的方式。我親自使用了第一個。

<form class="cmxform" id="commentForm" method="get" action=""> 
    <fieldset> 
    <legend>Please provide your name, email address (won't be published) and a comment</legend> 
    <p> 
     <label for="cname">Name (required, at least 2 characters)</label> 
     <input id="cname" name="name" minlength="2" type="text" required> 
    </p> 
    <p> 
     <label for="cemail">E-Mail (required)</label> 
     <input id="cemail" type="email" name="email" required> 
    </p> 
    <p> 
     <label for="curl">URL (optional)</label> 
     <input id="curl" type="url" name="url"> 
    </p> 
    <p> 
     <label for="ccomment">Your comment (required)</label> 
     <textarea id="ccomment" name="comment" required></textarea> 
    </p> 
    <p> 
     <input class="submit" type="submit" value="Submit"> 
    </p> 
    </fieldset> 
</form> 
<script> 
$("#commentForm").validate(); 
</script> 

這裏它是在行動，如果你想嘗試一下。