day4 继续完善第三稿需求填报的要求

一、具体任务

河北省重大技术需求征集表
机构名称    必填项（提示用户输入单位全称）
通讯地址    必填项
单位网址    可选项    电子信箱    必填项（原为可选项）
法人代表    必填项    邮政编码    可选项
联 系 人    必填项    电  话    1.固定 必填项（原为可选项）2.手机必填项
        传  真    可选项
机构属性    □企业      □高等院校   □研究机构    □其他
（必填项，单选项，上述四个选项只能选择一个）
机构简介（单位基本情况，研究基础等，限200字）

（必填项，但是要限制字数不超过200字）
技术需求名称    必填项    需求年限（新增）         年——     年
重大科技需求概述（主要内容，技术指标、预期经济和社会效益等，限500字）

（必填项，但是要限制字数不超过200字）

关键字：（关键字单独列项，要求用户必须填写至少一个关键字，最多可填写五个）
科技活动类型 （原为研究类型）    □基础研究  □应用研究  □试验发展
□研究与试验发展成果应用（原为研究发展与成果应用）  □技术推广与科技服务  
（单选项，上述五个选项只能选择一个）
学科分类    （参加学科分类，限基础研究填写）
只有研究类型选择基础研究时，方可选择学科分类。
学科分类以树形图的形式提供用户选择，具体的分类参考国家的学科分类编码目录。
需求技术所属领域
（非基础研究填写）    □电子信息技术  □光机电一体化  □软件  □生物制药技术  □新材料及应用技术  □先进制造技术   □ 现代农业技术 □新能源与高效节能技术  □资源与环境保护新技术  □其他技术（注明） 
当研究类型选择为应用研究、试验发展、研究发展与成果应用、技术推广与科技服务其中一种时，才可选择需求技术领域。
需求技术领域为多选项，当用户选择其他技术选项时，则应显示文本框提示用户输入其他技术描述。

需求技术
应用行业    （参见国民经济行业分类，非基础研究填写）
当研究类型选择为应用研究、试验发展、研究发展与成果应用、技术推广与科技服务其中一种时，才可选择需求技术应用行业。
择需求技术应用行业以树形图的形式提供用户选择，具体的分类参考国民经济行业分类编码目录。
技术需求
合作模式    □独立开发     □技术转让    □技术入股    
□合作开发     □其他
（必填项、多选项，可以选择多个）
项目资金需求及来源    计划总投资A             必填项   万元    企业自筹A1    必填项   万元
    银行贷款A3    必填项   万元    其它融资A2    必填项   万元

 二、具体实现

1、对所有必填项的选项的约束

前期我是js去判断是否为空，后面我引用了layui框架后我就直接使用它自带的表单验证。

效果：

 

 

 

2、对文本框的限制字数

遇到的问题：原本我是直接在js中对文本框字数进行限制

<script>
    function checknum(){
        var nMax = 10;
        var textDom =  document.getElementById("text");
        var len =textDom.value.length;    
        if(len>nMax){
            textDom.value = textDom.value.substring(0,nMax);
            return;
        }
        document.getElementById("in").value="你还可以输入"+(nMax-len)+"个字";
    }
    checknum();
</script>

可是现在换用layui后原本的js不起效果，我没明白为什么，可能是js冲突了，layui自带js对表单进行约束，所以后来去找layui中怎么限制字数。看了它的说明文档https://www.layui.com/doc/modules/form.html#verify

没有自带的文本框验证，需要自定义验证方法。它给的实例是：

form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
    
    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用户名不能为敏感词');
      return true;
    }
  }
  
  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
}); 
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">     

我根据要求设计的：

