JS简单实用小功能（二）

一、限制字符串长度

通过“maxlength ”限制：<input type="text" name="lname" maxlength="5" /><br />
通过“JavaScript事件 ”限制：<input type="text" data-length='5' id='limitLength' data-model='Ch' name="lname"/><br />

 1    window.onload = function () {
 2             var limitLength = document.getElementById("limitLength"), //获取限制对象
 3                 clearNonumber = function (tThis) { //清除数字
 4                     var _v = tThis.value,
 5                         _vLen = _v.length,
 6                         dataLength = tThis.getAttribute("data-length"), //获取长度属性
 7                         dataModel = tThis.getAttribute("data-model"),
 8                         subLen = dataLength;
 9                     if (_vLen > dataLength) tThis.value = _v.substr(0, subLen); //判断长度
10                     if (remainingCharacters) {
11                         self.showRemainingCharacters(!_vLen ? dataLength : (_vLen >
12                             dataLength ? 0 : dataLength - _vLen), remainingCharacters);
13                     }
14                 };
15             limitLength.onfocus = function () { //获取焦点事件
16                 clearNonumber(this);
17             }
18             limitLength.onkeyup = function () { //键盘事件
19                 clearNonumber(this);
20             }
21             limitLength.onblur = function () { //失去焦点事件
22                 clearNonumber(this);
23             }
24         };

二、密码强度识别

<h2>密码强度实时验证</h2>
<input id="passwordStrength" data-hint='请输入密码' type="password"> <span id="showStrength"></span>

 1 window.onload = function(){
 2         function setCss(_this, cssOption){//设置样式
 3             if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
 4                 return;
 5             }
 6             for(var cs in cssOption){
 7                 _this.style[cs] = cssOption[cs];
 8             }
 9             return _this;
10         }
11 
12         function trim(chars){//去除字符串左右两边的空格
13             return (chars || "").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" );
14         }
15 
16         function passwordStrength(passwordStrength, showStrength){
17             var self = this;
18             /*字符权重：
19              数字1，字母2 ，其他字符为3
20              当密码长度小于6为不符合标准，
21              长度大=6强度小于10，强度弱
22              ，长度大=6 强度>=10 <15，强度中，
23              长度大=6 强度>=15 强*/
24             passwordStrength.onkeyup = function(){
25                 var _color = ["red", "yellow", "orange", "green"],
26                         msgs = ["密码太短","弱","中","强"],
27                         _strength= 0,
28                         _v = trim(passwordStrength.value)
29                 _vL = _v.length,
30                         i = 0;
31 
32                 var charStrength = function(char){//计算单个字符强度
33                     if (char>=48 && char <=57){ //数字
34                         return 1;
35                     }
36                     if (char>=97 && char <=122) {//小写
37                         return 2;
38                     }else{
39                         return 3; //特殊字符
40                     }
41                 }
42 
43                 if(_vL < 6){//计算模式
44                     showStrength.innerText = msgs[0];
45                     setCss(showStrength, {
46                         "color":_color[0]
47                     })
48                 }else{
49                     for( ; i < _vL ; i++){
50                         _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
51                     }
52                     if(_strength < 10){
53                         showStrength.innerText = msgs[1];
54                         setCss(showStrength, {
55                             "color":_color[1]
56                         })
57                     }
58                     if(_strength >= 10 && _strength < 15){
59                         showStrength.innerText = msgs[2];
60                         setCss(showStrength, {
61                             "color":_color[2]
62                         })
63                     }
64                     if(_strength >= 15){
65                         showStrength.innerText = msgs[3];
66                         setCss(showStrength, {
67                             "color":_color[3]
68                         })
69                     }
70                 }
71             }
72         }
73         passwordStrength(
74                 document.getElementById("passwordStrength"),
75                 document.getElementById("showStrength"));
76     };

三、回车提交

<input type="text" id="enterSubmit" value="回车提交">

 1     window.onload = function(){
 2         document.getElementById("enterSubmit").onkeyup = function(e){
 3             e = e || window.event;
 4             var keycode = e.keyCode || e.which ||e.charCode;
 5             if(keycode === 13){
 6                 alert("回车提交成功");
 7             }
 8 
 9         }
10     };

四、常见验证

