需求分析

项目中需要根据选择不同的类型,显示不同的表单,采用的方法是css隐藏显示不需要的表单,但是这个表单字段都是必填的,尝试把不同的表单放在不同的form里,提交时根据不同的类型调用miniui自带的validate方法,结果失败,验证了不同表单的所有字段,所以只能自己实现一个简易版的validate方法,功能是根据不同的类型,判断字段是否为空,如果是空则提示。

代码实现

提示函数

因为每个字段都需要单独判断所以把提示封装成一个函数

       function showk(){
mini.alert("表单字段均为必填!");
}

核心功能

根据输入的type拼接上各个字段就能得到type类型表单的字段

     function myvalidate (type) {
var name = mini.get(type+"unitname");
var licnum = mini.get(type+"licnum"); ... var fax = mini.get(type+"fax");
var creditcode = mini.get(type+"creditcode");
if(name.getValue()==''){
showk();
return "w";
}
if(licnum.getValue()==''){
showk();
return "w";
} ... if(email.getValue()==''){
showk();
return "w";
}
if(fax.getValue()==''){
showk();
return "w";
}
if(creditcode.getValue()==''){
showk();
return "w";
} */
if(type=="use"){
var useunittype = mini.get("useunittype")
if(useunittype.getValue()==''){
showk();
return "w";
}
}
}

代码优化

写这么长实在是太傻了,类型后面的字段大部分都是一样的,可以放在一个数组里然后迭代,不同的分别写if就行了,也不知道第一次写的时候为啥没想到,可能这就是菜吧

     function myvalidate(type){
var field=["unitname","licnum",...,"fax","creditcode"];
for(var f of field){
var temp = mini.get(type+f);
if(temp.getValue()==''){
showk();
return "w";
}
}
if(type=="use"){
var useunittype = mini.get("useunittype")
if(useunittype.getValue()==''){
showk();
return "w";
}
}
}

总结

还是要多写,不然实际问题来临,手忙脚乱。

js实现简易版validate的更多相关文章

  1. Javascript基础示例:用JS写简易版贪吃蛇(面向对象)

    废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  3. 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

    实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...

  4. 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包

    使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...

  5. 使用 js 实现一个简易版的模版引擎

    使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...

  6. 使用 js 实现一个简易版的 drag & drop 库

    使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...

  7. 使用 js 实现一个简易版的动画库

    使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...

  8. 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序

    使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...

  9. 使用 js 实现一个简易版的 async 库

    使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...

随机推荐

  1. 泡泡一分钟: Deep-LK for Efficient Adaptive Object Tracking

    Deep-LK for Efficient Adaptive Object Tracking "链接:https://pan.baidu.com/s/1Hn-CVgiR7WV0jvaYBv5 ...

  2. [git] git怎样fork一个repo

    描述 我定制了一下strongswan的工程.然后想把我自己的定制变成一个repo push到远端git.tong.com与大家分享. 这个时候,应该怎么做? 如果你用过github的话.那么你可以理 ...

  3. es5原型式继承间解

    1. 原型式继承方法 js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚. es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条: 子类继承父类,主 ...

  4. Redis可视化工具安装及常用操作操作

    可视化操作工具:RedisDesktopManager 下载地址:http://www.pc6.com/mac/486661.html 直接安装(傻瓜式安装,直接下一步就可以了)(有Mac和windo ...

  5. ArcGIS为面要素生成邻接矩阵

    1. 分析工具——>空间关联 使用注意,直接用FID似乎不可行,我是自己重新建了一个"String"字段,值用字段计算器从FID获取过来.之后按照上面的步骤才成功. 实现主要 ...

  6. git reset与git revert的区别

    http://alpha-blog.wanglianghome.org/2010/07/30/git-partial-rollback/ reset(版本撤回) 格式 git reset [-q] [ ...

  7. Request的方法和数组

    req.getHeader("referer") [取得发送请求页面对应的浏览器地址栏信息,可以使用这种方法实现防盗链等操作] String name=new String(req ...

  8. STM32_DAC之软件触发(Trigger)

    stm32_DAC可以用来输出固定的电压值,有些时候需要按键可调输出的电压值.其中一种方法是使用外部中断EXTI9, 另外一种方法就是使用软件触发. 如果将DAC_InitTypeDef.DAC_Tr ...

  9. 2019-oo-第二次总结

    这一单元是关于模拟电梯运行,考验多线程的一个单元,难度由简入入深,从多线程单部电梯,到优化,再到多线程多部电梯,难度一次次的提高. 一.多线程单部电梯(傻瓜调度) 1.设计策略 这一次我只额外的开了一 ...

  10. vue中上传文件之multipart/form-data

    首先在项目里用了拦截器的,由于拦截器会将传递的参数转成对象,所以你i提交的时候会发现multipart/form-data或转变成application/json 其次关于input的文件上传是需要一 ...