随笔：让我来限制你的input输入

记录一次为可能不会算数的运维买单的Web前端开发经历╮(╯_╰)╭。

背景：公司内部开发一个简单的监控平台，可以配置URL访问规则。通过定时任务定时调用自己公司的在线运维平台或第三方平台的访问是否正常，出现问题立即告警通过邮件或短信通知给相关人员。

以上为背景，本人负责开发检查告警的对象及规则配置的后台与前端配置页面的开发。其中有一个告警规则与告警级别的对应是这样的：

一个预警规则对应多个预警级别
规则和级别的对应中需要设置一个比例范围，作用是根据不同的级别对应范围，触发不同的预警。如一个规则的黄色预警的配置范围是minVal=20%,maxVal=40%。

因此前端配置页面需要勾选不同的级别对应并设置对应项的分配比例。这就扯出了本文的话题，开始时我仅仅处理勾选和设置，但实际测试时测试人员提出个问题，就是他在眼花缭乱中输入此比例时他弄迷糊了，设置的值之间是重复范围的。就是说比如黄色预警的比例是0.1到0.3、红色的比例是0.2到0.4，导致了多次重复报警，然后就要求输入时进行限制（/(ㄒoㄒ)/这……运维时肯定是制定好的值啊……就不能自己算么！）

但是，有强迫症的我感觉既然有这个需求，那就弄呗。（废话一箩筐后，开启本文的正式内容。）

再谈需求

要做限制的话，有哪些限制，也包括了相关的配置需求：

配置规则属性时动态载入级别列表（级别存储在数据库中，可手动增删）；
规则新增或修改时必须选择一个级别对应；
可自由选择多个级别，每个级别都能配置当前规则对应级别的一个比例的最大值和最小值；
最大值和最小值输入只能为0~1之间的小数（小数点后为两位），包括0和1；
同级别设置时，最大值必须大于最小值，最小值必须小于最大值；
已经选择的级别输入中，最大值和最小值的范围不能重复冲突。

因设计样式再增加的需求：

勾选级别对应后，才能设置对应最大值和最小值；
取消勾选后，要清除对应设置的最大值和最小值。

页面设计

因为是内部系统，没有产品原型和UI设计，是沿用的公司的其他平台产品的后台界面，另外这个配置页面则是本人自己设计的。

预警规则配置

左侧列表选择要配置的规则，只需注意右下角的预警规则配置。

级别配置

开发环境

JQuery.js（版本低到我不想说，我的心里话你应该懂得……）、

Google Chrome 63（看这个版本你会更懂我对上面的心情！）、

Bootstrap3、sweetalert。

实现历程之最初

未测试前依据设计，开始实现配置页面，依次实现如下：

1、动态加载并显示级别列表

这里流程很明确，依据我的页面设计，可以在页面加载进来后就通过Ajax加载级别列表，然后显示在固定位置。不过还是有几个要点的。

TL;DR

使用了<template>做模板进行替换
内容生成后再绑定事件
增加处理了加载失败的情况，提供链接点击进行重新加载

<template>:是HTML5标准中新增的标签元素，是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。

在最终写入的位置加入<template>标签，写入要替换的模板内容：

<div class="form-group col-md-12 no-padding">
    <template id="levelRulesTemplate">
        <div id="levelRules_{{id}}" data-id="{{id}}" class="input-group input-group-margin">
            <span class="input-group-addon">
                <input type="checkbox" name="levelRules" value="{{id}}">
            </span>
            <span class="input-group-addon">{{name}}&nbsp;&rArr;</span>
            <span class="input-group-addon">最小值：</span>
            <input type="text" class="form-control disabled" placeholder="0~1之间，允许2位小数（包含）" value="" disabled />
            <span class="input-group-addon">最大值：</span>
            <input type="text" class="form-control disabled" placeholder="0~1之间，允许2位小数" value="" disabled />
            <span class="input-group-addon">等值：</span>
            <input type="text" name="eqVal" class="form-control disabled" placeholder="输入匹配的内容" value="" maxlength="64" disabled />
        </div>
    </template>
