IFE2017-单个表单项的检验

来源：互联网发布：巴黎散步道知乎编辑：程序博客网时间：2024/05/29 11:05

百度IFE单个表单项检验

任务一：表单（一）单个表单项的检验

任务描述

字符数为4~16位
每个英文字母、数字、英文符号长度为1
每个汉字，中文符号长度为2

想法

取输入框内文本，转为字符编码值;
循环判断每个字符其是否在英文字母、数字、英文符号的编码范围内，如果在strLen加1;
如果不是，那判断其是否在32bit的汉字字符编码值范围内，strLen加2;
如果不是，判断格式错误
得到strLen后，判断字符数是否在4~16位

代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>任务一：表单（一）单个表单项的检验</title>  <style type="text/css">    .f-verify{      font-size: 12px;    }    .f-verify input {      width: 400px;      height: 30px;      direction: none;      border:1px solid #CCCCCC;      border-radius: 5px;    }    .f-verify button{      width: 50px;      height: 30px;      margin-left: 15px;      background-color: #436EB4;      border: 1px solid transparent;      border-radius: 5px;      color: white;      line-height: 30px;    }    .f-verify p{      color: #CCCCCC;    }  </style></head><body>  <div class="f-verify">    <form action="#">      <span>名称：</span><input id="iTxt" type="text" placeholder="字符数为4~16位"><button id="btn">验证</button><br>      <p id="pTip">必填，长度为4~16个字符</p>    </form>  </div></body> <script type="text/javascript">    var btn = document.getElementById("btn");    var iTxt = document.getElementById("iTxt");    var pTip= document.getElementById("pTip");    btn.onclick = function(){      var str = iTxt.value;      var strLen = getStrLen(str);       console.log(strLen);      if (strLen < 4 || strLen > 16) {        tips(pTip,2);      }else{        tips(pTip,1);      }    };    var getStrLen = function(str){      var len = 0;      for (var i = str.length - 1; i >= 0; i--) {        if (str.charCodeAt(i) < 0xFF && str.charCodeAt(i) > 0x00) {            len++;            console.log(str.charCodeAt(i));        } else if (str.charCodeAt(i) < 0x9FBF && str.charCodeAt(i) > 0x4E00) {            len += 2;            console.log(str.charCodeAt(i));        } else{          tips(pTip,3);        }      }      return len;    }    var tips = function(obj,situation){      switch(situation){        case 1:        pTip.textContent = "格式正确";        pTip.style.color = "green";        iTxt.style.border = "1px solid green";        break;        case 2:        pTip.textContent = "必须填入长度4-16的字符";        pTip.style.color = "red";        iTxt.style.border = "1px solid red";        break;        case 3:        pTip.textContent = "每个汉字，中文符号长度为2";        pTip.style.color = "red";        iTxt.style.border = "1px solid red";      }    }  </script></html>

问题

UTF-16 32bit的编码字符范围究竟是什么？代码是使用了中文字符的编码字符值范围

总结

其实今天更多学习到的是UTF-16的知识，对UTF-16有了个粗略的了解。

0 0