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>
效果：
