29、任务二十九——阻止点击之后的默认事件

0、题目

如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果
校验规则：
- 1.字符数为4~16位
- 2.每个英文字母、数字、英文符号长度为1
- 3.每个汉字，中文符号长度为2

1、解答过程

task29.html

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="UTF-8">
  5     <title>IFE JavaScript Task 29</title>
  6     <style>
  7     form{
  8         margin:auto;
  9         width:600px;
 10         height:65px;
 11         font-size: 24px;
 12     }
 13     input{
 14         width:300px;
 15         height:30px;
 16         margin:20px;
 17         border-radius: 7px;
 18         border:1px solid rgba(198, 202, 220, 0.35);
 19     }
 20     input:focus{
 21         border:1px solid rgba(181, 187, 216, 0.9);
 22         border-radius: 7px;
 23         outline:none;
 24 
 25     }
 26     button{
 27         border:1px solid rgba(34, 71, 255, 0.35);
 28         background-color:rgba(34, 71, 255, 0.35);
 29         width:150px;
 30         height:40px;
 31         font-size: 24px;
 32         color:white;
 33         letter-spacing: 10px;
 34         border-radius: 7px;
 35     }
 36     #result{
 37         margin-left: 450px;
 38         font-weight: bold;
 39         color:rgba(128, 128, 128, 0.52);
 40     }
 41     </style>
 42   </head>
 43 <body>
 44 <form>
 45     <label for="input">名称</label>
 46     <input id="input" type="text"/>
 47     <button id="test">验证</button>
 48 </form>
 49 <div id="result">必填，长度为4~16个字符</div>
 50 
 51 <script type="text/javascript" >
 52 var input=document.getElementById('input'),
 53     test=document.getElementById('test'),
 54     result=document.getElementById("result");
 55 //初始状态
 56 function origin(){
 57     result.innerHTML="";
 58     result.style.color="red";
 59     input.style.border="2px solid red";
 60 }
 61 //点击验证按钮
 62 test.addEventListener("click",function(e){
 63     origin();
 64     var length=checkLength(input.value);
 65     if(length<4||length>16){
 66         result.innerHTML="字符长度为4~16个，一个汉字算两个字符！";
 67         result.style.color="red";
 68         input.style.border="2px solid red";
 69     }
 70     if(!/^[a-zA-Z0-9u4e00-u9fa5]+$/.test(input.value)){
 71         result.innerHTML="只能输入中文,字母和数字哦！";
 72         result.style.color="rgba(12, 234, 81, 0.62)";
 73         input.style.border="2px solid rgba(12, 234, 81, 0.62)";
 74     }
 75     if((/^[a-zA-Z0-9u4e00-u9fa5]+$/.test(input.value))&&length>=4&&length<=16){
 76         result.innerHTML="验证成功!";
 77         result.style.color="rgba(12, 234, 81, 0.62)";
 78         input.style.border="2px solid rgba(12, 234, 81, 0.62)";
 79 
 80     }
 81     if(input.value==""){
 82         result.innerHTML="名称不能为空!";
 83         result.style.color="red";
 84         input.style.border="2px solid red";
 85     }
 86     e.preventDefault();
 87     return false;
 88 });
 89 //检验输入的值有多少个字符
 90 function checkLength(str){
 91     var len =0,temp=0;
 92     for(var j=0;j<str.length;j++){
 93     　　temp = 1;
 94     　　if(/^[u2E80-u9FFF]+$/.test(str[j])){
 95         　　temp = 2;
 96     　　}
 97     　　len += temp;
 98     }
 99     return len;
100 }  
101 </script>
102 </body>
103 </html>

2、遇到的问题

（1）阻止鼠标点击的默认事件

//停止事件冒泡
function stopPropagation(event) {
var e = event || window.event;
if (e.stopPropagation)
e.stopPropagation();
e.cancelBubble = true;
}

//停止默认事件
function preventDefault(event) {
var e = event || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}

element.onclick = function(e){stopPropagation(e);preventDefault(e);return false;}//兼容所有浏览器

如果是超链接即A标签的话，请将href设置为javascript:void(0);


（2）改变input框的默认样式