<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>表單驗(yàn)證</title>
????<style>
????????.names{
????????????width:358px;
????????????height:42px;
????????????margin-left:38px;
????????????-webkit-border-radius:5px;
????????????-moz-border-radius:5px;
????????????border-radius:5px;
????????}
????????.btn{
????????????width:78px;
????????????height:42px;
????????????margin-left:15px;
????????????background:?rgb(46,122,184);
????????????color:?#fff;
????????????font-size:18px;
????????????font-weight:?bold;
????????????outline:?none;
????????????border:0;
????????????border-radius:?5px;
????????}
????????.pro{
????????????position:?relative;
????????????left:78px;
????????????font-size:16px;
????????????color:?#ccc;
????????}
????</style>
</head>
<body>
????<form?action="#">
????????<label?for="t1"?class="tit">名稱</label>
????????<input?type="text"?id="t1"?class="names"?name="names">
????????<button?type="submit"?class="btn"?id="btn">驗(yàn)證</button>
????????<p>
????????????<span?class="pro"?id="pro"></span>
????????</p>
????</form>
</body>
<script>
????var?$=function(id){
????????return?document.getElementById(id);
????};
????addEventHandler($("btn"),"click",?judge);
????function?judge(){
????????$("pro").innerHTML="";
????????var?value=$("t1").value;
????????console.log(value);
????????if(!value){
????????????$("pro").innerHTML?="不能為空";
????????}else?if(countLength(value)<4?&&countLength(value)>16){
????????????$("pro").innerHTML?="您輸入的字符超過(guò)16個(gè)";
????????}else{
????????????$("pro").innerHTML?="輸入正確";
????????}
????}
????function?countLength(str){
????????var?count?=0;
????????for(var?i=0;i<str.length;i++){
????????????var?code?=?str[i].charCodeAt();??//檢查每個(gè)字符是否為除中文外的字母
?if(code>=0&&code<=128){
????????????????count++;
????????????}else{
????????????????count?+=2;
????????????}
????????}
????????return?count;
????}
????function?addEventHandler(element,?event,?listener)?{??//當(dāng)前元素、事件、函數(shù)
?if?(element.addEventListener)?{
????????????element.addEventListener(event,?listener,?false);
????????}
????????else?if?(element.attachEvent)?{
????????????element.attachEvent("on"?+?event,?listener);
????????}
????????else?{
????????????element['on'?+?event]?=?listener;
????????}
????}
</script>
</html>
<!--
字符數(shù)為4-16為
????每個(gè)英文字母、數(shù)字、英文符號(hào)長(zhǎng)度為1
????每個(gè)漢字，中文符號(hào)長(zhǎng)度為2-->
為什么輸出的時(shí)候，提示文字突然就沒(méi)有了！
19990000
2017-10-06 23:53:56
