使用javascript和BootstrapDialog进行表单验证_Javascript_Validation_Bootstrap Modal_Bootstrap Dialog

使用javascript和BootstrapDialog进行表单验证

javascript validation

使用javascript和BootstrapDialog进行表单验证,javascript,validation,bootstrap-modal,bootstrap-dialog,Javascript,Validation,Bootstrap Modal,Bootstrap Dialog,我正在尝试使用javascript进行表单验证，但是，我认为name字段存在一些问题每当我为name字段输入任何值时，它都会自动跳过其他验证并将我指向index.php 另一种情况是，在我填写了除name字段以外的所有字段后，它会自动跳过其他验证并将我指向index.php 任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <!-- https://stackoverflow.com/questions/10585689

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

每当我为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>


功能错误（消息）{
BootstrapDialog.show({
标题:"注意",，
讯息:讯息,，
类型：BootstrapDialog.type\u危险，
按钮：[{
标签：“Ok”，
cssClass:“btn默认值”，
操作：函数（对话框）{
dialog.close（）；
}
}]
});
返回false；
}
函数验证函数（$msg）{
var list=document.createElement（'ul'）；
对于（变量i=0；i<$msg.length；i++）{
var item=document.createElement（'li'）；
item.appendChild（document.createTextNode（$msg[i]）；
列表。追加子项（项目）；
}
淋浴器（味精）；
返回false；
}
函数validateForm（表单）{
变量RE_NAME=/^[A-Z A-Z]+$/；
var RE\ U电子邮件=/^（[a-zA-Z0-9\-\.]+）@（[a-zA-Z0-9\-\.]+）\（[a-zA-Z]{2,5}）$/；
var RE_PASSWORD=/^[\S]{6,20}$/
var错误=[]；
var name=form.reg\u full\u name.value；
var email=form.reg_email.value；
var password=form.reg\u password.value；
var confirmPass=form.reg_confirmPass.value；
//名称验证
如果（名称==“”）{
错误。推送（“请输入您的全名”）；
}
否则如果（！RE_NAME.test（x））{
错误。推送（“请输入有效名称”）；
}
//电子邮件验证
如果（！RE_EMAIL.test（EMAIL））{
错误。推送（“请输入有效电子邮件”）；
}
//密码验证
如果（密码=“”| | confirmPass=“”）{
错误。推送（“需要密码和确认密码”）；
}
如果（！RE_PASSWORD.test（PASSWORD））{
错误。推送（“请输入长度为6-20个字符的密码”）；
}
else if（密码！=confirmPass）{
错误。推送（“您的密码和确认密码不匹配”）；
}
//如果超过1个错误
如果（errors.length>1）{
验证功能（错误）；
警报（错误）；
返回false；
}
}
名称：


电子邮件：


密码：


确认密码：

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

正确的方法是：

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

然后，错误数组将获得一个新条目“请输入您的全名”，该条目的索引为0。该数组现在的长度也为1。因此，您需要调整询问是否存在多个错误的块，以：

if (errors.length > 1)

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

!！重新命名测试（x）

问题解决了。

谢谢你纠正我。：）我认为是错误。长度是数组大小。如果只得到1个错误，它将直接跳过If语句？没错，.length是数组的大小，更确切地说是数组中的项数。长度本身不是数组，因此如果其中有一项，则长度不会以0开头。因此，如果您希望验证仅在有1个以上错误时显示错误，如注释所示，那么您需要说：if（errors.length>1）{…}如果只有一个错误（或者根本没有错误），那么括号内的代码将不会执行。