使用JavaScript和BootstrapDialog的表單驗證

我試圖通過使用javascript來進行表單驗證，但是，我認爲名稱字段存在一些問題。使用JavaScript和BootstrapDialog的表單驗證

每當我爲名稱字段輸入任何值時，它都會自動跳過其他驗證並將我指向index.php。

另一種情況是我填寫除名稱字段之外的所有內容後，它會自動跳過其他驗證並將我引導至index.php。

任何幫助將不勝感激！

<!DOCTYPE html> 
<html> 
<head> 
<!-- https://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal 
http://nakupanda.github.io/bootstrap3-dialog/ 

--> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
<link href- "css/trying.css" > 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 



<script> 

function showError(message) { 

    BootstrapDialog.show({ 
    title: 'Attention', 
    message: message, 
    type: BootstrapDialog.TYPE_DANGER, 
    buttons: [{ 
     label: 'Ok', 
     cssClass: 'btn-default', 
     action: function(dialog) { 
     dialog.close(); 
     } 
    }] 
    }); 

    return false; 
} 



function validationFunction($msg){ 
    var list = document.createElement('ul'); 
    for(var i = 0; i < $msg.length; i++) { 
     var item = document.createElement('li'); 
     item.appendChild(document.createTextNode($msg[i])); 
     list.appendChild(item);  
    } 

    showError($msg); 
    return false; 
} 


function validateForm(form) { 

    var RE_NAME = /^[A-Z a-z]+$/; 
    var RE_EMAIL = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/; 
    var RE_PASSWORD = /^[\S]{6,20}$/ 
    var errors = []; 

    var name = form.reg_full_name.value; 
    var email = form.reg_email.value; 
    var password = form.reg_password.value; 
    var confirmPass = form.reg_confirmpass.value; 
    //Name Validation 
    if (name == "") { 
     errors.push("Please enter your full name"); 
    } 
    else if (!RE_NAME.test(x)){ 
     errors.push("Please enter valid name"); 

    } 

    //Email Validation 
    if (!RE_EMAIL.test(email)){ 
     errors.push("Please enter a valid Email"); 
    } 


    //Password Validation 
    if (password =="" || confirmPass ==""){ 
     errors.push("Password and Comfirmation Password required"); 
    } 

    else if (!RE_PASSWORD.test(password)){ 
     errors.push("Please a enter a password 6 - 20 characters in length"); 
    } 

    else if (password!= confirmPass){ 
     errors.push("Your password and confirmation password do not match"); 
    } 



    //If more than 1 error 
    if (errors.length > 1) { 
     validationFunction(errors); 
     alert(errors); 
     return false; 
    } 



} 
</script> 
</head> 
<body> 

<form name="myForm" action="" 
onsubmit="return validateForm(this)" method="post"> 

Name: <input type="text" name="reg_full_name"><br><br> 
Email: <input type="email" name="reg_email"><br><br> 
Password: <input type="password" name="reg_password"><br><br> 
Confirm Password: <input type="password" name="reg_confirmpass"><br><br> 
<input type="submit" value="Submit"> 
</form> 

</body> 
</html>

來源

2017-07-11 beginnerK

數組「錯誤」未填充正確的值。

做的正確的方式，這將是：

errors.push("Please enter your full name");

然後你的錯誤，數組被一個新的條目「請輸入您的全名」，它具有0的指數陣列現在也有一個長1.所以你需要調整塊，你問，如果有多個錯誤：

if (errors.length > 1)

來源

2017-07-11 17:28:21 makobasuri

感謝您糾正我。 :) 我認爲errors.length是數組大小。如果只有1個錯誤，它會直接跳過if語句？ – beginnerK

你說得對，.length是數組的大小，更準確地說，數組裏面的項數。 .length本身不是數組，所以如果裏面有一個項目，它不會以0開頭。所以，如果你想驗證只顯示錯誤，如果有超過1錯誤，如評論說，那麼你需要說： if（errors.length> 1）{...} 如果有隻有一個錯誤（或者根本沒有錯誤），那麼括號內的代碼將不會執行。 – makobasuri

對不起，大家。我發現了這個問題。是我的無心之失，我不小心輸入了錯誤的變量在此行引起了我的整個驗證

! RE_NAME.test（X）

解決的問題。

來源

2017-07-11 18:13:34 beginnerK

使用JavaScript和BootstrapDialog的表單驗證

回答

相關問題