`

JS表单验证(原创)

 
阅读更多

   本文章在纯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";
}

 

分享到:
评论

相关推荐

    JS表单验证插件(原创)

    在创建一个原创的JS表单验证插件时,首先需要考虑以下核心功能: 1. **配置简单**:用户应该能够轻松地配置验证规则,而不需要深入学习复杂的API。这可能通过提供直观的选项对象或链式调用来实现。 2. **灵活性**...

    《原生javascript表单验证实例教程》源码

    本文件属于文章《原生javascript表单验证实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。

    jsp表单验证js文件

    原创,自己写的一套表单验证js文件。 /*使用说明 * 示例 邮箱"&gt; * 字段注释 comments="邮箱" * 非空 notnull="true" * 最大长度 maxlength="30" * 负小数 datatype="ldouble" * 非负小数 datatype="rdouble" * 负...

    【原创】jquery表单验证插件

    本人制作的jquery表单验证插件JfomValidate 功能:可以完成绝大数页面的脚本验证效果,压缩包里有示例和调用说明。 压缩包包含文件: index.html -- 说明及示例 JfomValidate.min.js -- 插件 jquery-1.3.2.min.js -...

    可视化表单设计器拖拽生成表单(原创).zip

    "压缩包子文件的文件名称列表"中提到的"designer"可能是指表单设计器的源代码或者配置文件,这通常包含了大量的CSS样式、JavaScript脚本以及可能的数据库配置,用于支持设计器的运行和表单的存储与展示。对于开发者...

    1 妙味课堂原创JavaScript视频教程 JS基础教程5课资料

    妙味课堂的这个原创JavaScript视频教程,旨在帮助初学者系统地学习和掌握JS的基础知识。 教程共分为5课,涵盖了JavaScript的基础内容,以下是每一课可能涉及的关键知识点: **第1课:JavaScript入门** - ...

    javascript 原创入门教程(ppt格式)

    这包括事件监听、表单验证以及如何通过JavaScript处理表单提交,确保用户输入的有效性和安全性。理解这一部分对于构建用户友好的交互式网页至关重要。 第十一章是“转圆圈动画效果的制作”。这一章节会介绍...

    [浪曦原创]Struts系列 第5讲 Struts的验证框架Validate使用续一(zk001)

    客户端验证主要通过JavaScript来完成,它可以在用户提交表单前就检查数据,提供即时反馈,减少不必要的服务器请求。而服务器端验证则是必须的,因为客户端验证可以被绕过,服务器端验证可以防止恶意用户提交非法数据...

    原创网站源码毕业课程网站模板 登录注册用户预约功能网站源码 html+css+js+php+mysql

    3. **JavaScript**: `js`在`index.html`等文件中可能用于实现交互效果,如表单验证、动态内容加载等。JavaScript是网站动态功能的核心,它允许用户与页面进行实时交互。 4. **PHP**: PHP是一种服务器端脚本语言,...

    asp+ajax做的简单登陆验证系统演示,数据库是access的

    这是一个基于ASP(Active Server Pages)和AJAX(Asynchronous JavaScript and XML)技术构建的简单登录验证系统的演示项目。在这个系统中,用户界面是静态的HTML页面(login.html),后端处理逻辑由ASP脚本实现,...

    js基础课程相关书籍(一)

    7. 表单和表单验证:讲解如何使用JavaScript处理表单数据,以及如何进行前端表单验证。 8. BOM(浏览器对象模型):探索BOM中的对象和方法,例如操作窗口、地址栏、历史记录等。 9. AJAX与JSON:介绍异步...

    Struct.Hibernate.DisplayTag标签.js.Div.css.第4讲(zk原创).rar

    它通常与HTML和CSS一起使用,实现网页的动态效果、表单验证以及与服务器的异步通信(AJAX)。 5. **CSS (Div/CSS)**:CSS(层叠样式表)用于控制网页的布局和样式。Div 是HTML中的一个区块元素,常用来作为页面布局...

    jquer实例大全【清晰版】

    jquery多功能表单验证2.0(原创) jquery仿app产品筛选列表 jquery仿外卖点餐购物车页面代码 jQuery仿微信支付密码输入框(修改版) jQuery分步步骤 jQuery各种验证码 jQuery购物车功能 jQuery基于百度地图API的地址...

    小程序源码(无后台)_易打卡 表单设计.rar

    同时,表单验证也是必不可少的,防止无效或错误的数据提交。 3. **无后台运行**:这里的“无后台”可能是指小程序没有独立的服务器后台支持,而是依赖于微信或其他平台提供的云服务。这种模式下,小程序的数据存储...

    智能AI文章伪原创.zip

    最后,`ai.js`是一个JavaScript文件,它负责处理前端的交互逻辑。在这个项目中,JavaScript可能用来监听用户操作,如点击“生成伪原创”按钮,然后发送AJAX请求到`get-ai.php`,并将返回的结果动态更新到页面上。...

    go.js文件,去水印,不再有丑陋的水印,完美!

    通过JavaScript,开发者可以实现动态交互、表单验证、页面动画等多种功能。在这个场景中,"go.js"可能是用于处理网页元素,尤其是那些带有水印的图片或文本,以消除或替换水印内容。 去水印的技术通常分为两类:...

    JQuery 在表单提交之前修改 提交的值 <font color=red>原创</font>

    在Web开发中,表单提交是与用户交互的常见方式之一,而JQuery作为一个流行的JavaScript库,极大地简化了DOM操作和事件处理。本文将详细介绍如何在表单提交之前使用JQuery修改表单中的数据值。 首先,JQuery是一个轻...

    [原创]wicket开发手记(三)数据校验

    尽管可以通过前端JavaScript进行初步校验,但最终的数据验证还是需要在服务器端完成。下面介绍两种常见的校验方法:检查用户是否填写了内容以及检查输入内容的长度。 1. **检查是否填写内容**: 在Wicket中,可以...

    wordpress主题Wopus原创主题Flight

    - **表单验证**:前端表单验证可以即时反馈错误信息给用户,提升用户体验。 - **异步加载**:使用Ajax技术进行异步加载数据,减少页面刷新次数,提高用户体验。 - **响应式布局控制**:利用JavaScript监听窗口大小...

Global site tag (gtag.js) - Google Analytics