</div>

Ajax加载成功后，获取模板并替换内容后，写入父元素，代码片段如下：

...

load:function (urlKey,dataCache,templateId,help,title,bind) {
  ...

  $.ajax({
    type: 'get',
    url: url.get(urlKey),
    success: function(responseData){
      var data=responseData;
      //错误时显示重新载入
      if(error.has(data)){error.reload(help,title);return;}
      
      //记录数据
      dataCache=data.data.list;
      //显示level列表
      var template=document.getElementById(templateId).innerHTML;
      var content="";
      for(var i=0;i<dataCache.length;i++){
        var temp=template;
        for(var key in dataCache[i]){
          temp=temp.replace(new RegExp("\{\{"+key+"\}\}","g"),dataCache[i][key]);
        }
        content+=temp;
      }
      $("#"+templateId).parent().get(0).innerHTML=content;
      
      //绑定事件的回调
      !bind||bind();
    },
    error:function () {
      //错误时显示重新载入
      error.reload(help,title);
    }
  });
}

2、处理勾选和取消勾选

然后处理预警级别勾选和取消勾选的处理。

TL;DR

使用数组记录勾选的checkbox的值
勾选时添加到数组，取消勾选时从数组删除
勾选时对应的输入框可输入，取消勾选时清空并禁止输入

checkbox点击时处理事件：

...

    //预警级别选中或取消处理
    function levelAction(input) {
        //获取父级元素
        var parent=$(input).parents("[id^='levelRules_']");
        //查找下级中的输入框，进行设置
        parent.find("[name$='Val']").each(function () {
            $(input).get(0).checked
                ?($(this).removeAttr("disabled"),$(this).removeClass("disabled"))
                :($(this).attr("disabled","disabled"),$(this).addClass("disabled"),$(this).val(""));
        });
        //记录
        $(input).get(0).checked
            //添加
            ?(dataSet.levelSelect.push($(input).val()))
            //删除
            :(dataSet.levelSelect.splice(dataSet.levelSelect.indexOf($(input).val()),1),rangeSet.remove($(input).val()));
    }

3、新建时清空，编辑时设置

在点击顶部的新建按钮进入新建模式，此时需清空级别选择；而点选左侧列表时需根据选择规则中的配置设置级别选择以及设置内容。

...

    //通讯事件
    var request={
      ...
      
        //设置规则详情到属性框
        set:function (rule) {
            ...
      
            //对应的预警级别
            //清理
            $(":checkbox[name='levelRules']").each(function () {
                $(this).get(0).checked=false;}
           );
            $(":text[name$='Val']").each(function () {$(this).val("");});
            //设置
            if(rule.hasOwnProperty("levelRuleList")){
                for(var i=0;i<rule.levelRuleList.length;i++){
                    var property=rule.levelRuleList[i];
                    var group=$("#levelRules_"+property.levelId);
                    var checkbox=group.find(":checkbox[name='levelRules']");
                    if(!checkbox||checkbox.length==0) continue;
                    checkbox.get(0).checked=true;
                    levelAction(checkbox);
                    group.find("input[name$='Val']").each(function () {
                        $(this).val(property[$(this).attr("name")]);
                    });
                }
            }
        },
        ... 
        
        //刷新交互属性区
        refresh:function(){
          ...
          
          //清空全部选择级别
          $("#property_panel").find(":checkbox").each(function () {
                $(this).get(0).checked=false;
                levelAction($(this));
            });
        }
    };

    ...
    
    //切换成新建模式
    function changeCreateAction() {
      ...
      
      //清空属性框
      request.refresh();
    }

4、简单限制输入为数字

初次设置时比较简单，只设置了<input>的类型来限制：

<input type="number" min="0.00" step="0.01" max="1.00" />

实现历程之强化

