日常隨筆: [Javascript]驗證表單及停用按紐的方式

昨天聽到朋友說表單有個disable的功能
javascript可以使用.disabled=false和.disabled=true來開關按紐或是輸入表格的地方
於是我試著實作出驗證的表單
結果網頁在此
範例輸入
姓名：張三
密碼：a123@A
日期：2015/07/05
<!DOCTYPE html>



<html>

 <head lang="zh-tw">

  <meta charset="UTF-8">

  <title>驗證表單</title>

         <style>



   fieldset{

                margin: 0px auto;

    width:625px;

    border-radius: 15px;

    border-color:#00FFFF;

   }

   .title{

    width:450px;

    border-bottom:1px solid #000000;

    border:3px;

    padding:0;

   }

   .t {

    width:100px;

    margin: 10px;

    text-align: right;

    vertical-align:auto;

   }

  </style>

        <script>

            window.onload = function () {

                document.getElementById("nm").onblur = checkName;

                document.getElementById("pw").onblur = cheackPassword;

                document.getElementById("dt").onblur = checkDate;

    document.getElementById("clean").onclick = cleanForm;

            }



        </script>



 </head>



 <body>

  <header>

   

   </div>

  </header>

  <article>

            <h2 style="text-align:center;color:#FF0000">驗證表單</h2>

            <br>

          

            <form action="#" method="post" id="demoform">

                <fieldset>

    <legend>Form Check</legend>

                    <div class="title">

                    <label class="t">姓名：</label><input type="text" id="nm">

                        <span id="nmr"></span><br>

                        <label class="t">不可空白，至少兩個字且必須中文字</label>

                    </div><br>

                   

                   

                  

                    <div class="title">

                    <label class="t">密碼：</label><input type="text" id="pw">

                        <span id="pwr"></span><br>

                        <label class="t">密碼不為空，至少六個字，不為中文，必須</label><br>

                        <label class="t">包含英文、數字、特殊字元(!@#$%^&*)</label>

                    </div><br>

                    <div class="title">

                    <label class="t">日期：</label><input type="text" id="dt">                       

                        <span id="dtr"></span><br>

                        <label class="t">格式：西元年/月/日(ex:2000/02/29)</label>

                    </div><br>      

                     

                    <div class="title">              

           <label class="t"> </label>

           <input type="button" id="goOut"  disabled="disabled" value="送出">

           <input type="reset" id="clean" value="清除">

                    </div><br>

                </fieldset>

            </form>   

  </article>

  <script>

   var nameValue

   var passwordValue

   var dateValue



   function buttonDisable(){

    if(nameValue&&passwordValue&&dateValue){

     document.getElementById('goOut').disabled=false;

    }else{

     document.getElementById('goOut').disabled=true;

    }

   }



   function cleanForm(){

    nameValue = false;

    passwordValue = false;

    dateValue = false;

    document.getElementById("nmr").innerHTML ="";

    document.getElementById("pwr").innerHTML="";

     document.getElementById("dtr").innerHTML ="";

    buttonDisable();

   }



   function checkName() {

    var thePassword = document.getElementById("nm").value;

    var re = /^[\u4e00-\u9fa5]{2,}$/;

    if (thePassword.length >= 2) {

     if (re.test(thePassword)) {

      nameValue = true;

      document.getElementById("nmr").innerHTML = "輸入正確";

     } else {

      nameValue = false;

      document.getElementById("nmr").innerHTML = "格式有誤";

     }



    } else {

     nameValue = false;

     document.getElementById("nmr").innerHTML = "姓名至少兩個字";

    }

    buttonDisable();

   }





   function cheackPassword() {

    var thePassword = document.getElementById("pw").value;

    var re = /^(?=.*[0-9])(?=.*[A-Za-z])(?=.*[!@#\$%\^&\*])(?!.*[\u4e00-\u9fa5])(?!.*[\s]).{6,}$/;

    if (thePassword.length >= 6) {

     if (re.test(thePassword)) {

      passwordValue = true;

      document.getElementById("pwr").innerHTML="輸入正確";

     } else {

      passwordValue = false;

      document.getElementById("pwr").innerHTML="密碼格式有誤";

     }



    } else {

     passwordValue = false;

     document.getElementById("pwr").innerHTML="至少六個字";

    }

    buttonDisable();



   }

   function checkDate() {

    var theDate = document.getElementById("dt").value;

    var re = /^\d{4}[\/]{1}\d{1,2}[\/]{1}\d{1,2}$/;

    var thisDate = new Date(theDate);

    var thisDay = thisDate.getDate();

    

    if (re.test(theDate)) {

     var theDateSubDay = theDate.split("/");

     if (theDateSubDay[2] == thisDay) {

      dateValue = true;

      document.getElementById("dtr").innerHTML = "輸入正確";

     } else {

      dateValue = false;

      document.getElementById("dtr").innerHTML = "日期格式有誤";

     }



    } else {

     dateValue = false;

     document.getElementById("dtr").innerHTML = "輸入格式應為yyyy/MM/dd";

    }

    buttonDisable();



   }

 </script>

 </body>

</html>
日常隨筆

2015年7月5日星期日

[Javascript]驗證表單及停用按紐的方式

沒有留言:

張貼留言

2015年7月5日 星期日

[Javascript]驗證表單及停用按紐的方式

沒有留言:

張貼留言

2015年7月5日星期日
