我的表单验证功能有什么问题
What is wrong with my form validation function?
我有一个简单的表单,要求输入姓名,电子邮件,电话号码,年龄和收入。当我点击提交时,validateForm函数应该检查错误,如果有任何错误,文本框将是红色的,并且表单下将显示红色的错误消息。这个功能似乎不工作,我不知道为什么。这是我的表格和脚本。我尝试将提交按钮设置为有一个onclick事件来调用该函数,但这也不起作用。
<script>
function validateForm() {
if (document.forms.formValidation.Name.value == "") {
document.getElementById("error").style.display = "inline";
document.forms.formValidation.getElementById("name").style.backgroundColor = "red";
return false;
}
if (document.forms.formValidation.email.value == "") {
document.getElementById("error").style.display = "inline";
document.forms.formValidation.email.style.backgroundColor = "red";
}
var phoneNo = /^'d{10}$/;
if (document.forms.formValidation.number.value.match(phoneNo)) {
return true;
}
else {
document.getElementById("error").style.display = "inline";
document.forms.formValidation.number.style.backgroundColor = "red";
return false;
}
var emailVal = document.formValidation.email.value;
ampersandPos = emailVal.indexOf("@");
dotPos = emailVal.lastIndexOf(".");
if (amersandPos < 1 || (dotPos - amersandPos < 2)) {
alert("Please enter a valid email address.");
document.getElementById("error").style.display = "inline";
return false;
}
return true;
var len = age.length;
for (var i = 0; i < len; i++) {
if (document.forms.formValidation.age[i].checked)
{
return true;
}
else {
document.getElementById("error").style.display = "inline";
return false;
}
}
}
</script>
<form name="formValidation" onsubmit="return validateForm()">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">First and Last Name: </td>
<td align="left"><input type="text" id="name" name="Name" ></td>
</tr>
<tr>
<td align="right">Email: </td>
<td align="left"><input type="text" id="email" name="email" ></td>
</tr>
<tr>
<td align="right">Phone Number: </td>
<td align="left"><input type="text" name="number" /></td>
</tr>
<tr>
<td align="right">Age:</td>
<td class="rad"><input type="radio" name="age" value="minor">Under 18</td>
<td class="rad"><input type="radio" name="age" value="adult">18-64</td>
<td class="rad"><input type="radio" name="age" value="senior">65+</td>
</tr>
<tr>
<td align="right">Income:</td>
<td>
<select>
<option value="underFifty">Under $50,000</option>
<option value="fiftyToHundred">$50,000 - $100,000</option>
<option value="overHundred">Over $100,000</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<div id="error">
<p>Required fields are missing!</p>
</div>
这行少了一个右括号:
if (amersandPos < 1 || (dotPos - amersandPos < 2)
同样,这一行也是无效的:
document.formValidation.email.style.background-color = "red";
因为background-color
不是一个有效的标识符名称。
这里有一个摆弄这些和一个问题在评论修复:https://jsfiddle.net/0zyv3g98/
你的js有错误。你不能使用document。formvalidation。name之类的。正确的语法是' document.forms.formValidation '。改正你所有的代码,它会工作的。
if (document.forms.formValidation.Name.value == "") {
document.forms.formValidation.getElementById("error").style.display = "inline";
document.forms.formValidation.getElementById("name").style.backgroundColor = "red";
//return false;
}
if (document.forms.formValidation.email.value == "") {
document.forms.formValidation.getElementById("error").style.display = "inline";
document.forms.formValidation.email.style.backgroundColor = "red";
}
var emailVal = document.forms.formValidation.email.value;
ampersandPos = emailVal.indexOf("@");
dotPos = emailVal.lastIndexOf(".");
if (amersandPos < 1 || (dotPos - amersandPos < 2)
{
alert("Please enter a valid email address.");
document.forms.formValidation.getElementById("error").style.display = "inline";
return false;
}
return true;
相关文章:
- 我不知道我的编码有什么问题.(JavaScript)
- 我的流星路线出了什么问题
- 此nodeValue替换代码有什么问题
- 这个正则表达式的日期/时间有什么问题
- 我的CSS/Javascript下拉菜单测试代码出了什么问题
- 这个代码出了什么问题?(Jquery)
- 下面的Reg表达式出了什么问题
- 鼠标事件,我的代码出了什么问题
- 这个javascript语法有什么问题
- 动态创建foreignGroup并将其添加到svg中有什么问题
- 此代码中动态生成选择框有什么问题
- 我的javascript有什么问题?.className
- 这个 ajax.js 代码有什么问题
- JS代码有什么问题,让我知道代码是否可以改进
- 我的 Browserify JavaScript 代码有什么问题
- 图像上传功能将++(+1)副本添加到下一次上传.出了什么问题或如何重置“选定图像”
- 使用 Javascript 动态删除行.我的代码有什么问题
- AngularJS:这个注入我的控制器有什么问题
- 这个jQuery if语句有什么问题
- JavaScript:有人能告诉我我的代码出了什么问题吗?