提问人:Dylan Owen 提问时间:2/9/2016 最后编辑:Dylan Owen 更新时间:2/9/2016 访问量:54
JavaScript 仅验证第一个字段
JavaScript only validating the first field
问:
所以基本上,我正在尝试创建一个输入框列表,每个输入框都需要经过验证才能提交。我是 JavaScript 和 HTML 的非常基础的初学者,如果只验证了第一个表单,我将不胜感激任何输入。只要 Forename 中有字母字符,它就会提交。
<p><b> Forename: </b></p>
<input type="text" size="32" name="frmForename" placeholder="Dylan">
<p><b> Surname: </b></p>
<input type="text" size="32" name="frmSurname" placeholder="Owen">
<p><b> Gender: </b></p>
<input type="radio" name="frmGender" value="male"> Male
<input type="radio" name="frmGender" value="female"> Female
<p><b> Date of Birth:</b><p>
<input type ="text" size="32" name="frmDateOfBirth" placeholder="DD/MM/YYYY">
<p><b> Age: </b></p>
<input type ="text" size="32" name="frmAge" min="12" max="150" placeholder="Enter Your Age">
<p><b> Course: </b></p> <select name="frmCourse" id="frmCourse">
<option value="select">Select Your Course</option>
<option value="databases">Databases</option>
<option value="websites">Websites</option>
<option value="networks">Networks</option>
</select>
<p><input type="submit" value="Enter Details" onclick=" return checkForm(); checkForm2();">
<input type="reset" value="Clear Form" onclick="return confirm_reset();">
<button onclick="goBack()">Back</button> </p>
<font size="3" color="red">All forms <u>must</u> be complete.</font>
<p><b> Date Registered: </b></p>
<input type="text" size="55" id="dateReg" readonly/>
</form>
</body>
The JavaScript
<script language="javascript" type="text/javascript">
document.bgColor="LightSteelBlue";
</script>
<script type="text/javascript">
function checkForm(form)
{
//****FORENAME****
// VALIDATE: No Characters
if(form.frmForename.value == "") {
alert("Error: Enter your forename.");
form.frmForename.focus();
return false;
}
// regular expression to match only alphanumeric characters and spaces
var re = /^[A-Za-z]+$/;
// VALIDATE: Does the entered text match the expression above?
if(!re.test(form.frmForename.value)) {
alert("Error: Cannot use numerical characters.");
form.frmForename.focus();
return false;
}
// validation was successful
return true;
}
</script>
<script>
function checkForm2(form)
//****SURNAME****
if(form.frmSurname.value == "") {
alert("Error: Enter your surname.");
form.frmSurname.focus();
return false;
}
// regular expression to match only alphanumeric characters and spaces
var re = /^[A-Za-z]+$/;
// VALIDATE: Does the entered text match the expression above?
if(!re.test(form.frmSurname.value)) {
alert("Error: Cannot use numerical characters.");
form.frmSurname.focus();
return false;
}
// validation was successful
return true;
}
</script>
<script>
function getDate() {
document.getElementById('dateReg').value= Date();
}
</script>
<script>
function confirm_reset() {
return confirm("Are you sure?");
}
</script>
<script>
function goBack() {
return confirm("Are you sure?");
window.history.back();
}
</script>
<script>
if(form.frmDateOfBirth.value == "") {
alert("Error: Date Of Birth is empty!");
form.frmDateOfBirth.focus();
return false;
}
re = /^(\d{1,2})/(\d{1,2})/(\d{4})$/;
if(form.frmDateOfBirth.value != '') {
if(regs = form.frmDateOfBirth.value.match(re)) {
if(regs[1] < 1 || regs[1] > 31) {
alert("Invalid value for day: " + regs[1]);
form.frmDateOfBirth.focus();
return false;
}
if(regs[2] < 1 || regs[2] > 12) {
alert("Invalid value for month: " + regs[2]);
form.frmDateOfBirth.focus();
return false;
}
if(regs[3] < 1913 || regs[3] > (new Date()).getFullYear()) {
alert("Invalid value for Date Of Birth: " + regs[3] + " - must be between 1913 and " + (new Date()).getFullYear());
form.frmDateOfBirth.focus();
return false;
}
} else {
alert("Invalid date format: " + form.frmDateOfBirth.value);
form.frmDateOfBirth.focus();
return false;
}
}
</script>
<script>
function validateCourse() {
var x = document.forms["frmCourse"]["frmCourse"].value;
if (x == "select") {
alert("Please select a course.");
return false;
}
}
</script>
答:
0赞
Scott Marcus
2/9/2016
#1
这一行:
onclick=" return checkForm(); checkForm2();
意味着如果 checkForm 返回 false(当 form.frmForename.value == “” 时会这样做),则 false 与 return checkForm() 中的返回一起使用,并且 click 事件被取消,因此表单不会提交。然后调用 checkForm2(),但此时按钮单击已被取消。
此外,无需将每个函数分成自己的 <script> 元素。您还应该使用 form.submit 事件,而不是 button.click 事件,并且不应使用内联事件处理程序 (on...),而应使用标准 element.addEventListener()。
评论
0赞
Dylan Owen
2/9/2016
是的,我看到了,但是我该如何解决这个问题?我尝试将所有 JavaScript 放入一个函数中,但它不起作用。
0赞
Scott Marcus
2/9/2016
首先,(如前所述)不要使用内联事件处理程序 (onclick=...)。使用正确的机制 element.addEventListener() 并以正确的方式取消事件 (element.preventDefault())。这样,您就无需担心返回任何值以及这些值会阻止其他代码(要运行的代码)运行。
0赞
Mr Lister
2/10/2016
@ScottMarcus 你说“然后调用 checkForm2()”,但实际上它从来没有调用过。什么也没发生之后。return checkForm();
0赞
Scott Marcus
2/10/2016
实际上,是的,这是有道理的,因为返回 false 正在取消 onclick 事件。不会再发生任何事情了。
评论
onclick=" return checkForm(); checkForm2();
您返回第一个函数,第二个函数永远不会触发,请尝试删除 return 语句。