js实现简易版validate
需求分析
项目中需要根据选择不同的类型,显示不同的表单,采用的方法是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的更多相关文章
- Javascript基础示例:用JS写简易版贪吃蛇(面向对象)
废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- 使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
- 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
- 使用 js 实现一个简易版的 async 库
使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...
随机推荐
- 泡泡一分钟: Deep-LK for Efficient Adaptive Object Tracking
Deep-LK for Efficient Adaptive Object Tracking "链接:https://pan.baidu.com/s/1Hn-CVgiR7WV0jvaYBv5 ...
- 程序员的沟通之痛https://blog.csdn.net/qq_35230695/article/details/80283720
个人理解: 一般刚工作的程序员总觉得技术最重要.但是当工作年限超过3年.或者岗位需要涉及汇报.需求对接等就会发现沟通非常重要.也许在大公司还不那么明显,但是在小公司.小团队或者创业,沟通甚至可以说是第 ...
- mysql 外键约束及表关联
一.MYSQL中的约束 1.主键:primary key 唯一非空的特性并且可以优化查询速度 2.外键:foreign key 外键的作用保证2个或2个以上的数据表的数据一致性和完整性 3.唯一:un ...
- Fiddler抓取数据并分析(完整的配置教程)
一.Fiddler现在的移动应用程序几乎都会和网络打交道,所以在分析一个 app 的时候,如果可以抓取出其发出的数据包,将对分析程序的流程和逻辑有极大的帮助.对于HTTP包来说,已经有很多种分析的方法 ...
- NodeJS笔记(四) NPM 指令--- npm start
在上一节中使用我们使用下面的指令启动了Express的demo APP项目 npm start 这个指令具体执行了哪些内容呢? Node.js新版本改变了启动方式,npm start 会执行 bi ...
- java手写线程池,完善中
package com.test001.threadpool; import java.util.LinkedList; import java.util.List; import java.util ...
- 转载:Android RecyclerView 使用完全解析 体验艺术般的控件
转自:https://blog.csdn.net/lmj623565791/article/details/45059587
- webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题
下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...
- C#基础加强(9)之对象序列化(二进制)
介绍 对象序列化是将对象转换为二进制数据(字节流),反序列化是将二进制数据还原成对象.对象的非持久态的,不仅在程序重启.操作系统重启会造成对象的丢失,就是退出函数范围等都可能造成对象的消失,而序列化与 ...
- python类与对象-如何为创建大量实例节省内存
如何为创建大量实例节省内存 问题举例 在网络游戏中,定义玩家类Player(id, name, level...), 每个玩家在线将创建一个Player实例,当在线人数很多时,将产生大量实例, 如何降 ...