characters:function(v){
                var numasc = 0;
                var charasc = 0;
                var otherasc = 0;
                for (var i = 0; i < v.length; i++) {
                    var asciiNumber = v.substr(i, 1).charCodeAt();
                    if (asciiNumber >= 48 && asciiNumber <= 57) {
                        numasc += 1;
                    }
                    if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
                        charasc += 1;
                    } 
                    if ((asciiNumber >= 33 && asciiNumber <= 47)||(asciiNumber >= 58 && asciiNumber <= 64)||(asciiNumber >= 91 && asciiNumber <= 96)||(asciiNumber >= 123 && asciiNumber <= 126)) {
                        otherasc += 1;
                    }
                }
                 if(numasc > 0 || charasc>0 || otherasc>0)  {
                     return "只能输入中文";
                 }
            } ,
            clength: function (value) {
                var i,sum; 
                sum=0; 
                for(i=0;i<value.length;i++){ 
                    if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255)){ 
                        sum=sum+1; 
                    }else{
                        sum=sum+2; 
                    }
                } 
                if (sum > 1000) {
                    return '最多只能输入500个中文字';
                }
            }

效果：

3、学科分类和需求技术应用行业的树形结构

遇到的问题:同样的之前是在js中实现的，现在使用layui后会影响整体布局，所以也改用layui自带的树形结构

data1 = [{
        title: '数学'
        ,id: 1
        ,children: [{
          title: '数理逻辑与数学基础'
          ,id: 1000
          ,children: [{
            title: '演绎逻辑学'
            ,id: 10001
          },{
            title: '证明论'
            ,id: 10002
          },{
            title: '递归论'
            ,id: 10003
          },{
            title: '模型论'
            ,id: 10004
        }]
        },{
          title: '代数学'
          ,id: 1001 
          ,children: [{
                title: '线性代数'
                ,id: 10011
              },{
                title: '群论'
                ,id: 10012
              },{
                title: '域论'
                ,id: 10013
              },{
                title: '李代数'
                ,id: 10014
            }]
        },{
          title: '常微分方程'
          ,id: 1002
          ,children: [{
                title: '定性理论'
                ,id: 10021
            }]
        }]
      },{
        title: '信息科学与系统科学'
        ,id: 2
        ,children: [{
          title: '系统学'
          ,id: 2000
        },{
          title: '基础学科'
          ,id: 2001
        }]
      },{
        title: '力学'
        ,id: 3
        ,children: [{
          title: '基础力学'
          ,id: 3000
        },{
          title: '固体力学'
          ,id: 3001
        }]          
      }]
      ,data2 = [{
            title: '农、林、牧、渔业'
            ,id: 1
            ,children: [{
              title: '农业'
              ,id: 1000
              ,children: [{
                title: '谷物种植'
                ,id: 10001
              },{
                title: '证明论'
                ,id: 10002
              },{
                title: '递归论'
                ,id: 10003
              },{
                title: '模型论'
                ,id: 10004
            }]
            },{
              title: '代数学'
              ,id: 1001 
              ,children: [{
                    title: '线性代数'
                    ,id: 10011
                  },{
                    title: '群论'
                    ,id: 10012
                  },{
                    title: '域论'
                    ,id: 10013
                  },{
                    title: '李代数'
                    ,id: 10014
                }]
            },{
              title: '常微分方程'
              ,id: 1002
              ,children: [{
                    title: '定性理论'
                    ,id: 10021
                }]
            }]
          },{
            title: '信息科学与系统科学'
            ,id: 2
            ,children: [{
              title: '系统学'
              ,id: 2000
            },{
              title: '基础学科'
              ,id: 2001
            }]
          },{
            title: '力学'
            ,id: 3
            ,children: [{
              title: '基础力学'
              ,id: 3000
            },{
              title: '固体力学'
              ,id: 3001
            }]          
          }];

<div class="layui-form-item count">
              
                  <div id="test1"></div>
                  <label class="layui-form-label">学科分类</label>
                  <div class="layui-input-block">
                      <input type="text"   name="classify" autocomplete="off"  class="layui-input classify"/>
                  </div>
              </div>

效果：