Question

我有这个脚本功能，但出于某种原因，当我在按钮上的onclick事件上调用该函数时，它不会激活。

如果第一个名称文本框或姓氏文本框除了字母之外还有其他内容，我想点击提交按钮时会弹出一个javscript警报。

function CheckName(){

var NAME1 = getElementByID('FirstName').value;

var NAME2 = getElementByID('LastName').value;
var letters = /^[A-Za-z]+$/;

if (NAME1.match(letters) && NAME2.match(letters)) 
{
alert('Your Details have been accepted.')
return true;
}
else
{
alert('Please input alphanumeric characters only'); 
return false; 
}
}

下面是html：

<body>

<h1>WELCOME TO PATRICK'S INPUT TEST WEBSITE</h1>
<p>Please Insert your details here.</p>
<form name = "myForm" action="#">

First Name: <br/ >
<input type="text" id="FirstName">
</br/ >
Last Name: <br />
<input type="text" id="LastName"> <br />
<button type = "submit"  onclick= "CheckName()"">Submit </button>
</form>

Answer 1

将此html用于表单

<form name = "myForm" action="#">
   First Name: <br/ >
   <input type="text" id="FirstName">
   <br/ >
   Last Name: <br />
   <input type="text" id="LastName"> <br />
   <button type = "submit" onclick="CheckName()">Submit </button>
</form>

修改

这可行，试试吧

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Styles.css"> <title>Patrick's Downtime Website</title> </head> <body> <h1>WELCOME TO PATRICK'S INPUT TEST WEBSITE</h1> <p>Please Insert your details here.</p> <form name = "myForm" action="#"> First Name: <br/ > <input type="text" id="FirstName"> <br/ > <br /> Last Name: <br /> <input type="text" id="LastName"> <br /> <br /> <button type = "submit" onclick="CheckName()">Submit </button> </form> <script type = "text/javascript"> function CheckName(){ console.log(document); var NAME1 = document.getElementById("FirstName").value; var NAME2 = document.getElementById("LastName").value; var letters = /^[A-Za-z]+$/; if (NAME1.match(letters) && NAME2.match(letters)) { alert('Your Details have been accepted.') } else { alert('Please input alphanumeric characters only'); } } </script> </body> </html>

Answer 2

首先，var NAME1 = getElementByID('FirstName').value;这是不正确的。函数GetElementByID是document的一部分，应使用document.进行访问。此外，函数的实际名称为getElementById。所以你的行应该是

var NAME1 = document.getElementById('FirstName').value;

Sample Fiddle

其次，如果您希望使用正则表达式进行验证，则应使用.test函数。

Sample fiddle

指点很少，

带全部大写字母的变量名称是全局变量的约定。你应该使用小写。或驼峰式变量名称。
您可以将验证逻辑分离到另一个函数。这将允许您在Submit函数中仅放置与提交相关的逻辑。

Sample Fiddle

参考

getElementById

功能未在onclick事件上激活

2 个答案:

参考