<h2>常见的验证规则</h2>
<p><input type="text" value='姓名验证'  data-reg='Chinese' data-smsg='通过√' data-emsg='请输入中文' id='regUser' data-tmsg='msgU' /><span id='msgU'></span></p>
<p><input type="text" value='邮箱验证'  data-reg='email' data-smsg='通过√' data-emsg='请输入邮箱' id='regEmail' data-tmsg='msgE' /><span id='msgE'></span></p>
<p><input type="text" value='电话验证'  data-reg='phone' data-smsg='通过√' data-emsg='请输入电话' id='regPhone' data-tmsg='msgP' /><span id='msgP'></span></p>
<p><input type="text" value='带小数位的数字验证'  data-reg='decimalNumber' data-smsg='通过√' data-emsg='请输入小数数字' id='regNumber' data-tmsg='msgN' /><span id='msgN'></span></p>

 1   window.onload = function(){
 2         var getRegular = function(rstr){
 3                 var regData={};//正则数据存储域
 4                 regData.rtrim = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;// 去除空格的正则
 5                 regData.Chinese = /[\u4e00-\u9fa5]/g;//中文
 6                 regData.nonumber = /\D/g;//数字
 7                 regData.nochinese = /[^\u4e00-\u9fa5]/g;//非中文
 8                 regData.email = /^\s*[a-zA-Z0-9]+(([\._\-]?)[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([_\-][a-zA-Z0-9]+)*(\.[a-zA-Z0-9]+([_\-][a-zA-Z0-9]+)*)+\s*$/;//邮件
 9                 regData.phone = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,})){0,}$/;//电话
10                 regData.decimalNumber = /^\d+(\.\d+)+$/;//带小数位的数字
11                 regData.htmlTags = /<[\/\!]*[^<>]*>/ig;//html
12 
13                 return regData[rstr];
14 
15             },
16             forElementArr = function(_elementArr, callBack){
17                 var arr =_elementArr,
18                         self = this
19                         ;
20 
21                 if(!(_elementArr instanceof Array)) {
22                     arr = [_elementArr];
23                 };
24                 for(var i= 0,arrLen = arr.length ;i<arrLen;i++){
25                     var arrI = arr[i];
26                     if(typeof arrI == "string"){
27                         arrI = self.getElement(arrI);
28                     }
29                     callBack && callBack(i, arrI);
30                 }
31             },
32             verification = function(str, reg){
33                 return getRegular(reg).test(str);
34             },
35             setCss = function(_this, cssOption){
36                 if ( !_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style ) {
37                     return;
38                 }
39                 for(var cs in cssOption){
40                     _this.style[cs] = cssOption[cs];
41                 }
42                 return _this;
43             };
44 
45         forElementArr([
46             document.getElementById("regUser"),
47             document.getElementById("regEmail"),
48             document.getElementById("regPhone"),
49             document.getElementById("regNumber")
50         ], function(index, _this){
51 
52             _this.onkeyup = function(){
53                 var _v = this.value.replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" ),//获取被处理的元素值
54                         _reg = this.getAttribute("data-reg"),//获取正则
55                         __reg = _reg.indexOf(",") > 0 ? _reg.split(","): [_reg],//如果含有“,”则将其转换成多数组
56                         _regLen = __reg.length,//数组长度
57                         _emsg = this.getAttribute("data-emsg"),//错误信息显示
58                         _smsg = this.getAttribute("data-smsg"),//通过信息显示
59                         _target = document.getElementById(this.getAttribute("data-tmsg")),//获取显示信息的元素
60                         i = 0;
61                 for(; i < _regLen ; i++){
62                     if(!verification(_v, __reg[i])){
63                         _target.innerHTML = _emsg ;
64                         setCss(_target, {
65                             "color":"red"
66                         })
67                         return;
68                     }
69                 }
70                 _target.innerHTML = _smsg ;
71                 setCss(_target, {
72                     "color":"green"
73                 })
74             }
75         });
76     };

五、单选

<h2>判断单选框是否选中</h2>
<input type="radio" name='sex' id='sexMan' checked="checked">男 <br />
<input type="radio" name='sex' id='sexWoman'>女

 1     window.onload = function(){
 2         var sexMan = document.getElementById("sexMan"),
 3                 sexWoman = document.getElementById("sexWoman");
 4         if(sexMan.checked){
 5             console.log("sexMan 被选中")
 6         }else{
 7             console.log("sexMan 未被选中")
 8         }
 9 
10         if(sexWoman.checked){
11             console.log("sexWoman 被选中")
12         }else{
13             console.log("sexWoman 未被选中")
14         }
15     };