需求分析

项目中需要根据选择不同的类型,显示不同的表单,采用的方法是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. luarocks 包管理工具

    安装方式:wget http://luarocks.org/releases/luarocks-2.2.2.tar.gz tar zxvf luarocks-2.2.2.tar.gz cd luaro ...

  2. Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

    Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...

  3. 20175303 2018-2019-2 《Java程序设计》第8周学习总结

    20175303 2018-2019-2 <Java程序设计>第8周学习总结 教材学习内容总结 本周学习<Java程序设计>第十五章: 泛型: 泛型(Generics)的主要目 ...

  4. 775. Global and Local Inversions

    We have some permutation A of [0, 1, ..., N - 1], where N is the length of A. The number of (global) ...

  5. [Unity][安卓]Unity和Android Studio 3.0 交互通讯(1)Android Studio 3.0 设置

    [安卓]Android Studio 3.0 JDK安卓环境配置(2017.10) http://blog.csdn.net/bulademian/article/details/78387052 [ ...

  6. 搭建docker私有仓库

    保存镜像的地方成为仓库(registry).目前有2种仓库:公共仓库和私有仓库. 最方便的是使用公共仓库上传和下载镜像,下载不需要注册,上传需要到公共仓库注册.公共仓库网站:https://hub.d ...

  7. webpack 4.0 配置文件 webpack.config.js文件的放置位置

    一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...

  8. 框架及其技术(Android)

    Log框架: Logger: 简单,漂亮,强大的Android日志工具 Hugo:    在调试版本上注解的触发方法进行日志记录 Timber: 一个小的,可扩展的日志工具 响应式编程: RxJava ...

  9. BeautifulSoup库的使用

    1.简介 BeautifulSoup库也是一个HTML/XML的解析器,其使用起来很简单,但是其实解析网站用xpath和re已经足矣,这个库其实很少用到.因为其占用内存资源还是比xpath更高. '' ...

  10. 29个人,耗时84天,硬刚Python,实验结果如下。

    真有动漫风格的编程书籍? 上图,就是日本出版的编程书籍.为什么要搞成动漫风格?因为学编程常常会枯燥,难以坚持.法国思想家布封说:所谓天才,就是坚持不懈的意思.大家学编程,转行.涨薪.加强技能,无论是何 ...