发现简单设置input的type='number'其实并无法限制PC上键盘输入字母，而且此时max-length是无效的。再加上还有上面提到的测试说的限制需求，强化历程如下：

1、限制input的输入字符长度

还是设置<input>为type='text'类型，这样可以直接通过max-length来固定输入长度。

<input type="text" maxlength="4" name="minVal" inputmode="numeric" ... />

限制输入长度为4，因为还有一位小数点。

inputmode：这里用来定义预期输入的为数字类型，便于理解，同时用于绑定事件。

...

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  ...
};

2、限制只能输入数字或小数点

怎么限制输入只能为数字或小数点呢？使用了pattern属性但是不太管用，而且也不是在输入时限制，只有使用直接“杀掉”的方式了。

...

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  //0.只能输入数字或小数点
  this.value=this.value.replace(/[^(\d|\.)]/g,"");
  
  ...
};

使用正则表达式匹配非数字和小数点的输入内容，全部替换掉。

3、限制输入数字的范围为0~1的小数

后面就更要复杂点，一位数一位数的判断，也就是一边输入一边判断。

...

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  //0.只能输入数字或小数点
  this.value=this.value.replace(/[^(\d|\.)]/g,"");
  //1.输入第一位数字只能为0或1
  if(this.value.length==1)       
    this.value=this.value.replace(/[^(0|1)]/,"");
  //2.输入第二位数字只能为小数点,并且当第一位为1时无法输入
  else if(this.value.length==2){
    var first=this.value.substring(0,1);
    this.value=(first+this.value.substring(1,2)
                .replace(first=="1"?/./:/[^(\.)]/,""));
  }
  
  ...
};

第一位数字非0或1就替换掉；另外就是当第一位输入1后就不需要输入后面的“.00”的小数位了。

4、检查最大值大于最小值

再比较到小数点后面的位数就涉及到需求中的范围比较了。

TL;DR

进入输入框时记录同级别的设置的最小值
输入时与当前记录最小值进行对比
如果最大值小于最小值提示错误

这里我使用了一个类专门来处理范围比较，便于记录和对比，下面是其中关于最小值的部分：

//rangeSet:对预警级别相关的输入范围进行记录和输入控制判断
var rangeSet={
  ...
  //记录当前的最小值，用于比较最大值的输入
  curMin:-1,
  //设置当前的最小值
  setCurMin:function (min) {
    this.curMin=this.subNumber(min);
  },
  
  ...

  //检查输入值是否比当前最小值大
  checkMax:function (val) {
    return this.subNumber(val)>this.curMin;
  },
  
  ...
  
  //处理单个数字的截取小数位
  subNumber:function (val) {
    if(typeof val=="number")        return val;
    else if(val=="0")               val=0;
    else if(val=="1")               val=100;
    else if(val.indexOf(".")==-1)   return parseInt(val);
    else{
      val=val.substring(val.lastIndexOf(".")+1);
      val=(val.length==1)?(val+"0"):val;
      val=parseInt(val);
    }
    return val;
  }
};

需要注意的是我直接截取了小数点后的两位作为整数进行记录和比较。这样在最大值的input进入焦点时绑定事件处理：

//最大值输入框进入时，记录对应的最小值
$("input[name='maxVal']").bind("focus",function(){
  rangeSet.setCurMin($(this).prevAll("input[name='minVal']").val())
});

输入的时候，进行比较：

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  ...
  
  else{
    var parent=$(this).parents(".input-group");
    var error=false;
    //3.输入最大值时检查是否大于最小值
    if($(this).attr("name")=="maxVal"){
      rangeSet.checkMax(this.value)
        ?(parent.removeClass("has-error"),toastr.clear())
      :(parent.addClass("has-error"),toastr.error("输入的最大值必须大于最小值！"),error=true);
      if(error) return;
    }
    ...
  }
});

5、检查最小值大于最大值

这步就简单，和上面一样，只不过是反过来：

...

//rangeSet:对预警级别相关的输入范围进行记录和输入控制判断
var rangeSet={
  ...
  //记录当前的最大值，用于比较最小值的输入
  curMax:-1,
  //设置当前的最大值
  setCurMax:function (max) {
    this.curMax=this.subNumber(max);
  },
  
  ...

  //检查输入值是否比当前最大值小
  checkMin:function (val) {
    return this.subNumber(val)<this.curMax;
  },
  
  ...
};

...

//最小值输入框进入时，记录对应的最大值
$("input[name='minVal']").bind("focus",function(){
  rangeSet.setCurMax($(this).nextAll("input[name='maxVal']").val())
});
            
...

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  ...
  
  else{
    var parent=$(this).parents(".input-group");
    var error=false;
    ...
    //4.输入最小值时检查是否小于最大值
    if($(this).attr("name")=="minVal"){
      rangeSet.checkMin(this.value)
        ?(parent.removeClass("has-error"),toastr.clear())
      :(parent.addClass("has-error"),toastr.error("输入的最小值必须大于最大值！"),error=true);
      if(error) return;
    }
    ...
  }
});

6、检查input输入的值是否在已经录入的范围中

同样是记录在上面那个rangeSet类中，在input离开焦点时会对重新读取全部设置的级别和范围，用于在再次输入时进行对比。

//rangeSet:对预警级别相关的输入范围进行记录和输入控制判断
var rangeSet={
  //记录已用的区间
  used:[],
  
  ...
  
  //增加一条记录的区间
  set:function (id,min,max) {
    if(min==""||max=="") return;
    this.used.push({id:id,min:this.subNumber(min),max:this.subNumber(max)});
  },
  //清除一条区间记录
  remove:function (id) {
    if(!id) return;
    var index=-1;
    for(var i=0,length=this.used.length;i<length;i++){
      var use=this.used[i];
      if(use.id==id){
        index=i;
        break;
      }
    }
    index==-1||(this.used.splice(index,1));
  },
  //记录全部的已用区间
  load:function() {
    this.used.splice(0,this.used.length);
    var _self=this;
    //遍历全部选中级别
    $(":checked[name='levelRules']").each(function () {
      //获取最小值和最大值输入
      var parent=$(this).parents(".input-group");
      var min=parent.find("[name='minVal']").val();
      var max=parent.find("[name='maxVal']").val();
      //记录区间
      _self.set($(this).val(),min,max);
    });
  },
    
  ...
  
  //验证数字是否可以使用，可以使用返回true
  check:function (id,val) {
    //区间校验
    var result=true,val=this.subNumber(val);
    for(var i=0,length=this.used.length;i<length;i++){
      var use=this.used[i];
      if(use.id==id) continue;
      if(val>use.min&&val<use.max){
        result=false;
        break;
      }
    }
    return result;
  },
    
  ...
};

注意比较时要排除自己这行级别的输入，不然编辑输入修改时也会报错。

在input离开焦点时，重新记录全部输入：

//范围输入框离开焦点，检查当前的输入
$("input[inputmode='numeric']").bind("blur",function(){
var errorId=rangeSet.checkSubmit();
(errorId!=null)?$("#levelRules_"+errorId).addClass("has-error")
:$(".has-error").removeClass("has-error");
});

输入时进行比较：

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  ...
  
  else{
    var parent=$(this).parents(".input-group");
    var error=false;
    ...
    //5.检查输入的值是否在已经录入的区间
    rangeSet.check(parent.attr("data-id"),this.value)
      ?(parent.removeClass("has-error"),toastr.clear())
      :(parent.addClass("has-error"),toastr.error("输入的数值区间已经被设置过了！"));
    ...
  }
});

7、全部输入比对检查是否重复

以上只是解决input输入时进行比较提醒的情况（其实开始的时候有忽略到这点的，不过已使用很快就会发现），如果原来输入就有问题那么不修改就提交时是不会检查的；另外一个容易忽略的就是两个级别输入的最大值和最小值完全一样的情况。因此在提交保存时需要再对比一次：

