剛學JavaScript的時候寫的code，令人懷念的深層if else。
打開後發現根本無法檢核輸入:p。不知從哪查到加上自己試誤拼湊的正則表示式。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>製做表單</title>
<script src="Calendar/CombinedCompact/CalendarPopup.js"></script>
<script>
var cal = new CalendarPopup();
window.onload = function () {
document.getElementById("idName").onblur = checkName;
document.getElementById("idName").onfocus = clearrt1;
document.getElementById("idPwd").onblur = checkPwd;
document.getElementById("idPwd").onfocus = clearrt2;
document.getElementById("idDate").onblur = checkDate;
document.getElementById("idDate").onfocus = clearrt3;
}
function clearrt1() {
document.getElementById("rt1").innerHTML = " ";
}
function clearrt2() {
document.getElementById("rt2").innerHTML = " ";
}
function clearrt3() {
document.getElementById("rt3").innerHTML = " ";
}
function checkName() {
var inputName = document.getElementById("idName").value;
var re = /\s/
if (re.test(inputName)) {
document.getElementById("rt1").innerHTML = "<img src='forbidden16.png' class='im1' /> <span class='hint'>不可有空白</span>";
document.getElementById("idName").value = ""; //清空欄位內容
}//檢查是否有空白
else {
re = /^[^\u4e00-\u9fa5]+$/
if (re.test(inputName)) {
document.getElementById("rt1").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入中文</span>";
document.getElementById("idName").value = ""; //清空欄位內容
}//檢查是否為中文字
else {
if (inputName.length < 2) {
document.getElementById("rt1").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入至少兩個中文字</span>";
}//檢查是否輸入2個字以上
else {
document.getElementById("rt1").innerHTML = " <img src='correct8.png' class='im1'/> ";
}
}
}
}// end of checkName()
function checkPwd() {
var inputPwd = document.getElementById("idPwd").value;
var re = /\s/
if (re.test(inputPwd)) {
document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>不可有空白</span>";
document.getElementById("idPwd").value = ""; //清空欄位內容
}//檢查是否有空白
else {
re = /^[\u4e00-\u9fa5]+$/
if (re.test(inputPwd)) {
document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>不可輸入中文</span>";
document.getElementById("idPwd").value = ""; //清空欄位內容
}//檢查是否為中文字
else {
if (inputPwd.length < 6) {
document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入至少六個字數符號</span>";
document.getElementById("idPwd").value = ""; //清空欄位內容
}//檢查是否輸入6個字以上
else {
re = /^[^\!\@\#\$\%\^\&\*]+$/
if (re.test(inputPwd)) {
document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>需包含特殊符號!@#$%^&*</span>";
document.getElementById("idPwd").value = ""; //清空欄位內容
}//檢查是否包含特殊符號
else {
re = /^[^0-9]+$/
if (re.test(inputPwd)) {
document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>需包含數字</span>";
document.getElementById("idPwd").value = ""; //清空欄位內容
}//檢查是否包含數字
else {
re = /^[^a-zA-Z]+$/
if (re.test(inputPwd)) {
document.getElementById("rt2").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>需包含英文</span>";
document.getElementById("idPwd").value = ""; //清空欄位內容
}//檢查是否包含英文
else {
document.getElementById("rt2").innerHTML = " <img src='correct8.png' class='im1'/> ";
}
}
}
}
}
}
}// end of checkPwd
function checkDate() {
var inputDate = document.getElementById("idDate").value;
var re = /\s/
if (re.test(inputDate)) {
document.getElementById("rt3").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>不可輸入空白</span>";
document.getElementById("idDate").value = "" //清空欄位內容
}
else {
if (inputDate == "") {
document.getElementById("rt3").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>請輸入日期</span>";
}
else {
re = /^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$/
if (re.test(inputDate)) {
document.getElementById("rt3").innerHTML = "<img src='correct8.png' class='im1'/> ";
}
else {
document.getElementById("rt3").innerHTML = "<img src='forbidden16.png' class='im1'/> <span class='hint'>格式錯誤</span>";
document.getElementById("idDate").value = "" //清空欄位內容
}
}
}
}// end of checkDate
function print_data() {
var inputName = document.getElementById("idName").value;
var inputPwd = document.getElementById("idPwd").value;
var inputDate = document.getElementById("idDate").value;
document.getElementById("div1").innerHTML = "姓名：" + inputName + "<br>密碼：" + inputPwd + "<br>日期：" + inputDate;
}
</script>
<style>
* {
margin: 0;
}
body {
font-family:Microsoft JhengHei;
}
fieldset {
width:600px;
padding:20px;
border-radius:10px;
border:none;
box-shadow:2px 2px 10px #999;
}
.div_form {
width:600px;
margin:20px auto;
padding:20px;
border:none;
box-shadow:2px 2px 10px #999;
border-radius:10px;
background-color:rgba(255,255,255,0.5);
}
.im1 {
width:10px;
height:10px;
}
.hint {
font-size:0.8em;
color:#555555;
}
.div_input {
margin:10px;
}
</style>
</head>
<body>
<!-- <fieldset>
<legend>輸入資料</legend>-->
<div class="div_form">
<form name="data_entry" action="#">
<div class="div_input">
姓名：<input type="text" id="idName" placeholder="請輸入姓名"/>
<span id="rt1"></span>
<br />
<span class='hint'>(不可空白，至少兩個字且必須為中文字)</span>
<br />
</div>
<div class="div_input">
密碼：<input type="password" id="idPwd" placeholder="請輸入密碼" />
<span id="rt2"></span>
<br />
<span class='hint'>(不可空白，不包含中文，至少六個字且必須包含英文字母，數字，特殊字元[!@#$%^&*])</span>
<br />
</div>
<div class="div_input">
日期：<input type="text" id="idDate" onclick="cal.select(document.forms[0].idDate, 'anchorname', 'MM/dd/yyyy'); return false;" placeholder="ex:02/29/2000" />
<span id="rt3"></span><a href="#" id="anchorname"></a>
<br />
<span class='hint'>(格式：月/日/西元年)</span>
<br />
</div>
<div class="div_input">
<input type="button" value="Reset" onclick="this.form.reset();"/>
<input type="submit" id="profile" value="Submit" onclick="print_data()" />
</div>
</form>
<div id="div1">
</div>
</div>
<!--</fieldset>-->
</body>
</html>
沒有留言:
張貼留言