`

form表单为空校验js实现

阅读更多
function notNull(id) {
	var flag = true;  
    var data = jQuery("#"+id+" input[notNull]"); 
    var textareaData = jQuery("#"+id+" textarea[notNull]");
    data = jQuery.merge(data,textareaData);//合并集合
    var project;
    data.each(function(){
    	project = $(this);
    	
    	
   		if($(this).val()==""){ 
   			/* $.messager.alert('', $(this).attr('notNull')+"不能为空!", 'warning', function() {
   				
       		 }); */
       		alert($(this).attr('notNull')+"不能为空!");
   			project.focus();//聚焦
   			flag = false;   
   			return flag; 
   		}  
    	//校验身份证、邮箱
    	/* if($(this).attr("validateId")=="true"){
    		if(isIdentityCard($(this).val())==false){
    		   $(this).focus(); 
    		   flag = false;  
               return flag;  
    		}
    	}else if($(this).attr("validateEmail")=="true"){
    		if(isEmail($(this).val(),project)==false){
 			   flag = false;  
               return flag;  
     		}
    	} */
        if ($(this).attr("type")=="checkbox"){  
            var name = $(this).attr("name");  
            if ($("input:checked[:checkbox][name='"+name+"']").length==0){  
            	/* $.messager.alert('', $(this).attr('notNull')+"不能为空!", 'warning', function() {
            		project.focus();//聚焦
	       	   });  */
	       		alert($(this).attr('notNull')+"不能为空!");
	   			project.focus();//聚焦
            	flag = false;   
            	return flag; 
            }  
        }  
    });  
   if(!flag) return flag;
    var selectData = jQuery("#"+id+" select[notNull]");  
    selectData.each(function(){  
        if(isEmpty($(this).val())){  
        	/* $.messager.alert('', $(this).attr('notNull')+"不能为空!", 'warning', function() {
        		project.focus();//聚焦
      		 });  */
      		alert($(this).attr('notNull')+"不能为空!");
    		project.focus();//聚焦
        	flag = false;   
        	return flag; 
        }  
    });  
    return flag;  
}

function save() {
	if(!notNull('form')) {
		return false;
	}
}



<form id="form">
		
			<table class="wideTable">
				<tr>
					<td width="100px">联系人</td><td><input name="contact" notNull="联系人"/></td>
					<td width="100px">联系电话</td><td><input name="mobile" notNull="联系电话"/></td>
				</tr>
				<tr>
					<td width="100px" colspan="2"><input name="name1" type="button" value="保存" onclick="save();"></td>
					<td width="100px" colspan="2"><input type="button" name="name2"
									value="返回" onclick=""/></td>
				</tr>
			</table>
		</form>
分享到:
评论

相关推荐

    原生JS经典小项目-form表单校验

    通过这个原生JS的小项目,你可以深入理解表单校验的原理,掌握如何使用JavaScript实现高效且友好的表单验证机制。这不仅提高了网页应用的安全性,还能提升用户的操作体验。在实际开发中,这样的技能是必不可少的。

    JavaScript的form表单验证中的身份证校验.pdf

    ### JavaScript中的身份证校验知识点详解 #### 一、引言 在进行Web应用程序开发时,表单验证是一项非常重要的功能,它可以确保用户输入的数据格式正确并符合预期的要求。其中,身份证号码验证尤其重要,因为它涉及...

    Form验证表单Form验证表单

    在网页开发中,表单(Form)验证是一个关键环节,用于确保用户输入的数据符合预设的规则和标准,从而防止无效数据的提交,提高用户体验,同时也保护了服务器资源免受恶意攻击。`Form验证表单`是这个过程的核心,本文...

    jQuery的form表单校验插件

    总的来说,jQuery的form表单校验插件极大地简化了前端表单验证的工作,提高了开发效率,同时也为用户提供了一流的交互体验。结合`jQuery-validation-1.13.1`中的示例和文档,开发者可以迅速掌握并应用这个插件,构建...

    使layui.js form 可主动验证表单是否通过

    使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486

    【JavaScript源代码】antd+vue实现动态验证循环属性表单的思路.docx

    在JavaScript和Vue.js的开发环境中,Ant Design Vue (antd-vue)是一个常用UI库,用于构建用户界面。本文将深入探讨如何使用antd-vue和Vue实现动态验证循环属性的表单,满足以下需求: 1. **名称**、**对比项**和**...

    基于VueElementUI快速创建生成表单进行数据校验获取表单数据

    console.error("表单校验失败"); } }); }, } ``` 总结来说,Vue和Element UI结合使用,可以高效地构建动态表单,实现数据验证和数据获取。Element UI的组件库为开发者提供了丰富的UI组件,使得表单设计变得简洁...

    JS表单验证 JS校验代码 JS数据类型校验

    总结,JS表单验证和数据类型校验是Web开发中的基础技能,通过`validateForm.js`这样的工具,我们可以更高效地实现表单的统一验证,提高用户体验,并确保数据的准确性。同时,了解并熟练运用这些技术,对于提升Web...

    【JavaScript源代码】Vue之ElementUI Form表单校验.docx

    ### Vue之ElementUI Form表单校验 #### 表单校验的重要性 在前端开发过程中,表单校验是一项至关重要的功能。它不仅能够确保用户输入的数据格式正确、符合预期,还能提高用户体验,减少服务器端的压力。ElementUI...

    使用FormValidation进行表单验证

    `FormValidation`是一个强大的JavaScript库,它结合了`jQuery`和`Bootstrap`框架,使得表单验证变得更加简单易用。本文将详细介绍如何使用`FormValidation`进行表单验证,并探讨与`jQuery`和`Bootstrap`的集成。 ...

    vue elementUI 表单校验的实现代码(多层嵌套)

    最后,掌握Element UI表单校验的实现,需要对Vue.js的响应式原理和Element UI组件库有一定的了解。通过上述的实例演示和知识点介绍,相信读者已经可以对多层嵌套表单的校验有了一定的认识,并能够将其应用到实际项目...

    仿ElementUI实现一个Form表单的实现代码

    本文重点介绍了Vue.js框架下,如何设计和实现Form表单及其各个组件,包括Form、FormItem和Input组件,以及表单验证的实现。 ### ElementUI表单基本用法 首先,我们来看看ElementUI中Form表单的基本用法。ElementUI...

    Vue+Element实现动态生成新表单并添加验证功能

    本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成,并为这些动态生成的表单添加了验证功能。 知识点一:Vue.js框架基础 Vue.js是一个构建用户界面的渐进式JavaScript框架,核心库仅关注视图层,易于...

    原生js form表单美化插件表单元素input select下拉框

    本主题将深入探讨如何使用原生JavaScript对form表单进行美化,并对input输入框和select下拉框进行优化。 一、表单基础 1. 表单元素:HTML中的&lt;form&gt;标签定义了一个表单,其中可以包含各种表单控件,如(输入框)、...

    vue-form表单验证是否为空值的实例详解

    总结一下,这个 Vue-form 表单验证实例展示了如何利用 Vue 的响应式系统和事件处理来实现表单验证。通过绑定数据、监听表单事件以及编写验证逻辑,我们可以创建出一个能够有效处理用户输入并提供反馈的交互式表单。...

    微信小程序例子——使用form表单获取输入框数据

    微信小程序中的`&lt;form&gt;`表单组件为开发者提供了便捷的数据收集和处理方式,结合数据绑定、事件监听、数据校验以及文件上传等功能,可以构建出丰富的用户交互体验。通过理解和熟练运用这些知识点,开发者能够更好地...

    【JavaScript源代码】element多个表单校验的实现.docx

    ### JavaScript 源代码:Element 多个表单校验的实现 在Web开发中,表单验证是一项非常重要的功能,它可以确保用户输入的数据符合预期的格式或规则,从而提高用户体验并减少服务器端的压力。当涉及到多个表单的校验...

    Bootstrap实现登录校验表单(带验证码)

    5. `bootstrapValidator.min.js`:Bootstrap Validator的JavaScript文件,用于实现表单验证功能。 接下来,HTML结构应该包括一个表单,该表单包含输入字段(如用户名和密码),以及一个验证码部分。在给出的代码中...

    原生js实现表单验证(提交后验证)

    原生JavaScript实现的表单验证可以避免对第三方库的依赖,使得代码更加轻量级且易于理解和维护。下面将详细介绍如何使用JavaScript进行表单验证,并通过一个具体的实例来阐述这一过程。 首先,我们需要创建一个HTML...

    ext_表单提交_数据校验

    在Ext JS框架中,`Ext.form.TextField`是一种用于收集用户输入的基本控件,它提供了丰富的配置选项来实现数据校验。例如,在示例中,通过设置`allowBlank: false`,确保了字段不允许为空;`emptyText`定义了当字段为...

Global site tag (gtag.js) - Google Analytics