本文章在纯css按钮,完美兼容浏览器 的基础上延伸的,直接贴上代码,有需要的朋友自查。
var is_click = false; var reresh_url = '/index.php/admin/code/index2'; var default_regs = {'num':/^[0-9]+\.{0,1}[0-9]{0,2}$/, 'tel':/^([0-9]{11})?$/, 'cn':/^[\u4E00-\u9FA5]+$/, 'email':/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, 'qq':/^[0-9]{4,12}/} $(document).ready(function(){ $('.input').focus(function(){ hidde_error(); }); }); function submit(form_id, submit_btn_id){ if(is_click == true){ return; } init_btn(submit_btn_id); var method = $('#'+form_id).attr('method'); var url = $('#'+form_id).attr('action'); var param = $('#'+form_id).serializeArray(); if(!check_val(form_id)){ recover_bnt(submit_btn_id); return; } $.ajax({ type: method, url: url, data: param, dataType: 'json', error:function(){ recover_bnt(submit_btn_id); }, success: function(data){ recover_bnt(submit_btn_id); if(data.error == 0){ // alert(data.msg); show_state(4, data.msg); return ; } reresh_code(); show_error(data.msg); } }); } /**********************************************************************************************************form check************************************************************************************/ function check_val(form_id){ var is_check = true; $('#'+form_id).find('.check').each(function(){ var input_val = $(this).val(); var theme = $(this).attr('theme'); var params = init_params($(this)); var check_result = do_checking(theme,input_val, params); if(!check_result){ is_check = false; return false; } }); return is_check; } function do_checking(theme, input_val, params){ var check_all = true; for(var key in params){ var check_func = 'check_'+key; var check = true; if(function_exists(check_func)){ check = eval(check_func)(theme, input_val, params[key]); } if(!check){ check_all = false; break; } } return check_all; } function init_params(node){ var require = attribute_exists(node,'require')?node.attr('require'):false; var max = attribute_exists(node,'max')?node.attr('max'):false; var min = attribute_exists(node,'min')?node.attr('min'):false; var reg = attribute_exists(node,'reg')?node.attr('reg'):false; var params = {'require':require, 'max':max, 'min':min, 'reg':reg} return params; } function check_require(theme, input_val, require){ var is_check = true; if(require && (input_val =='' || input_val == null)){ show_error(theme+'不能为空'); is_check = false; } return is_check; } function check_max(theme, input_val, max){ var is_check = true; if(parseInt(max) < str_length(input_val)){ show_error(theme+'最多'+max+'字符'); is_check = false; } return is_check; } function check_min(theme, input_val, min){ var is_check = true; if(parseInt(min) > str_length(input_val)){ show_error(theme+'至少'+min+'字符'); is_check = false; } return is_check; } function check_reg(theme, input_val, reg){ var is_check = true; var func_name = 'reg_'+reg; if(reg == '' || reg ==null || reg == false){ is_check = true; }else if(default_regs.hasOwnProperty(reg)){ is_check = reg_default(theme, input_val, default_regs[reg]); }else{ is_check = reg_type(theme, input_val, reg); } return is_check; } function reg_default(theme, input_val, regExp){ var is_check = true; if(!regExp.test(input_val)){ show_error(theme+'格式不正确'); is_check = false; } return is_check; } function reg_type(theme, input_val, reg){ return true; } /**********************************************************************************************************ajax form************************************************************************************/ function reresh_code(){ $('.img_code').attr('src',reresh_url); } function recover_bnt(submit_btn_id){ is_click = false; $('#'+submit_btn_id).removeClass('loading'); } function init_btn(submit_btn_id){ is_click = true; $('#'+submit_btn_id).addClass('loading'); } function hidde_error(){ $('.error').slideUp(); } function show_error(msg){ $('.error').html(msg); $('.error').slideDown(); } /* * 状态弹出框函数 * @param {Object} i * @param {Object} msg */ function show_state(i,msg){ var tip = ""; switch(i){ case 1: tip = "服务器繁忙,请稍后再试。"; break; case 4: tip = "设置成功!"; break; case 5: tip = "数据拉取失败"; break; case 6: tip = "正在加载中,请稍后..."; break; } if(msg != ''){ tip = msg } ZENG.msgbox.show(tip, i, 1500); } /**********************************************************************************************************Base Method************************************************************************************/ function str_length(str){ return str.length; } function function_exists(func_name){ var exists = false; if(func_name in window){ exists = true; } return exists; } function attribute_exists(obj, attr_name){ return typeof(obj.attr(attr_name))!="undefined"; }
相关推荐
本文件属于文章《原生javascript表单验证实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
自已写的框架,用起来非常方便实用,有问题欢迎留言,开源的配置来太麻烦,学习成本比较高,我自己写的很简单实用!
原创,自己写的一套表单验证js文件。 /*使用说明 * 示例 邮箱"> * 字段注释 comments="邮箱" * 非空 notnull="true" * 最大长度 maxlength="30" * 负小数 datatype="ldouble" * 非负小数 datatype="rdouble" * 负...
本人制作的jquery表单验证插件JfomValidate 功能:可以完成绝大数页面的脚本验证效果,压缩包里有示例和调用说明。 压缩包包含文件: index.html -- 说明及示例 JfomValidate.min.js -- 插件 jquery-1.3.2.min.js -...
原创: 因项目需要,自己封装的一个javascript 表单验证类.
以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下。作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创。至于九至第十五条却是本人自己加的哦。而且由于本人水平...
jquery多功能表单验证2.0(原创) jquery仿app产品筛选列表 jquery仿外卖点餐购物车页面代码 jQuery仿微信支付密码输入框(修改版) jQuery分步步骤 jQuery各种验证码 jQuery购物车功能 jQuery基于百度地图API的地址...
遇到网页设计问题的童鞋也可以提问,这些年总结了一些学生网页制作的经验:一般的网页作业需要融入以下知识点: div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频Flash的应用、ul li、下拉...
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章:Ext ...
web网页课程设计,用了css,HTML和JavaScript写的,有css动画,css布局应用,音乐播放器,登录注册表单的正则验证,还JavaScript的基本操作的评论墙。是一个入门级学习的比较好的前端网页。 说明:其中的文本展示...
但是这块地方,表单验证及添加地址信息提交到地址列表中,有让我一阵子头疼。 首先就是表单验证,当你提交表单时触发formSubmit事件,对表单进行验证。如果未输入内容或者输入内容格式有误,通过wx.showModal()给...
完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...
4、后台增加积分兑换比例的设置表单; 5、修复用户兑换积分程序模块的BUG; 6、增强系统坚固性安全性、防SQL注入、防跨站脚本攻击; 2014-10-15 1、删除站内信功能; 2、优化模版代码; 3、修复评论模块的BUG; 4、新增...