Question

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

每当我输入name字段的任何值时，它都会自动跳过其他验证并将我引导至index.php。

另一种情况是在我填写了除name域之外的所有内容之后，它会自动跳过其他验证并将我引导至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>

Answer 1

阵列＆＃34;错误＆＃34;没有填充正确的值。

执行此操作的正确方法是：

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

然后你的错误数组获得一个新条目＆＃34;请输入你的全名＆＃34;，其索引为0.数组现在的长度也是1.所以你需要调整块的位置你问是否有多个错误：

if (errors.length > 1)

Answer 2

对不起，大家。我发现了这个问题。是我粗心的错误，我在这一行意外地输入了错误的变量，导致我的整个验证

！RE_NAME.test（x）的

问题解决了。

使用javascript和BootstrapDialog进行表单验证

2 个答案: