日常隨筆: 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>

接續Java樂透的程式，解說就請參考Java那邊
要看結果請點下面網頁
結果如此網頁



<html>

<head lang="zh-tw">

<meta charset="UTF-8">

<title>JavaScript Test</title>

<style> 


.type{

border:1px solid #FFC010;

border-radius: 15px;

width: 500px;


}


.title{

width:300px;

border-bottom:1px solid #000000;

border:3px;

padding:right;

}

.t {

width:100px;

float:left;

margin: 10px;

text-align: right;

vertical-align:center;


}


</style>


<script>



function check(){

if(parseInt(reg.balls.value)>=parseInt(reg.token.value)){

takeBalls(reg.balls.value,reg.token.value);

}else {

window.alert("輸入的內容無法進行抽取喔~");

}      

return undefined;

}



function takeBalls(balls, token){

var result = new Array(token);


//document.write("<div style=\"border:2px solid #FFCC00; width:400px;border-radius: 20px;text-align: center; \">")

document.getElementById("resultset").innerHTML = '<p style="color:#00DDAA">抽取結果如下</p>';

//document.write("<p style=\"color:#00DDAA\">抽取結果如下</p>");

for(var i=0;i<token;i++){

result[i]=parseInt(Math.random()*balls+1);

for(var j=0;j<i;j++){

if(result[j]==result[i]){

i--;

}

}

}

result.sort(sortNumber);

for (var i = 0; i < token; i++) {

var OriginalFont = document.getElementById("resultset").innerHTML;

document.getElementById("resultset").innerHTML = OriginalFont + '<span style="color:#3377FF ">' + result[i] + '號</sapn>';

//document.write("<span style=\"color:#3377FF \">"+result[i]+"號</sapn>");

}


//document.write("<br><a href=\"js.html\">返回</a></div>");


return undefined;

}

function sortNumber(a,b)

{

return a - b;

}


</script> 



</head>


<body>




<form action="#" method="post" name="reg">

<fieldset class="type">

<legend>樂透抽取程式</legend>

<div class="title">   

<label class="t">總共號碼數</label><input type="number" name="balls" min="1" required="required">

</div>

<br>

<div class="title">

<label class="t">取球數</label><input type="number" name="token" min="1" required="required">

</div>

<br>



<input type="button" value="確認" onclick="check()" >

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

<br>

<center id="resultset"></center>

</fieldset>




</form>




</body>


</html>

日常隨筆

2015年7月5日星期日

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

2015年6月30日星期二

[Javascript]用Javasrcript實作樂透抽取程式


	<html>
	<head lang="zh-tw">
	<meta charset="UTF-8">
	<title>JavaScript Test</title>
	<style>

	.type{
	border:1px solid #FFC010;
	border-radius: 15px;
	width: 500px;

	}

	.title{
	width:300px;
	border-bottom:1px solid #000000;
	border:3px;
	padding:right;
	}
	.t {
	width:100px;
	float:left;
	margin: 10px;
	text-align: right;
	vertical-align:center;

	}

	</style>

	<script>


	function check(){
	if(parseInt(reg.balls.value)>=parseInt(reg.token.value)){
	takeBalls(reg.balls.value,reg.token.value);
	}else {
	window.alert("輸入的內容無法進行抽取喔~");
	}
	return undefined;
	}


	function takeBalls(balls, token){
	var result = new Array(token);

	//document.write("<div style=\"border:2px solid #FFCC00; width:400px;border-radius: 20px;text-align: center; \">")
	document.getElementById("resultset").innerHTML = '<p style="color:#00DDAA">抽取結果如下</p>';
	//document.write("<p style=\"color:#00DDAA\">抽取結果如下</p>");
	for(var i=0;i<token;i++){
	result[i]=parseInt(Math.random()*balls+1);
	for(var j=0;j<i;j++){
	if(result[j]==result[i]){
	i--;
	}
	}
	}
	result.sort(sortNumber);
	for (var i = 0; i < token; i++) {
	var OriginalFont = document.getElementById("resultset").innerHTML;
	document.getElementById("resultset").innerHTML = OriginalFont + '<span style="color:#3377FF ">' + result[i] + '號</sapn>';
	//document.write("<span style=\"color:#3377FF \">"+result[i]+"號</sapn>");
	}

	//document.write("<br><a href=\"js.html\">返回</a></div>");

	return undefined;
	}
	function sortNumber(a,b)
	{
	return a - b;
	}

	</script>


	</head>

	<body>



	<form action="#" method="post" name="reg">
	<fieldset class="type">
	<legend>樂透抽取程式</legend>
	<div class="title">
	<label class="t">總共號碼數</label><input type="number" name="balls" min="1" required="required">
	</div>
	<br>
	<div class="title">
	<label class="t">取球數</label><input type="number" name="token" min="1" required="required">
	</div>
	<br>


	<input type="button" value="確認" onclick="check()" >
	<input type="reset" value="清除">
	<br>
	<center id="resultset"></center>
	</fieldset>



	</form>



	</body>

	</html>

2015年7月5日 星期日

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

2015年6月30日 星期二

[Javascript]用Javasrcript實作樂透抽取程式

2015年7月5日星期日

2015年6月30日星期二