使用 javascript 验证 HTML 表单中的条件
Posted
技术标签:
【中文标题】使用 javascript 验证 HTML 表单中的条件【英文标题】：Validate a condition in HTML form using javascript 【发布时间】：2015-06-15 04:30:12 【问题描述】：我想创建一个小表单的 html 页面。
它包含
-
姓名
性别
出生日期
我同意复选框
提交按钮
应该有一个条件。 如果年龄在 20 到 25 岁之间[根据出生日期计算]，则应激活“我同意”复选框，否则应停用。
停用意味着，我同意框不应该接受任何检查输入。
function myAgeValidation()
var lre = /^\s*/;
var datemsg = "";
var inputDate = document.as400samplecode.myDate.value;
inputDate = inputDate.replace(lre, "");
document.as400samplecode.myDate.value = inputDate;
datemsg = isValidDate(inputDate);
if (datemsg != "")
alert(datemsg);
return;
else
//Now find the Age based on the Birth Date
getAge(new Date(inputDate));
function getAge(birth)
var today = new Date();
var nowyear = today.getFullYear();
var nowmonth = today.getMonth();
var nowday = today.getDate();
var birthyear = birth.getFullYear();
var birthmonth = birth.getMonth();
var birthday = birth.getDate();
var age = nowyear - birthyear;
var age_month = nowmonth - birthmonth;
var age_day = nowday - birthday;
if(age_month < 0 || (age_month == 0 && age_day <0))
age = parseInt(age) -1;
//alert(age);
if ((age <= 25 ) && ( age >= 20))
document.as400samplecode.agree.disabled=false;
else
alert("age limit is 20 - 25");
function isValidDate(dateStr)
var msg = "";
var datePat = /^(\d1,2)(\/|-)(\d1,2)\2(\d4)$/;
var matchArray = dateStr.match(datePat); // is the format ok?
if (matchArray == null)
msg = "Date is not in a valid format.";
return msg;
month = matchArray[1]; // parse date into variables
day = matchArray[3];
year = matchArray[4];
if (month < 1 || month > 12) // check month range
msg = "Month must be between 1 and 12.";
return msg;
if (day < 1 || day > 31)
msg = "Day must be between 1 and 31.";
return msg;
if ((month==4 || month==6 || month==9 || month==11) && day==31)
msg = "Month "+month+" doesn't have 31 days!";
return msg;
if (month == 2) // check for february 29th
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day>29 || (day==29 && !isleap))
msg = "February " + year + " doesn't have " + day + " days!";
return msg;
if (day.charAt(0) == '0') day= day.charAt(1);
//Incase you need the value in CCYYMMDD format in your server program
//msg = (parseInt(year,10) * 10000) + (parseInt(month,10) * 100) + parseInt(day,10);
return msg; // date is valid
<html>
<head>
</head>
<body>
<form name="as400samplecode">
Name: <input type="text" name="namee" required><br>
<br>
gender: <input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<br>
<input type="text" name="myDate" size=10 maxlength=10> (in MM/DD/YYYY format)<br>
<br>
<br>
<br>
<input type = "checkbox" name="agree" disabled >I, Agree<br>
<br>
<br>
<input type="button" value="Submit" onclick="javascript:myAgeValidation()" >
</form>
</body>
</html>【问题讨论】：
那么究竟是什么问题？ 【参考方案1】：一种解决方案是向 myDate 输入元素添加一个"oninput" event，每次更改输入元素的值时执行 myAgeValidation 函数。
<input type="text" name="myDate" size=10 maxlength=10 oninput="myAgeValidation()">(in MM/DD/YYYY format)
如果元素的值是有效日期，下一步是检查年龄范围。如果该值在 20 - 25 范围内，您可以启用该复选框。只需确保将复选框设置回禁用状态，以防有人输入可接受的 20-25 岁，然后将其更改回其他值。
在此处查看示例解决方案： https://jsfiddle.net/z6hnu7qn/
可选：我根据日期可接受性向输入字段添加了绿色、粉色和红色 css 边框。
我还建议寻找其他方法来验证您的日期字符串。仅返回一个有效的空字符串并检查 datemsg 是否为空字符串以继续可能会导致问题。
这是一个在 javascript 中解决日期验证的问题：
How to validate date with format "mm/dd/yyyy" in JavaScript?
还有一些流行的库，比如 angularjs，可以进行日期验证。
【讨论】：
以上是关于使用 javascript 验证 HTML 表单中的条件的主要内容，如果未能解决你的问题，请参考以下文章
html 使用JavaScript进行即时HTML5表单验证
如何在仍然运行 HTML 验证（最小长度、最大长度、模式...）的同时使用 JavaScript 提交表单
HTML + CSS + JavaScript 实现注册页面信息验证（表单验证）