...

//rangeSet:对预警级别相关的输入范围进行记录和输入控制判断
var rangeSet={
  ...
  
  //检查全部输入范围是否正确
  checkSubmit:function () {
    //先载入全部设置
    this.load();
    //遍历全部范围值
    var result=null;
    firstFor:
    for(var i=0,length=this.used.length;i<length;i++){
      var use=this.used[i];
      //检查最小值范围
      if(!this.check(use.id,use.min)){result=use.id;break;}
      //检查最大值与最小值的比较
      this.setCurMin(use.min);
      if(!this.checkMax(use.max)){result=use.id;break;}
      //检查最大值范围
      if(!this.check(use.id,use.max)){result=use.id;break;}
      //最后一起比较最大值和最小值
      for(var j=0;j<length;j++){
        var otherUse=this.used[j];
        if(otherUse.id==use.id) continue;
        if(use.min==otherUse.min
           &&use.max==otherUse.max){
          result=use.id;
          break firstFor;
      }
    }
  }
  return result;
},
  
  ...
};

这里用了break tags跳出多层循环；本文后面会贴出全部这个类的内容。

这样终于满足了全部的限制要求。

附：两块主要部分的全部代码

rangeSet：用于记录和区间对比的类

//rangeSet:对预警级别相关的输入范围进行记录和输入控制判断
var rangeSet={
  //记录已用的区间
  used:[],
  //记录当前的最小值，用于比较最大值的输入
  curMin:-1,
  //记录当前的最大值，用于比较最小值的输入
  curMax:-1,
  //增加一条记录的区间
  set:function (id,min,max) {
    if(min==""||max=="") return;
    this.used.push({id:id,min:this.subNumber(min),max:this.subNumber(max)});
  },
  //设置当前的最小值
  setCurMin:function (min) {
    this.curMin=this.subNumber(min);
  },
  //设置当前的最大值
  setCurMax:function (max) {
    this.curMax=this.subNumber(max);
  },
  //清除一条区间记录
  remove:function (id) {
    if(!id) return;
    var index=-1;
    for(var i=0,length=this.used.length;i<length;i++){
      var use=this.used[i];
      if(use.id==id){
        index=i;
        break;
      }
    }
    index==-1||(this.used.splice(index,1));
  },
  //记录全部的已用区间
  load:function() {
    this.used.splice(0,this.used.length);
    var _self=this;
    //遍历全部选中级别
    $(":checked[name='levelRules']").each(function () {
      //获取最小值和最大值输入
      var parent=$(this).parents(".input-group");
      var min=parent.find("[name='minVal']").val();
      var max=parent.find("[name='maxVal']").val();
      //记录区间
      _self.set($(this).val(),min,max);
    });
  },
  //检查输入值是否比当前最小值大
  checkMax:function (val) {
    return this.subNumber(val)>this.curMin;
  },
  //检查输入值是否比当前最大值小
  checkMin:function (val) {
    return this.subNumber(val)<this.curMax;
  },
  //验证数字是否可以使用，可以使用返回true
  check:function (id,val) {
    //区间校验
    var result=true,val=this.subNumber(val);
    for(var i=0,length=this.used.length;i<length;i++){
      var use=this.used[i];
      if(use.id==id) continue;
      if(val>use.min&&val<use.max){
        result=false;
        break;
      }
    }
    return result;
  },
  //检查全部输入范围是否正确
  checkSubmit:function () {
    //先载入全部设置
    this.load();
    //遍历全部范围值
    var result=null;
    firstFor:
    for(var i=0,length=this.used.length;i<length;i++){
      var use=this.used[i];
      //检查最小值范围
      if(!this.check(use.id,use.min)){result=use.id;break;}
      //检查最大值与最小值的比较
      this.setCurMin(use.min);
      if(!this.checkMax(use.max)){result=use.id;break;}
      //检查最大值范围
      if(!this.check(use.id,use.max)){result=use.id;break;}
      //最后一起比较最大值和最小值
      for(var j=0;j<length;j++){
        var otherUse=this.used[j];
        if(otherUse.id==use.id) continue;
        if(use.min==otherUse.min
           &&use.max==otherUse.max){
          result=use.id;
          break firstFor;
        }
      }
    }
    return result;
  },
  //处理单个数字的截取小数位
  subNumber:function (val) {
    if(typeof val=="number")        return val;
    else if(val=="0")               val=0;
    else if(val=="1")               val=100;
    else if(val.indexOf(".")==-1)   return parseInt(val);
    else{
      val=val.substring(val.lastIndexOf(".")+1);
      val=(val.length==1)?(val+"0"):val;
      val=parseInt(val);
    }
    return val;
  }
};

