使用JavaScript驗證HTML表單中的條件
[英]Validate a condition in HTML form using javascript
問題描述
我想創建一個小表單的HTML頁面。
它包含
- 名稱
- 性別
- 出生日期
- 我同意復選框
- 提交按鈕
應該有條件的。 如果年齡在20到25 [基於DOB計算]之間，則應啟用“我同意”復選框，否則應將其禁用。
停用表示我同意該框不接受任何檢查輸入。
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 = /^(\\d{1,2})(\\/|-)(\\d{1,2})\\2(\\d{4})$/; 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 個解決方案
解決方案1
0 2015-04-09 18:08:42
一種解決方案是向myDate輸入元素添加一個“ oninput”事件 ，該事件在每次更改輸入元素的值時執行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解決日期驗證的問題：
如何在JavaScript中使用“ mm / dd / yyyy”格式驗證日期？
還有許多流行的庫，例如angularjs，可以進行日期驗證。
使用JavaScript驗證HTML表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.