如何使用Java If语句开发电子邮件列表应用程序
[英]How to Develop Email List Application Using Javascript If-Statements
问题描述
你好
我正在尝试开发Javascript，以使此电子邮件表单正常工作。 基本上，我需要确保在单击“提交”按钮时用户填写两个字段。 如果未填写这些字段，则将显示一条警告消息，并且光标应移回该字段。 这是我的HTML：
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="form.js"></script>
</head>
<body leftmargin=0 rightmargin=0>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post" action="form.html">Name:<br>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<input id = "email" name="textname" size=35><br><br>
<input type=submit name="button1" value="Submit">
</form>
</td>
</tr>
</center>
</body>
</html>
和Javascript：
var $ = function (id) {
return document.getElementById(id);
}
submit = function () {
var name = $("name").value;
var email = $("email").value;
var isValid = true;
}
//validate entry for "Name:"
if (name == "") {
$("name_error").firstChild.nodeValue =
"Name is required.";
isValid = false;
} else {
$("name_error").firstChild.nodeValue = "";
}
//validate entry for "E-Mail:"
if (email == "") {
$("email_error").firstChild.nodeValue =
"E-mail is required.";
isValid = false;
} else {
$("email_error").firstChild.nodeValue = "";
}
if (isValid) {
//use the submit method of the form object to submit the form
$(emailform).submit();
}
现在，什么都没有发生-不管字段是否填写。 我是Java的新手，正在尝试学习，因此请尽可能提供说明。 “ firstChild节点”的概念令我特别困惑。 谢谢！
JSfiddle链接： http : //jsfiddle.net/HappyHands31/kx1q9wo7/
4 个解决方案
解决方案1
2 已采纳 2015-10-15 17:21:58
很明显，你是一个初学者。 因此，请不要采取这种错误的方式。 您所做的事情有很多错误，很难知道从哪里开始。 首先，您没有使用jquery，但看来您一直在寻找方法的代码主要是jQuery代码。 看来您不知道如何声明函数或将函数用作事件处理程序。 您不了解变量范围。 您正在尝试为ID为'name_error'和'email-error'的元素设置值，但这些元素在HTML中不存在。 除了javascript问题外，您还为页面使用表格布局。 帮自己一个忙，学习CSS并使用div代替表。
这是表单的有效验证（非jQuery）。 我还建议您学习jQuery，因为它是javascript的未来（实际上是现在）。
http://jsfiddle.net/3ykvwxu9/1/
HTML：
<div id="content">
<div id="logo-wrapper">
<img src="castaway_logo.jpg"><br />
Vacations, LLC
</div>
<div id="errors"></div>
<form id="emailform" method="post" onsubmit="return validateEmailForm();" action="form.html">Name:<br>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<input id = "email" name="textname" size=35><br><br>
<input type="submit" name="button1" value="Submit">
</form>
</div>
CSS：
#content {
width: 100%;
position: relative;
}
#logo-wrapper {
float: right;
text-align: center;
padding-right: 15px;
}
#errors {
clear:both;
margin: 15px auto;
width: 300px;
height: 40px;
color: red;
}
form#emailform {
margin: 0 auto;
display: block;
width: 300px;
}
Javascript：
function validateEmailForm(){
var name = document.getElementById('name');
var email = document.getElementById('email');
var errDiv = document.getElementById('errors');
var error = '';
var focusElem;
if(name.value.length == 0){
error += "Name is required<br />";
focusElem = name;
}
if(email.value.length == 0){
error += "Email is required<br />";
if(focusElem == undefined){
focusElem = email;
}
}
if(error.length > 0){
errDiv.innerHTML = error;
focusElem.focus();
return false;
}
return true;
}
解决方案2
1 2015-10-15 16:37:46
尝试在submit()函数中删除var word。 var告诉javascript引擎，此变量的作用域在函数内部，因此在另一个函数中不存在。 删除var时，您要将变量附加到全局window对象。 它在严格模式下不起作用，但是您没有定义它，因此它可以为您工作
解决方案3
1 2015-10-15 16:58:34
好吧，让我们来解决一些会阻止您的代码正常工作的问题。
var submit = function () {
var name = $("name").value;
var email = $("email").value;
var isValid = true;
//These are all local variables so they won't be accessible any where else. Nor are you really checking anything. This function just sets isValid = true locally.
}
这实际上不是定义事件侦听器或函数的正确方法。 我不太确定您要在这里做什么。如果应该将其附加到表单的onsubmit事件中，则可能需要查看onsubmit属性
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit
如果只需要全局函数，则应按以下方式进行定义：
function submit() {
//Insert code here
}
//validate entry for "Name:"
if (name == "") {
$("name_error").firstChild.nodeValue = "Name is required.";
isValid = false;
} else {
$("name_error").firstChild.nodeValue = "";
}
它没有附加任何内容，它将在脚本解析后运行一次，然后不再运行。
而且看起来name_error实际上在您的HTML中不存在，因此当然找不到任何东西。
//validate entry for "E-Mail:"
if (email == "") {
$("email_error").firstChild.nodeValue = "E-mail is required.";
isValid = false;
} else {
$("email_error").firstChild.nodeValue = "";
}
同样，在加载脚本时，您只是在随意运行此脚本。 实际上没有检查任何东西。
if (isValid) {
//use the submit method of the form object to submit the form
$(emailform).submit();
}
该代码将与其余代码一样运行一次。 检查isValid是否为true，这不是因为您的isValid变量不可全局访问。 如果可以神奇地使用它，它将自动提交您的表单。
这是一个基本的jsfiddle，向您展示了如何正确附加事件处理程序以及如何定义全局变量而不是闭包中的变量。
http://jsfiddle.net/pbu78npx/1/
这应该是您想要的一个很好的起点。
解决方案4
1 2015-10-15 17:06:10
这是您的清洁方式：
$("#emailform").submit(function(e)
{
var isValid = Validate();
if(!isValid)
{
e.preventDefault();
}
});
function Validate()
{
var isValid = true;
if($.trim($("#name").val()) == "")
{
isValid = false;
$("#name_error").text("Name is required.");
}
else
$("#name_error").text("");
if($.trim($("#email").val()) == "")
{
isValid = false;
$("#email_error").text("Email is required.");
}
else
$("#email_error").text("");
return isValid;
}
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<center>
<table width=85%>
<tr>
<td valign=top>
<form id="emailform" method="post" action="form.html">Name:<br>
<div id="name_error"></div>
<input id="name" name="textname" size=35><br><br>E-mail:<br>
<div id="email_error"></div>
<input id = "email" name="textname" size=35><br><br>
<input type="submit" name="button1" value="Submit">
</form>
</td>
</tr>
</center>
小提琴： http : //jsfiddle.net/gy1oj8dz/2/
在两个if语句中的两个if语句之间声明时，如何在if语句范围之外使用JavaScript变量？
[英]How to use JavaScript variable outside if-statement scope between two if-statements when it is declared in one of them?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.