[Source Code] WebTech Traing Exam App
head.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<p class="title"> XXX Tour Corperation. </p>
</body>
</html>
common.css
p.title{
text-align: center;
font-size: 30px;
font-weight: bold;
color: red;
}
a:link{color: blue}
a:visited{color: purple}
a:hover{color: red}
a:active{color: red}
register.html
<script language="javascript" src="js/common.js" ></script>
<table width="100%">
<tr align="left"><td>Please input your info: </td></tr>
<tr align="left"><td> </td></tr>
<tr align="center">
<td>
<form name="theform" onsubmit="return checkData();">
<table width="75%" border="1" align="left">
<tr><td>Name</td><td><input type="text" name="name"></td></tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male" checked><img src="images/boy.gif">male</img></input>
<input type="radio" name="gender" value="female"><img src="images/girl.gif">female</img></input>
</td>
</tr>
<tr><td>Birthdate:</td><td><input type="text" name="birth"></td></tr>
<tr><td>Address:</td><td><input type="text" name="address"></td></tr>
<tr><td rowspan="2">Contact Info:</td><td><input type="checkbox" name="chkphone" >Phone : <input type="text" name="phone" ></td></tr>
<tr><td><input type="checkbox" name="chkmail">Mail: <input type="text" name="mail"></td></tr>
<tr><td>Apply Date: </td><td><input type="text" name="appdate"></td></tr>
<tr><td>Destination: </td>
<td>
<select name="dest" style="width:150">
<option value="Peking">Peking</option>
<option value="ShangHai">ShangHai</option>
<option value="Tibet">Tibet</option>
</select>
</td></tr>
<tr><td>Duration: </td><td><input type="text" name="duration">days</td></tr>
<tr><td>Remark: </td><td><textarea name="note" col="20" rows="5"></textarea></td></tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="reg" value="submit" >
<input type="reset" name="reset" value="reset">
</td></tr>
</table>
</form>
</td>
</tr>
</table>
common.js:
//where is the mistake??
function checkData(){
var out;
if(theform.name.value==null || theform.name.value==""){
alert("name is null!");
return false;
}
out = "Name :" + theform.name.value + "<br>" + "Gender :"
if(theform.gender[0].checked){
out = out + theform.gender[0].value;
}else{
out = out + theform.gender[1].value;
}
if(!isValidDate(theform.birth.value)){
return false;
}
out = out + "<br>"
+ "Birthdate :" + theform.birth.value + "<br>";
if(theform.address.value==null || theform.address.value==""){
alert("Address is null!");
return false;
}
out = out + "Address :" + theform.address.value + "<br>" + "Contact :" + "<br>";
if(!theform.chkphone.checked && !theform.chkmail.checked){
alert("Must choose one contact way at least!");
return false;
}
if(theform.chkphone.checked){
if(theform.phone.value==null || theform.phone.value==""){
alert("Phone Number is null!");
return false;
}
if(isNaN(theform.phone.value)){
alert("Phone number must be numbers!");
return false;
}
out = out + " Phone: " + theform.phone.value;
}
if(theform.chkmail.checked){
if(theform.mail.value==null || theform.mail.value==""){
alert("Mail is null !");
return false;
}
//theform.mail.value.search(".")==-1 what's the problem? >_<
if(theform.mail.value.search("@") == -1 ){
alert("Invalid mail");
return false;
}
if(theform.chkphone.checked){
out = out + "<br>" ;
}
out = out + " Mail :" + theform.mail.value;
}
if(!isValidDate(theform.appdate.value)){
return false;
}
out = out + "<br>"
+ "Apply date :" + theform.appdate.value + "<br>"
+ "Destination :" + theform.dest.value + "<br>";
if(theform.duration.value==null || theform.duration.value==""){
alert("Duration is null!");
return false;
}
if(isNaN(theform.duration.value)){
alert("Duration must be numbers !");
return false;
}
out = out + "Duration :" + theform.duration.value + " days<br>"
if(theform.note.value==null || theform.note.value==""){
out = out + "Remark: No remark. ";
}else{
out = out + "Remark :" + theform.note.value ;
}
document.write(out );
}
function isValidDate(str){
if(theform.birth.value==null || theform.birth.value==""){
alert("Birthdate is null !");
return false;
}
var reg = /^(/d{4})-(/d{1,2})-/d{1,2}$/;
if(!str.match(reg)){
alert("Invalid date. Date example: '1977-09-17'.");
return false;
}
return true;
}
//difficult to read if lack of knowledge of Regex
function checkEmail(emailStr) {
if (emailStr.length == 0) {
alert('email is null');
return true;
}
var emailPat=/^(.+)@(.+)$/;
var specialChars="//(//)<>@,;:///////"//.//[//]";
var validChars="/[^//s" + specialChars + "/]";
var quotedUser="(/"[^/"]*/")";
var ipDomainPat=/^(/d{1,3})[.](/d{1,3})[.](/d{1,3})[.](/d{1,3})$/;
var atom=validChars + '+';
var word="(" + atom + "|" + quotedUser + ")";
var userPat=new RegExp("^" + word + "(//." + word + ")*$");
var domainPat=new RegExp("^" + atom + "(//." + atom + ")*$");
var matchArray=emailStr.match(emailPat);
if (matchArray == null) {
alert('matchArray == null');
return false;
}
var user=matchArray[1];
var domain=matchArray[2];
if (user.match(userPat) == null) {
alert("130");
return false;
}
var IPArray = domain.match(ipDomainPat);
if (IPArray != null) {
for (var i = 1; i <= 4; i++) {
if (IPArray[i] > 255) {
alert("137");
return false;
}
}
return true;
}
var domainArray=domain.match(domainPat);
if (domainArray == null) {
allert("145");
return false;
}
var atomPat=new RegExp(atom,"g");
var domArr=domain.match(atomPat);
var len=domArr.length;
if ((domArr[domArr.length-1].length < 2) ||
(domArr[domArr.length-1].length > 3)) {
alert("153");
return false;
}
if (len < 2) {
alert("157");
return false;
}
return true;
}
function isAllDigits(argvalue) {
argvalue = argvalue.toString();
var validChars = "0123456789";
var startFrom = 0;
if (argvalue.substring(0, 2) == "0x") {
validChars = "0123456789abcdefABCDEF";
startFrom = 2;
} else if (argvalue.charAt(0) == "0") {
validChars = "01234567";
startFrom = 1;
} else if (argvalue.charAt(0) == "-") {
startFrom = 1;
}
for (var n = startFrom; n < argvalue.length; n++) {
if (validChars.indexOf(argvalue.substring(n, n+1)) == -1) return false;
}
return true;
}
function validateDate(form) {
var bValid = true;
var focusField = null;
var i = 0;
var fields = new Array();
oDate = new DateValidations();
for (x in oDate) {
var value = form[oDate[x][0]].value;
var datePattern = oDate[x][2]("datePatternStrict");
if ((form[oDate[x][0]].type == 'text' ||
form[oDate[x][0]].type == 'textarea') &&
(value.length > 0) &&
(datePattern.length > 0)) {
var MONTH = "MM";
var DAY = "dd";
var YEAR = "yyyy";
var orderMonth = datePattern.indexOf(MONTH);
var orderDay = datePattern.indexOf(DAY);
var orderYear = datePattern.indexOf(YEAR);
if ((orderDay < orderYear && orderDay > orderMonth)) {
var iDelim1 = orderMonth + MONTH.length;
var iDelim2 = orderDay + DAY.length;
var delim1 = datePattern.substring(iDelim1, iDelim1 + 1);
var delim2 = datePattern.substring(iDelim2, iDelim2 + 1);
if (iDelim1 == orderDay && iDelim2 == orderYear) {
dateRegexp = new RegExp("^(//d{2})(//d{2})(//d{4})$");
} else if (iDelim1 == orderDay) {
dateRegexp = new RegExp("^(//d{2})(//d{2})[" + delim2 + "](//d{4})$");
} else if (iDelim2 == orderYear) {
dateRegexp = new RegExp("^(//d{2})[" + delim1 + "](//d{2})(//d{4})$");
} else {
dateRegexp = new RegExp("^(//d{2})[" + delim1 + "](//d{2})[" + delim2 + "](//d{4})$");
}
var matched = dateRegexp.exec(value);
if(matched != null) {
if (!isValidDate(matched[2], matched[1], matched[3])) {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
} else {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
} else if ((orderMonth < orderYear && orderMonth > orderDay)) {
var iDelim1 = orderDay + DAY.length;
var iDelim2 = orderMonth + MONTH.length;
var delim1 = datePattern.substring(iDelim1, iDelim1 + 1);
var delim2 = datePattern.substring(iDelim2, iDelim2 + 1);
if (iDelim1 == orderMonth && iDelim2 == orderYear) {
dateRegexp = new RegExp("^(//d{2})(//d{2})(//d{4})$");
} else if (iDelim1 == orderMonth) {
dateRegexp = new RegExp("^(//d{2})(//d{2})[" + delim2 + "](//d{4})$");
} else if (iDelim2 == orderYear) {
dateRegexp = new RegExp("^(//d{2})[" + delim1 + "](//d{2})(//d{4})$");
} else {
dateRegexp = new RegExp("^(//d{2})[" + delim1 + "](//d{2})[" + delim2 + "](//d{4})$");
}
var matched = dateRegexp.exec(value);
if(matched != null) {
if (!isValidDate(matched[1], matched[2], matched[3])) {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
} else {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
} else if ((orderMonth > orderYear && orderMonth < orderDay)) {
var iDelim1 = orderYear + YEAR.length;
var iDelim2 = orderMonth + MONTH.length;
var delim1 = datePattern.substring(iDelim1, iDelim1 + 1);
var delim2 = datePattern.substring(iDelim2, iDelim2 + 1);
if (iDelim1 == orderMonth && iDelim2 == orderDay) {
dateRegexp = new RegExp("^(//d{4})(//d{2})(//d{2})$");
} else if (iDelim1 == orderMonth) {
dateRegexp = new RegExp("^(//d{4})(//d{2})[" + delim2 + "](//d{2})$");
} else if (iDelim2 == orderDay) {
dateRegexp = new RegExp("^(//d{4})[" + delim1 + "](//d{2})(//d{2})$");
} else {
dateRegexp = new RegExp("^(//d{4})[" + delim1 + "](//d{2})[" + delim2 + "](//d{2})$");
}
var matched = dateRegexp.exec(value);
if(matched != null) {
if (!isValidDate(matched[3], matched[2], matched[1])) {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
} else {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
} else {
if (i == 0) {
focusField = form[oDate[x][0]];
}
fields[i++] = oDate[x][1];
bValid = false;
}
}
}
if (fields.length > 0) {
focusField.focus();
alert(fields.join('/n'));
}
return bValid;
}
function isValidDate(day, month, year) {
if (month < 1 || month > 12) {
return false;
}
if (day < 1 || day > 31) {
return false;
}
if ((month == 4 || month == 6 || month == 9 || month == 11) &&
(day == 31)) {
return false;
}
if (month == 2) {
var leap = (year % 4 == 0 &&
(year % 100 != 0 || year % 400 == 0));
if (day>29 || (day == 29 && !leap)) {
return false;
}
}
return true;
}