使用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的表单验证

回答

相关问题