市面上当然有很多成型的框架,比如jquery的validation插件各种吧。现在工作地,由于前端童鞋也没用这些个插件。根据业务的要求,自己就在代码里写了个简单的表单提交的检测代码(php的也写了一个哈哈),类也封装的不太完善,很多校验规则也没做,类里边对传入参数也没做啥改动,算是不健壮吧(主要自己不会坑自己,老实的该传什么就传什么了哈哈)。业务上主要就是对表单字段的必填啊,类型啊,长度这些个限制。

	<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> function Submit_check(obj){
this.obj = obj;
this.str = '';
this.arr = {
'empty_arr':[[], '不能为空'], // 元素为空数组
'type_arr':[[], '类型不正确'], // 元素类型不正确
'length_arr':[[], '字符过长'] // 元素过长
};
this.alert_str = function(){
// 遍历满足情况
for(var x in this.obj){
var name = this.obj[x][0];// 表单字段的中文名
var value = this.obj[x][1];// 字段的值
// 为空
if (typeof value == 'undefined' || value == '' ){
this.arr.empty_arr[0].push(name);
} else {
// 类型错误
if (this.obj[x][3] !='' && this.obj[x][3] != typeof value) this.arr.type_arr[0].push(name);
// 长度过长
if (this.obj[x][2] !=0 && this.obj[x][2] < value.length) this.arr.length_arr[0].push(name);
}
}
// 输出str
for(var y in this.arr){
if (this.arr[y][0].length){
this.str += this.arr[y][0].join(',')+' '+this.arr[y][1]+'\n';
}
}
return this.str;
}
} var a1 = 'b',
  b1 = 12,
  c1 = 'aaadsfaaaaaab',
  d1 = 'a',
   e1 = ''; // key->表单字段英文名 value内数组顺序-->字段中文名、值、长度、类型;
// 长度为0表示不需要检测长度;类型为空表示不需要检测类型
var obj = {
'a' : ['地球', a1, 10, 'number'],
'b' : ['火星', b1, 0, 'number'],
'c' : ['月球', c1, 8, ''],
'd' : ['土星', d1, 12, 'string'],
'e' : ['木星', e1, 8, '']
};
var str = new Submit_check(obj).alert_str();
if (str){
alert(str);
} </script>

  

代码段:js表单提交检测的更多相关文章

  1. js表单提交,判断文本框,用户名密码是否为空,JS表单检测!

    当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...

  2. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  3. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  4. JS表单提交的几种方式

    第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...

  5. js表单提交回调函数

    在研究表单的时候发现一个有意思的东西——在表单提交的时候如何保证数据全部提交完毕才会清空? 我们常用的<input type="reset" value="重置&q ...

  6. js表单提交一种方式

    在一个html和php混编的文件中,用到js提交表单的方法: 定义表单id为form1,提交按钮type为submit, var data_info = document.getElementById ...

  7. html js 表单提交前检测数据

    通过使用form的onsibmit来控制是否提交数据 返回值为真是提交,其他不变,示例如下: JS部分 function check() { var newPwd = document.getElem ...

  8. js 表单提交

    方式一: 使用input type="submit" 提交 <form action="http://www.w3school.com.cn/tiy/loadtex ...

  9. js表单提交到后台对象接收

    $.extend({ StandardPost:function(url,args){ var form = $("<form method='post' target='_blank ...

随机推荐

  1. gulp常用插件汇总

    1.gulp-sass 预编译 sass 文件为 css 文件,SASS 不多说,如果项目中有使用 sass ,那么这个插件应该是必备的.前面的一篇文章中,已经对该插件有所使用了,可配置编译后输出风格 ...

  2. CentOS 7 镜像下载

    新版本系统镜像下载(当前最新是CentOS 7.4版本) CentOS官网 官网地址 http://isoredirect.centos.org/centos/7.4.1708/isos/x86_64 ...

  3. js-ES6学习笔记-async函数(2)

    1.async函数返回一个 Promise 对象. async函数内部return语句返回的值,会成为then方法回调函数的参数. async function f() { return 'hello ...

  4. Flex 常用布局

    1.flex布局 1.1  容器指定为flex布局 .box{display: flex;} 1.2 行元素指定flex布局 .box{display:inline-flex} 2.容器的属性 2.1 ...

  5. CSS3 鼠标划上图片放大

    td img{transition: all 1s}/*鼠标划上,图片1s全部显示完成*/ td img:hover{ transform: scale(5) translateX(50%) tran ...

  6. <Android 基础(三十三)> TabHost ~ 仿微信底部菜单

    简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...

  7. 使用PeopleSoft 异步操作设置步骤

    在手机端调PS接口或同步数据到中间库等程序中经常用到异步操作. 在主菜单>PeopleTools>集成代理程序>集成设置中添加了服务和服务操作后需要设置以下3步才能完成异步程序: 1 ...

  8. 10款jQuery文本高亮插件

    [编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...

  9. 在 Azure 中将基础结构自动化工具与虚拟机配合使用

    若要以一致的方式大规模创建和管理 Azure 虚拟机 (VM),通常需要某种形式的自动化. 可以通过许多工具和解决方案来自动完成整个 Azure 基础结构部署和管理生命周期. 本文介绍了一些可以在 A ...

  10. 使用 Azure PowerShell 监视和更新 Windows 虚拟机

    Azure 监视使用代理从 Azure VM 收集启动和性能数据,将此数据存储在 Azure 存储中,并使其可供通过门户.Azure PowerShell 模块和 Azure CLI 进行访问. 使用 ...