`
mengqingyu
  • 浏览: 333035 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

jQuery通用表单非空、数值验证和编辑回显处理

阅读更多
/**
 * 调用方式如:if(notNull('enterpriseEdit')==false)return;
 * 1.在需要加非空验证的input标签上直接添加例如notNull=标签名;
 * 2.checkbox类型的input只需要在首个input中加notNull=标签名;
 * 3.select标签中notNull=标签名;
 * @param id 组件的父级组件id,例如table、form的id
 * @returns {Boolean}
 */
function notNull(id){
	var flag = true;
	var data = jQuery("#"+id+" input[notNull]");
	data.each(function(){
		if($(this).val()==""){
			Ext.Msg.alert('提示',$(this).attr('notNull')+"不能为空!");
			$(this).focus();
			flag = false; 
			return flag;
		}
		if ($(this).attr("type")=="checkbox"){
			var name = $(this).attr("name");
			if ($("input:checked[:checkbox][name='"+name+"']").length==0){
				Ext.Msg.alert('提示',$(this).attr('notNull')+"不能为空!");
				flag = false;
				return flag;
			}
		}
	});
	var selectData = jQuery("#"+id+" select[notNull]");
	selectData.each(function(){
		if($(this).val()==""){
			Ext.Msg.alert('提示',$(this).attr('notNull')+"不能为空!");
			$(this).focus();
			flag = false; 
			return flag;
		}
	});
	return flag;
}

/**
 * 在需要加数字验证的input标签上直接添加例如isDigit=true,调用方式如:isDigit('enterpriseEdit');
 * @param id 组件的父级组件id,例如table、form的id
 */
function isDigit(id){
	var data = jQuery("#"+id+" input[isDigit]");
	data.each(function(){
		$(this).bind('keypress', function (evt) {
		    // 取得键入的实际字符。
		    var char = String.fromCharCode(evt.keyCode);
		    // 如果不是数字,就不允许输入
		    if (!/^(\d*|-)\.{0,1}\d{0,2}$/.test(char)) {
		        evt.preventDefault();
		    }
		});
		$(this).bind('afterpaste', function () {
			$(this).val($(this).val().replace(/[^\d-\.]/g,''));
		});
		$(this).bind('keyup', function () {
			$(this).val($(this).val().replace(/[^\d-\.]/g,''));
		});
	})
}

/**
 * 表单修改回显,注意:要求表单name和json的key值必须对应,推荐使用数据库字段名
 * @param id 表单组件父级组件ID,如form或是table的id
 * @param json 结果集
 */
function initFormHTML(id,json){
	 var data = $("#"+id+" *[name]");
	 data.each(function() { 
		var value = json[$(this).attr("name")];
    	if(value != null){
        	var type = $(this).attr("type");          
        	if(type=="checkbox"||type=="radio"){
           	var valueArray = value.split("#");
               for(var i=0; i<valueArray.length;i++){
               	if($(this).val() == valueArray[i])
                		$(this).attr("checked","checked");
              	 }
            }
            else{
           	 $(this).val(value);
            }
    	}
  	 });
}

/**
 * 表单回显,注意:要求页面span或td等组件的ID和json的key值必须对应,推荐使用数据库字段名
 * @param id 回显页父级组件ID,如table的id
 * @param json 结果集
 */
function initPageHTML(id,json){
	var data = $("#"+id+" *[id]");
	data.each(function() { 
		var value = json[$(this).attr("id")];
    	if(value != null){
    		$(this).html(value);
    	}
	});
}
分享到:
评论

相关推荐

    uni-app 富文本编辑 回显富文本和修改富文本!

    uni-app 富文本编辑 回显富文本和修改富文本!uni-app 富文本编辑 回显富文本和修改富文本!uni-app 富文本编辑 回显富文本和修改富文本!uni-app 富文本编辑 回显富文本和修改富文本!uni-app 富文本编辑 回显富...

    select,radio 表单回显避免使用jquery载入赋值 .txt

    select,radio 表单回显避免使用jquery载入赋值

    jquery多个图片上传和回显

    本文将深入探讨如何使用jQuery实现多个图片的上传和回显功能,同时支持图片的删除与回显。 首先,让我们了解“图片上传”这一概念。在Web应用中,用户通常需要上传图片到服务器进行存储或展示。为了实现这个功能,...

    js实现form表单自动回显功能

    js实现form表单自动回显功能

    jquery上传后回显

    总结起来,"jquery上传后回显"是一个前端与后端协同完成的任务,前端利用jQuery和相关插件实现异步文件上传,后端接收并处理文件,然后返回数据供前端回显图片。整个过程需要考虑用户体验、安全性以及性能优化等多个...

    JQuery+PHP对HTML表单进行验证

    综上所述,结合JQuery和PHP的表单验证可以提供全面的防护。客户端验证提供即时反馈,提高用户体验,而服务器端验证确保数据的安全性。在实际项目中,应结合两者的优点,为用户提供既高效又安全的表单提交体验。通过...

    李顺利Struts2表单验证后回显错误信息 标签使用

    Struts2作为一款流行的Java Web框架,其在处理表单数据和验证方面有着强大的功能。在实际开发中,为了提供良好的用户体验,表单验证失败时通常需要将错误信息回显给用户。李顺利老师通过他的讲解,让我们深入理解了...

    vue表单验证.zip

    Vue -- iview Form表单验证、以及数据回显 ; Select 选择器 单选验证、以及单选之后获取整个对象的数据(表单默认选择的是Value) DatePicker 日期选择器 type="datetimerange" 表单验证、以及数据回显

    图片文件上传回显jQuery插件——插件四

    "图片文件上传回显jQuery插件——插件四"正是针对这一需求设计的工具,它简化了开发者实现这一功能的复杂度,使得图片预览和上传变得更加便捷。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、...

    select2控件回显方法

    JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。

    简单的jQuery富文本编辑器插件

    `index.html`是项目的主入口文件,通常包含HTML结构和页面的初始设置,如引入的外部资源(如jQuery和CSS文件)、编辑器的HTML结构以及与之相关的JavaScript代码。在这个例子中,我们可以预期`index.html`会包含一个...

    解决layui富文本编辑器图片上传无法回显的问题

    在使用layui富文本编辑器进行网页开发时,开发者经常会遇到一个普遍的问题,即上传图片后图片无法在富文本编辑器中正确回显的问题。这个问题困扰了不少开发者,究其原因,主要在于富文本编辑器的图片上传插件对于...

    百度webupload上传组件-关于文件编辑回显的方法整合

    百度webupload上传组件-关于文件编辑回显的方法整合

    webuploader批量添加、删除、回显编辑图片完整demo(PHP版)

    5. **回显编辑图片**:回显编辑功能是指用户上传图片后,再次编辑时能展示之前上传的图片。这需要在后端存储图片的URL或Base64编码,并在前端根据这些信息重新加载图片。 6. **PHP后端处理**:在PHP端,我们需要...

    一款jquery 表单插件还日历插件 formValidator3.1

    jQuery FormValidator 3.1 是一个强大的表单验证插件,它提供了丰富的验证规则和自定义设置,使得前端数据验证变得简单高效。同时,该插件还集成了日历组件,方便用户进行日期选择,提升用户体验。下面将详细探讨这...

    select、radio表单回显功能实现避免使用jquery载入赋值

    在不使用jQuery这类JavaScript库的情况下,我们可以通过JSP页面中的逻辑判断来实现表单回显功能,尤其是对于select和radio这类表单元素。 ### select表单回显 对于select元素,通常情况下我们希望某个option标签...

    struts2的日期回显

    综上所述,Struts2的日期回显涉及到Action设计、视图渲染、拦截器处理、结果转发以及可能的日期格式化和验证。理解并掌握这些知识点,有助于我们在实际开发中创建更友好的用户界面,提高应用的用户体验。

    antd form表单数据回显操作

    index页面有一个表格,有一个新增按钮,点击新增按钮或表格编辑弹出表单模块,如果是编辑,会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, ...

    Tomcat中一种半通用回显方法 - 先知社区1

    【标题】:“Tomcat中一种半通用回显方法 - 先知社区1”涉及的知识点主要围绕Java Web服务器Tomcat的内部工作原理以及利用反射技术进行回显操作。以下是详细解释: 1. **Tomcat与HTTP响应**: Tomcat是Apache软件...

    无回显漏洞测试及SSRF辅助平台提供DNSLOG,HTTPLOG等功能

    平台使用Java编写,提供DNSLOG,HTTPLOG等功能,辅助渗透测试过程中无回显漏洞及SSRF等漏洞的验证和利用。 主要功能 DNSLOG HTTPLOG 自定义DNS解析 DNS Rebinding 自定义HTTP Response(Response内容、状态码、Header...

Global site tag (gtag.js) - Google Analytics