# JavaScript 姓名密碼日期 ###### tags: `JavaScript` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .hh{ margin: auto; } .st1{ width: 450px; border-bottom: 1px double gainsboro; margin: 6px; padding-bottom: 10px; } .fi{ width: 150px; margin: 10px; border: 1px solid rgb(4, 136, 4); border-radius:10px } p{ color: grey; font-size: 50%; } .sb{ margin: auto; text-align: center; } </style> </head> <body> <fieldset class="fi"> <legend>Form Check</legend> <div class="hh"> <form action="#" method="GET" enctype="multipart/form-data" > <div class="st1"> <label>姓名:</label> <input type="text" id="name" placeholder="請輸入姓名" size="15" onblur="name1()"> <span id="na"></span> <p>(1.不可空白，2.至少兩個字以上，3必須全部為中文字)</p> </div> <div class="st1"> <label>密碼:</label> <input type="password" id="pwd" size="15" placeholder="請輸入密碼" onblur="pwd1()"> <span id="pw"></span> <p>(1.不可空白，2.至少6個字且必須包含英文字母、數字、特殊字元[!@#$%^&*])</p> </div> <div class="st1"> <label>日期:</label> <input type="text" id="date" size="15" placeholder="ex:2000/2/29" onblur="date1()"> <span id="day"></span> <p>格式:西元年/月/日 yyyy/MM//dd</p> </div> <div class="sb"> <INPUT TYPE="button" name="Message" value="送出"> <INPUT TYPE="SUBMIT" name="message" value="清除"> </div> </div> </script> <script> function name1(){ var theNameObj = document.getElementById("name").value; var re = /^[\u4e00-\u9fa5]{2,}$/ if(re.test(theNameObj)) document.getElementById("na").innerHTML="<img src='cat123.jpg'>正確" else if(theNameObj<2) { document.getElementById("na").innerHTML="不可空白" }else document.getElementById("na").innerHTML="至少兩個字以上，必須全部為中文字" } function pwd1(){ let thePwdObj = document.getElementById("pwd").value; let re = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$/; if(re.test(thePwdObj)) document.getElementById("pw").innerHTML="正確" else if (thePwdObj<6){ document.getElementById("pw").innerHTML="不可空白" }else document.getElementById("pw").innerHTML="至少6個字且必須包含英文字母、數字、特殊字元[!@#$%^&*]" } function date1(){ let theDateObj = document.getElementById("date").value; let re=/^((((19|20)(([02468][048])|([13579][26]))(\/02\/29|\/2\/29)))|((20[0-9][0-9])|(19[0-9][0-9]))\/(((|(0[1-9])|([1-9])|(1[0-2]))\/(([1-9])|(0[1-9])|(1[0-9])|(2[0-8])))|((((0[13578])|(1[02]))\/31)|(((0[1,3-9])|([1])|([3-9])|(1[0-2]))\/(29|30)))))$/; if(re.test(theDateObj)){ document.getElementById("day").innerHTML="正確" }else document.getElementById("day").innerHTML="錯誤" } </script> </body> </html> ```