使用javascript / html进行表单验证无效

时间：2017-03-15 12:50:22

标签： javascript html html5 forms

我整天都在测试我的代码，但没有任何反应。表单会自动打开success.html，但不会使用该脚本。

	function FormValidation(theForm) {
	    var errors = "";
	    var alph = /^[\w ]+$/;
	    var cardnumb = /^\d{16}$/;
	    var cvvnumb = /^\d{3}$/;
	    var monthnumb = /^\d{1,2}$/;
	    var yearnumb = /^\d{4}$/;

	    if (form.one.value == "") {
	        errors += "Please enter your full name! \n";
		}

	    else if (!alph.test(form.one.value)) {
	        errors += "Full name is wrong or includes invalid characters! \n";
	    }
	    if (form.two.value == "") {
	        errors += "Please enter your 16-digit code! \n";
	    }

	    if (!cardnumb.test(form.two.value)) {
	        errors += "Card number does not consist of 16 digits or includes invalid characters! \n";
	    }

	    if (form.three.value == "") {
	        errors += "Please enter your month of expiration! \n";
	    }

	    if (!monthnumb.test(form.three.value)) {
	        errors += "The month does not consist of 2 digits or includes invalid characters! \n";
	    }
		    
	    if (form.four.value == "") {
	        errors += "Please enter your year of expiration! \n";
	    }

	    if (!yearnumb.test(form.four.value)) {
	        errors += "The year does not consist of 4 digits or includes invalid characters! \n";
	    }

	    if (form.five.value == "") {
	        errors += "Please enter your 3-digit CVV code! \n";
	    }

	    if (!cvvnumb.test(form.five.value)) {
	        errors += "The CVV does not consist of 3 digits or includes invalid characters! \n";
	    }
		    
	    if (!content == "") {
	    	alert(content);
	    	return false;
		}
	}
 <!DOCTYPE html>
    <html lang="en-US" class="Html" id="Main" dir="auto">
    <head class="Head" id="Main">
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta name="description" content="NRN">
	<meta name="author" content="NRN">
	<title class="Title" id="Title">NRN</title>

   
    </head>
    <body class="Body" id="Main">
	<nav>
  		<ul>
    		<li><a href="index.html">Home</a></li>
  		</ul>
	</nav>
	<p class="p1">Payment form validation using JavaScript<p>
	<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)">
	<div class="form-group-name">
        <label for="name">Owner</label><br>
        <input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one">
    </div>
    <div class="form-group-number">
        <label for="number">Card number</label><br>
        <input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two">
    </div>
    <div class="form-group-date">
        <label for="date">Expiration date</label><br>
        <input type="text" placeholder="Month" class="form-control-3" id="three" name="three">
        <input type="text" placeholder="Year" class="form-control-3" id="four" name="four">
    </div>
    <div class="form-group-cvv">
        <label for="cvv">CVV</label><br>
        <input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five">
    </div>
    <div class="form-group-submit">
        <input type="submit" class="submit_form" value="Validate">
    </div>
    </form>
    </body>
    </html>

我已经检查了所有内容，以及许多教程，但它没有帮助。请帮忙！提前致谢！问题可能出在.css文件中吗？

4 个答案:

答案 0 :(得分：1)

您的javascript验证函数永远不会返回false，因为content永远不会等于""，content无法设置，因此它将是未定义的，因此表单即使是发生了错误。

首先你应该改变

if (!content == "") {
    alert(content);
    return false;
}

要

if (!errors == "") {
    alert(errors);
    return false;
} else {
    return true;
}

如果您的javascript函数返回true，表单将继续提交。如果它返回false，如果出现错误，它将停止提交表单。

此外，您可以在onSubmit元素的form属性中设置一个函数，如下所示：

<form onSubmit="return FormValidation(this)""></form>
如Tulio Faria所述

答案 1 :(得分：0)

