市面上当然有很多成型的框架,比如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. java队列Queue及阻塞队列

    java队列 接口Queue类在java.util包,定义了以下6个方法 详细查看官方文档https://docs.oracle.com/javase/7/docs/api/java/util/Que ...

  2. var和const和let的区别

    简述: 1.前端的变量申明,可以用到var,ES6的const(衡量)/let(变量) 2.在ES5用的都是var,到ES6之后,也就是2015年开始出现const/let. var 不会报错,有声明 ...

  3. flex做的圣杯布局

    now,给大家分享一个用flex写的圣杯布局,大家可以参考一下子 首先圣杯布局是两列固定宽度,中间自适应. 我直接说一下步骤,上图,上图 1.步骤1 2.步骤2 上面就是基本的步骤,下面我把代码给大家 ...

  4. JS中冒泡排序,选择排序,快速排序

        var arr = [1,4,2,9,7,6,5,4,7,5];     // 冒泡排序(通俗的说就是j 和 j+1打,谁赢了谁去后面)       for(var i = 1;i<ar ...

  5. js知识学习图谱,新手必看

    前端新手学习也不外乎就是Html  css  html5  css3  这是最基本的,学会这些仅仅可以说是会写布局,写网页,不算前端开发,还有最重要的js,jq要学习,我自己java后台转前端,现在复 ...

  6. [Android] 仿照 Last App Switcher 写的小程序

      在Android众多工具类app中,Last App Switcher绝对算是一个让人用过就不会卸载的工具.LAS这个应用,它的功能很简单,就是通过一个浮动按钮实现在两个应用之间一键切换,但是非常 ...

  7. go语言练习:sha256、sha512哈希算法

    package main import ( "fmt" "crypto/sha256") func main() { str:="test hash. ...

  8. PHP剔除删除掉危险字符

    本文出至:新太潮流网络博客 /** * [剔除掉危险字符] * @E-mial wuliqiang_aa@163.com * @TIME 2017-04-07 * @WEB http://blog.i ...

  9. MySQL升级后 MySQL 5.7 时间不兼容问题

  10. 转:在ASP.NET MVC中通过URL路由实现对多语言的支持

    对于一个需要支持多语言的Web应用,一个很常见的使用方式就是通过请求地址来控制界面呈现所基于的语言文化,比如我们在表示请求地址的URL中将上语言文化代码(比如en或者en-US)来指导服务器应该采用怎 ...