先上个预览
再秀秀代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="authors" content="叶剑飞" /> <title>个人信息登记</title> <script language="javascript" type="text/javascript"> //<![CDATA[ function check_email( email_address ) { var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g; if ( regex.test( email_address ) ) { var user_name = email_address.replace( regex, "$1" ); var domain_name = email_address.replace( regex, "$2" ); document.getElementById("user_name_result").innerHTML = "用户名：" + user_name; document.getElementById("domain_name_result").innerHTML = "域名： " + domain_name; return true; } else { document.getElementById("user_name_result").innerHTML = "您输入的电子邮件地址不合法"; return false; } } function is_leap_year ( year ) { if ( ( year % 100 != 0 && year % 4 == 0 ) || year % 400 == 0 ) return true; else return false; } function is_valid_date ( year, month, day ) { if ( month == "00" || day == "00" ) return false; if ( month > 12 ) return false; if ( month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12" ) { if ( day > 31 ) return false; } else if ( month == "04" || month == "06" || month == "09" || month == "11" ) { if ( day > 30 ) return false; } else // month == 2 { if ( is_leap_year( year ) ) { if ( day > 29 ) return false; } else { if ( day > 28 ) return false; } } return true; } function check_date( date ) { var regex = /^([1-2][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])$/g; if ( regex.test( date ) ) { var year = date.replace( regex, "$1" ); var month = date.replace( regex, "$2" ); var day = date.replace( regex, "$3" ); if ( is_valid_date( year, month, day ) ) { var alert_string = "您的出生日期是" + year + "年" + month + "月" + day + "日"; document.getElementById("date_result").innerHTML = alert_string; return true; } else { document.getElementById("date_result").innerHTML = "您输入的出生日期不合法"; return false; } } else { document.getElementById("date_result").innerHTML = "您输入的出生日期不合法"; return false; } } function check( ) { var email_valid = check_email ( document.getElementById("email_address").value ); var date_valid = check_date ( document.getElementById("date").value ); if ( !email_valid && !date_valid ) { window.alert( "您输入的电子邮件地址和出生日期均不合法" ); return false; } if ( !email_valid ) { window.alert( "您输入的电子邮件地址不合法" ); return false; } if ( !date_valid ) { window.alert( "您输入的出生日期不合法" ); return false; } var alert_string = "姓名： " + document.getElementById("name").value + "\n"; alert_string += document.getElementById("user_name_result").innerHTML + "\n"; alert_string += document.getElementById("domain_name_result").innerHTML + "\n"; alert_string += document.getElementById("date_result").innerHTML + "\n"; window.alert( alert_string ); return true; } //]]> </script> </head> <body style="text-align: left;"> <h1 style="text-align: center;">个人信息登记</h1> <p> </p> <form action="#" method="post" onsubmit="return check();"> <table align="center"> <tr><td>姓名：</td><td><input id="name" type="text" style=" 300px" /></td></tr> <tr><td colspan="2"> </td></tr> <tr><td>电子邮件地址：</td><td><input id="email_address" type="text" style=" 300px;" onchange="return check_email(this.value)" /></td></tr> <tr><td> </td><td><span id="user_name_result"> </tr> <tr><td> </td><td><span id="domain_name_result"> </tr> <tr><td>出生日期：</td><td><input id="date" type="text" style=" 300px" onchange="return check_date(this.value);" /></td></tr> <tr><td>（格式XXXX-XX-XX）</td><td><span id="date_result"></span></td></tr> <tr><td colspan="2"> </td></tr> <tr><td colspan="2"> </td></tr> <tr align="center"><td colspan="2"><input type="submit" value="提交" /></td></tr> </table> </form> <p> </p> <p> </p> <p> </p> <p> </p> <p style="text-align: center;">版权所有 © 叶剑飞 2012</p> </body> </html>