实际上onSubmit已经期待一个Javascript函数了。所以，你可以这样做（删除javascript：from onSubmit）：

<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this)">

答案 2 :(得分：0)

将'form'替换为函数中的'theFrom'

您可以调试并找到该表单未定义

if (form.one.value == "") {
    errors += "Please enter your full name! \n";
}

在函数FormValidation

中的每个位置用'theForm'替换它 
if (theForm.one.value == "") {
    errors += "Please enter your full name! \n";
}

此处未定义内容

 if (!content == "") {
     alert(content);
     return false;
 }

它应该是错误

if (!errors == "") {
    alert(errors);
    return false;
} else {
    return true;
}

这是您的工作代码

<!DOCTYPE html>
<html lang="en-US" class="Html" id="Main" dir="auto">
<head class="Head" id="Main">
<meta name="description" content="NRN">
<meta name="author" content="NRN">
<title class="Title" id="Title">NRN</title>

<script type="text/javascript">

function FormValidation(theForm) {
    var errors = "";
    var alph = /^[\w ]+$/;
    var cardnumb = /^\d{16}$/;
    var cvvnumb = /^\d{3}$/;
    var monthnumb = /^\d{1,2}$/;
    var yearnumb = /^\d{4}$/;

    if (theForm.one.value == "") {
        errors += "Please enter your full name! \n";
    }

    else if (!alph.test(theForm.one.value)) {
        errors += "Full name is wrong or includes invalid characters! \n";
    }
    if (theForm.two.value == "") {
        errors += "Please enter your 16-digit code! \n";
    }

    if (!cardnumb.test(theForm.two.value)) {
        errors += "Card number does not consist of 16 digits or includes invalid characters! \n";
    }

    if (theForm.three.value == "") {
        errors += "Please enter your month of expiration! \n";
    }

    if (!monthnumb.test(theForm.three.value)) {
        errors += "The month does not consist of 2 digits or includes invalid characters! \n";
    }

    if (theForm.four.value == "") {
        errors += "Please enter your year of expiration! \n";
    }

    if (!yearnumb.test(theForm.four.value)) {
        errors += "The year does not consist of 4 digits or includes invalid characters! \n";
    }

    if (theForm.five.value == "") {
        errors += "Please enter your 3-digit CVV code! \n";
    }

    if (!cvvnumb.test(theForm.five.value)) {
        errors += "The CVV does not consist of 3 digits or includes invalid characters! \n";
    }

    if (!errors == "") {
        alert(errors);
        return false;
    } else {
        return true;
    }
}

</script>
</head>
<body class="Body" id="Main">
<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
    </ul>
</nav>
<p class="p1">Payment form validation using JavaScript<p>
<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)">
<div class="form-group-name">
    <label for="name">Owner</label><br>
    <input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one">
</div>
<div class="form-group-number">
    <label for="number">Card number</label><br>
    <input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two">
</div>
<div class="form-group-date">
    <label for="date">Expiration date</label><br>
    <input type="text" placeholder="Month" class="form-control-3" id="three" name="three">
    <input type="text" placeholder="Year" class="form-control-3" id="four" name="four">
</div>
<div class="form-group-cvv">
    <label for="cvv">CVV</label><br>
    <input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five">
</div>
<div class="form-group-submit">
    <input type="submit" class="submit_form" value="Validate">
</div>
</form>
</body>
</html>

答案 3 :(得分：0)

你的问题是你需要处理提交事件，所以你的函数需要一个额外的参数（事件），其中的第一个代码行（函数）必须是event.preventDefault（）所以当你提交表单时在提交之前，您的函数将被执行，然后在代码结束时如果验证正常，请使用js按照here的说明提交表单。你会有像

这样的东西 
function formValidation(theForm, event)
{
    event.preventDefault()
    //your code

    if(allOk)
   {           theForm.submit()
}
    else
{
   //do something
}


}

在HTML方面，您将拥有

<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this, event)">
相关问题
最新问题