输入检查比较的部分：

//最大值输入框进入时，记录对应的最小值
$("input[name='maxVal']").bind("focus",function(){
  rangeSet.setCurMin($(this).prevAll("input[name='minVal']").val())
});

//最小值输入框进入时，记录对应的最大值
$("input[name='minVal']").bind("focus",function(){
  rangeSet.setCurMax($(this).nextAll("input[name='maxVal']").val())
});

//范围输入框离开焦点，检查当前的输入
$("input[inputmode='numeric']").bind("blur",function(){
  var errorId=rangeSet.checkSubmit();
  (errorId!=null)?$("#levelRules_"+errorId).addClass("has-error")
  :$(".has-error").removeClass("has-error");
});

//范围输入框数字限制
$("input[inputmode='numeric']").bind("input",function () {
  //0.只能输入数字或小数点
  this.value=this.value.replace(/[^(\d|\.)]/g,"");
  //1.输入第一位数字只能为0或1
  if(this.value.length==1)        
    this.value=this.value.replace(/[^(0|1)]/,"");
  //2.输入第二位数字只能为小数点,并且当第一位为1时无法输入
  else if(this.value.length==2){
    var first=this.value.substring(0,1);
    this.value=(first+this.value.substring(1,2)
                .replace(first=="1"?/./:/[^(\.)]/,""));
  }
  else{
    var parent=$(this).parents(".input-group");
    var error=false;
    //3.输入最大值时检查是否大于最小值
    if($(this).attr("name")=="maxVal"){
      rangeSet.checkMax(this.value)
        ?(parent.removeClass("has-error"),toastr.clear())
      :(parent.addClass("has-error"),toastr.error("输入的最大值必须大于最小值！"),error=true);
      if(error) return;
    }
    //4.输入最小值时检查是否小于最大值
    if($(this).attr("name")=="minVal"){
      rangeSet.checkMin(this.value)
        ?(parent.removeClass("has-error"),toastr.clear())
      :(parent.addClass("has-error"),toastr.error("输入的最小值必须大于最大值！"),error=true);
      if(error) return;
    }
    //5.检查输入的值是否在已经录入的区间
    rangeSet.check(parent.attr("data-id"),this.value)
      ?(parent.removeClass("has-error"),toastr.clear())
    :(parent.addClass("has-error"),toastr.error("输入的数值区间已经被设置过了！"));
  }
});

最后编辑于：2018.01.05 17:01:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270

随笔：让我来限制你的input输入

再谈需求

页面设计

开发环境

实现历程之最初

1、动态加载并显示级别列表

2、处理勾选和取消勾选

3、新建时清空，编辑时设置

4、简单限制输入为数字

实现历程之强化

1、限制input的输入字符长度

2、限制只能输入数字或小数点

3、限制输入数字的范围为0~1的小数

4、检查最大值大于最小值

5、检查最小值大于最大值

6、检查input输入的值是否在已经录入的范围中

7、全部输入比对检查是否重复

附：两块主要部分的全部代码

推荐阅读更多精彩内容