使用 javascript 和 BootstrapDialog 进行表单验证答案

【问题标题】：Form validation using javascript and BootstrapDialog使用 javascript 和 BootstrapDialog 进行表单验证
【发布时间】：2017-07-11 16:57:13
【问题描述】：

我正在尝试使用 javascript 进行表单验证，但是，我认为 name 字段存在一些问题。

每当我为名称字段输入任何值时，它都会自动跳过其他验证并引导我到 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>

【问题讨论】：

标签： javascript validation bootstrap-modal bootstrap-dialog

【解决方案1】：

数组“errors”没有填充正确的值。

正确的做法是：

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

然后你的错误数组得到一个新条目“请输入你的全名”，它的索引为 0。数组现在的长度也为 1。所以你需要调整你询问是否有的块不止一个错误：

if (errors.length > 1)

【讨论】：

感谢您的纠正。 :) 我认为errors.length 是数组大小。如果只有1个错误，会直接跳过if语句？
你是对的，.length 是数组的大小，更准确地说，是数组内部的项目数。 .length 本身不是一个数组，所以如果里面有一个项目，它就不会以 0 开头。因此，如果您希望验证仅在有超过 1 个错误时才显示错误，如评论所述，那么您需要说： if(errors.length>1){...} 如果只有一个错误（或完全没有错误），那么括号内的代码将不会执行。

【解决方案2】：

对不起，各位。我发现了问题。是我粗心的错误，我不小心在这一行输入了错误的变量，这导致了我的整个验证

!RE_NAME.test(x)

问题解决了。

【讨论】：