文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >表单验证不能使用javascript/html

问表单验证不能使用javascript/html
EN

Stack Overflow用户
提问于 2017-03-15 12:50:21
回答 3查看 1.1K关注 0票数 0

我一整天都在测试我的代码，但什么也没发生。表单自动打开success.html，不使用脚本。

​

代码语言：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 (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;
		}
	}
代码语言：javascript
复制
 <!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文件中吗？

javascript
html
forms
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-03-15 12:58:09

您的javascript验证函数永远不会返回false，因为content永远不等于""，content在任何地方都没有设置，因此它将是未定义的，因此即使发生错误，表单也会继续提交。

首先，你应该改变一下

代码语言：javascript
复制
if (!content == "") {
    alert(content);
    return false;
}

至

代码语言：javascript
复制
if (!errors == "") {
    alert(errors);
    return false;
} else {
    return true;
}

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

此外，还可以在onSubmit元素的form属性中设置如下函数：

代码语言：javascript
复制
<form onSubmit="return FormValidation(this)""></form>

如Tulio Faria所述

票数 1
EN

Stack Overflow用户

发布于 2017-03-15 13:11:56

函数中的“表单”改为“theFrom”

您可以在这里调试并发现该表单未定义。

代码语言：javascript
复制
if (form.one.value == "") {
    errors += "Please enter your full name! \n";
}

将其替换为“theForm”函数FormValidation中的每个位置

代码语言：javascript
复制
if (theForm.one.value == "") {
    errors += "Please enter your full name! \n";
}

同样，这里没有定义内容。

代码语言：javascript
复制
 if (!content == "") {
     alert(content);
     return false;
 }

它应该是错误的

代码语言：javascript
复制
if (!errors == "") {
    alert(errors);
    return false;
} else {
    return true;
}

这是你的工作代码

代码语言：javascript
复制
<!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>
票数 0
EN

Stack Overflow用户

发布于 2017-03-15 13:12:52

您的问题是您需要处理submit事件，所以您的函数需要一个额外的参数(事件)，其中的第一个代码行(函数)必须是event.preventDefault()，所以在提交表单之前，您的函数将被执行，然后在代码的末尾，如果验证进行了，可以使用js提交表单，如解释的here。你会有这样的东西

代码语言：javascript
复制
function formValidation(theForm, event)
{
    event.preventDefault()
    //your code

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


}

在HTML端，您将拥有

代码语言：javascript
复制
<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this, event)">
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42810307

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档