JavaScript 只验证第一个字段
JavaScript only validating the first field
所以基本上我正在尝试创建一个输入框列表,每个输入框都需要在提交之前进行验证。我是JavaScript和HTML的一个非常基本的初学者,并且希望任何输入,因为只有第一个表单正在验证。只要名字中有字母字符,它就会提交。
<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>
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>
这一行:
onclick=" return checkForm(); checkForm2();
意味着如果 checkForm 返回 false(当 form.frmForename.value == " 时会这样做),则 false 与返回 checkForm() 中的返回一起使用,并且 click 事件被取消,因此表单不会提交。然后调用 checkForm2(),但此时按钮单击已被取消。
此外,无需将每个函数分离到其自己的<脚本>元素中。您还应该使用 form.submit 事件,而不是 button.click 事件,并且您不应该使用内联事件处理程序 (on...),而应该使用标准 element.addEventListener()。脚本>
相关文章:
- 而循环只设置php中输入字段中的第一个值
- Angular ng repeat order将多个字段作为一个字段
- 我怎么能让流星简单模式中的一个字段等于一个js变量,并且仍然让用户填写简单模式的其余部分
- 检查 2 个输入字段和一个选择字段,以便在它们全部填写后进行更改
- 将输入字段从一个复制到另一个
- 若在第一个字段中选择了日期,则第二个字段的日期应大于第一个
- 使用javascript从php向文本输入字段返回一个值
- 仅使JSP页面中出现的同一字段的一个实例可编辑
- 如何使keyup()函数只在字段中的第一个keyup上
- 可以为邮件添加刚刚克隆的输入字段(最后一个)
- 使用Jquery为字段添加一个复选框值
- 对不同文件中同一个类的所有字段应用一个函数一次
- 通过隐藏字段获得一个框架来处理knockout.js不持久化的问题
- 动态输入字段和一个javascript
- 表单与复选框输入字段,反之亦然-缺少第一个值
- 我如何清除所有字段在一个可变的html内容?(最好使用jQuery)
- PHP Javascript AJAX填充和计算几个输入字段-只有一个函数填充
- Mongodb /meteor收集检查子文档字段是否存在,当字段是一个变量
- 为要添加到ng-repeat中的自定义类型的输入字段创建一个自定义指令
- 如何存储标记值(如gmail字段)作为一个字符串在一个变量使用html和javascript