首頁 > 開發者 > JavaScript
標籤：var blur word eth return parse inner xmlns get
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <body> <form action="../0620/lunbo.html" method="post"> <div> <div>
<div> 請輸入使用者名稱： </div> <div> <input type="text" name="uid" id="uid" onblur="yanzheng()"/> <span id="tishi"></span> </div> </div> <div> <div> 請輸入密碼： </div> <div> <input type="password" name="uid1" id="uid1" /> </div> </div> <div> <div> 請再次輸入密碼： </div> <div> <input type="password" name="uid2" id="uid2" onblur="xiangdeng()"/> <span id="tish2"></span> </div> </div> <div> <div> 請輸入年齡： </div> <div> <input type="text" name="age" id="age" onblur="nage()"/> <span id="tish3"></span> </div> </div> <div> <div> 請輸入手機號： </div> <div> <input type="text" name="tel" id="tel" onblur="tell()"/> <span id="tish4"></span> </div> </div> <div> <div> <!--雙引號裡可以直接寫js代碼，所以可以用return--> <input type="submit" value="提交" onclick="return check()"/> </div> </div> </div> </form> </body> </html> <script> //先執行點擊事件，在執行提交 function check(){ //判斷如果沒有輸入即使用者名稱為空白，提示使用者名稱為空白並返回false，如果不為空白返回true if(document.getElementById("uid").value==""){ alert("使用者名稱不可為空！"); return false; }else{ return true; } } function yanzheng(){ //非空驗證 if(document.getElementById("uid").value==""){ //給後面的span添加文本並改變文本顏色 document.getElementById("tishi").innerText="使用者名稱不可為空"; document.getElementById("tishi").style.color="red"; }else{ document.getElementById("tishi").innerText="使用者名稱可用"; document.getElementById("tishi").style.color="green"; } } function xiangdeng(){ var p1=document.getElementById(‘uid1‘); var p2=document.getElementById(‘uid2‘); //相等驗證 if(p1.value==p2.value){ document.getElementById("tish2").innerText="輸入正確"; document.getElementById("tish2").style.color="green"; }else{ document.getElementById("tish2").innerText="兩次輸入密碼不一致"; document.getElementById("tish2").style.color="red"; } } function nage(){ var a = document.getElementById("age"); //範圍驗證 //擷取使用者輸入的值並用parseInt轉換為整數進行比較 if(parseInt(a.value)>=18 && parseInt(a.value)<=50){ document.getElementById("tish3").innerText="輸入正確"; document.getElementById("tish3").style.color="green"; }else{ document.getElementById("tish3").innerText="年齡不符合條件"; document.getElementById("tish3").style.color="red"; } } function tell(){ var a = document.getElementById("tel"); //正則驗證 if(a.value.match(/^1[3|4|5|7|8][0-9]{9}$/)==null){ document.getElementById("tish4").innerText="手機號不合法"; document.getElementById("tish4").style.color="red"; }else{ document.getElementById("tish4").innerText="輸入正確"; document.getElementById("tish4").style.color="green"; } } </script>
JavaScript表單驗證
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
