公司-->保存时验证数据是否保存重复

本文介绍了一个使用JavaScript进行前端校验的案例,并通过Struts框架的Ajax功能实现与后端交互的过程。该案例确保在保存特定记录前,系统中不存在相同Article、工段和部门的记录。

js内容:

//提交校验,如果article,工段,部门一致则不能进行保存
function checkSave(){
	var primaryId=$("#primaryId").val();
	var articleId=$("#hidden_articleId").val();
	var sectionId=$("#sectionId").val();
	var departmentId=$("#departmentId").val();
	var isok=true;
	$.ajax({
		type : "post",
		url : contentPath + "/ajax/checkSpecialProductionPHSetArticleAndSectionAndDepartmentExist.do",
		data : {
			articleId : articleId,
			sectionId : sectionId,
			departmentId : departmentId,
			primaryId : primaryId
		},
		async : false,
		success : function(data) {
			if (data == 'true') {
				alertE('当前已经存在相同的Article,工段,部门的记录,不能保存,请检查.');
				isok = false;
			}
		}
	});
	return isok;
}


action内容:

package gts.erp.action.ajax;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.oletech.triangle.component.FormBean;

import gts.erp.action.base.ERPProxyAction;

public class CheckSpecialProductionPHSetArticleAndSectionAndDepartmentExistAction extends ERPProxyAction {

	@Override
	protected ActionForward doExecute(FormBean parameterFB, ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
		
		FormBean formBean = this.getERPServiceDelegation().getMasterProductionScheduleService().checkSpecialProductionPHSetArticleAndSectionAndDepartmentExist(parameterFB);
		
		String isExist = formBean.getCellBeanValue("isExist");
		
		PrintWriter pw = response.getWriter();
		pw.print(isExist);
		pw.flush();
		return null;
	}

}


impl内容:

/** 
	 * 判断article,工段,部门是否重复添加 
	 * @author zhuyz 
	 * @date 2016年11月19日17:48:16
	 * @param dataBean
	 * 			FormBean => key : "parameterFB"
	 *          	 CellBean key : primaryId,articleId,sectionId,departmentId
	 * @return FormBean
	 *          TableBean => key : "TN_PMC_PH_SETUP"
	 *         		        CellBean key : CN_ID,CR_ARTICLE_ID, CR_SECTION_ID, CN_LEADTIME, CN_PMC_PH_QTY,CR_DEPARTMENT_ID......
	 */
	public FormBean checkSpecialProductionPHSetArticleAndSectionAndDepartmentExist(FormBean formBean) {
		FormBean returnFB = new FormBean();
		String primaryId = formBean.getCellBeanValue("primaryId");
		String articleId = formBean.getCellBeanValue("articleId");
		String sectionId = formBean.getCellBeanValue("sectionId");
		String departmentId = formBean.getCellBeanValue("departmentId");
		String isExist = "false";
		try {
			if (StringUtils.isNotBlank(articleId) && StringUtils.isNotBlank(sectionId) && StringUtils.isNotBlank(departmentId)) {
				//查询数据库,如果存在三个条件都相同的数据,禁止添加
				CondSetBean csbPhSetup = new CondSetBeanJustAnd();
				csbPhSetup.addCondBean(new CondBeanEqual("CR_ARTICLE_ID", articleId));
				csbPhSetup.addCondBean(new CondBeanEqual("CR_SECTION_ID", sectionId));
				csbPhSetup.addCondBean(new CondBeanEqual("CR_DEPARTMENT_ID", departmentId));
				if (StringUtils.isNotEmpty(primaryId)) {
					csbPhSetup.addCondBean(new CondBeanNotEqual(TriangleDefinition.COLUMN_NAME_CN_ID, primaryId));
				}
				TableBean pmcPhSetupTB = this.baseDAO.queryForTableBean(new ClassPOJO("TN_PMC_PH_SETUP"), csbPhSetup);
				if (pmcPhSetupTB.size() > 0) {
					isExist = "true";
				}
			}
			returnFB.addCellBean(new CellBean("isExist", isExist));
		} catch (Exception e) {
			TriangleBLHelper.printExceptionLog(log, e);
			e.printStackTrace();
			throw new RuntimeException("**** Run time Exception!****");
		}
		return returnFB;
	}




<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加收费项目信息</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"> <style> .x-body { padding: 20px; } .x-red { color: red; } .layui-form-item { margin-bottom: 15px; } </style> </head> <body> <div id="app"> <div class="x-body"> <form class="layui-form layui-form-pane"> <div class="layui-tab layui-tab-brief"> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>所属小区 </label> <div class="layui-input-block"> <input type="text" v-model="formData.x_id" placeholder="请输入所属小区" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目编号 </label> <div class="layui-input-block"> <input type="text" v-model="formData.m_count" placeholder="请输入项目编号" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目名称 </label> <div class="layui-input-block"> <input type="text" v-model="formData.m_name" placeholder="请输入项目名称" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>创建时间 </label> <div class="layui-input-inline"> <input class="layui-input" v-model="formData.create_Time" placeholder="创建时间" id="checkInDate" lay-verify="required"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-primary" type="button" @click="goBack">取消</button> <button class="layui-btn" type="button" @click="submitForm">保存</button> </div> </div> </div> </div> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script> <script> new Vue({ el: '#app', data: { formData: { id: '', x_id: '', m_count: '', m_name: '', create_Time: '' } }, mounted() { this.initLayui(); }, methods: { initLayui() { layui.use(['form', 'laydate', 'layer'], () => { window.layer = layui.layer; const laydate = layui.laydate; // 初始化日期选择器 laydate.render({ elem: '#create_Time', max: '2099-12-31', done: (value) => { this.formData.create_Time = value; } }); layui.form.render(); }); }, submitForm() { const form = layui.form; // 验证表单 form.verify(); if (!this.validateForm()) { return; } // 获取现有数据 const houses = JSON.parse(localStorage.getItem('ProData')) || []; // 添加数据 this.formData.id = Date.now().toString(); houses.unshift(this.formData); // 保存到localStorage localStorage.setItem('proData', JSON.stringify(houses)); layer.msg('添加成功', {icon: 1}, () => { window.location.href = 'pro_list.html'; }); }, validateForm() { if (!this.formData.x_id) { layer.msg('请输入所属小区', {icon: 5}); return false; } if (!this.formData.m_name) { layer.msg('请输入名称', {icon: 5}); return false; } if (!this.formData.m_name) { layer.msg('项目名称不能为空', {icon: 5}); return false; } return true; }, goBack() { window.location.href = 'pro_list.html'; } } }); </script> </body> </html> 该代码中的创建时间未能显示为日期选择,给出改后代码
最新发布
07-04
<think>好的,我现在需要解决用户的问题:当前代码中的创建时间输入框未能显示为日期选择器,需要修改代码使其正常显示。首先,我需要仔细分析用户提供的代码,找出问题所在。首先看HTML部分,创建时间的输入框是:```html<inputclass="layui-input"v-model="formData.create_Time"placeholder="创建时间"id="checkInDate"lay-verify="required">```然后在JavaScript的`initLayui`方法中,初始化日期选择器的代码是:```javascriptlaydate.render({elem:'#create_Time',max:'2099-12-31',done:(value)=>{this.formData.create_Time=value;}});```这里发现一个明显的问题:输入框的`id`属性是`checkInDate`,但日期选择器初始化时指定的`elem`是`#create_Time`,这两个不匹配,导致日期选择器无法正确绑定到输入框上。接下来,检查其他可能的问题。例如,是否正确引入了layui的日期组件,是否在`layui.use`中正确加载了`laydate`模块。用户代码中`layui.use(['form','laydate','layer'],...)`已经包含了`laydate`,所以模块加载没问题。另外,输入框的`v-model`绑定到`formData.create_Time`,这部分是正确的,只要日期选择器能正确赋值,数据绑定应该没问题。还有,`validateForm`方法中存在重复的检查,用户可能复制代码时导致重复,虽然不影响日期选择器,但需要修正。所以,主要修改点是将日期选择器的`elem`参数与输入框的`id`匹配,即`elem:'#checkInDate'`,同时确保输入框的`id`正确设置。另外,检查`localStorage`的键名是否一致,用户代码中在保存时使用`localStorage.setItem('proData',...)`,而获取时使用`JSON.parse(localStorage.getItem('ProData'))`(注意大小写),这会导致数据无法正确读取,因为`ProData`和`proData`是不同的键名,需要统一为小写的`proData`。此外,`validateForm`中的重复检查需要删除,避免冗余提示。总结修改步骤:1.修正日期选择器的`elem`为输入框的`id`(`#checkInDate`)。2.统一`localStorage`的键名为`proData`(小写)。3.修复`validateForm`中的重复检查。现在,根据这些分析,编写修改后的代码,并确保日期选择器能正确显示和绑定。</think> 以下是修正后创建时间能显示为日期选择器的代码(关键修改已标注注释): ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加收费项目信息</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"> <style> .x-body { padding: 20px; } .x-red { color: red; } .layui-form-item { margin-bottom: 15px; } </style> </head> <body> <div id="app"> <div class="x-body"> <form class="layui-form layui-form-pane"> <div class="layui-tab layui-tab-brief"> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>所属小区 </label> <div class="layui-input-block"> <input type="text" v-model="formData.x_id" placeholder="请输入所属小区" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目编号 </label> <div class="layui-input-block"> <input type="text" v-model="formData.m_count" placeholder="请输入项目编号" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目名称 </label> <div class="layui-input-block"> <input type="text" v-model="formData.m_name" placeholder="请输入项目名称" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>创建时间 </label> <div class="layui-input-inline"> <!-- 关键修改1:id与日期选择器elem绑定 --> <input class="layui-input" v-model="formData.create_Time" placeholder="点击选择日期" id="checkInDate" lay-verify="required"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-primary" type="button" @click="goBack">取消</button> <button class="layui-btn" type="button" @click="submitForm">保存</button> </div> </div> </div> </div> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script> <script> new Vue({ el: '#app', data: { formData: { id: '', x_id: '', m_count: '', m_name: '', create_Time: '' } }, mounted() { this.initLayui(); }, methods: { initLayui() { layui.use(['form', 'laydate', 'layer'], () => { window.layer = layui.layer; const laydate = layui.laydate; const form = layui.form; // 关键修改2:日期选择器elem与输入框id匹配(#checkInDate) laydate.render({ elem: '#checkInDate', // 对应输入框的id max: '2099-12-31', done: (value) => { this.formData.create_Time = value; // 选择日期后更新数据 } }); form.render(); // 重新渲染表单组件 }); }, submitForm() { const form = layui.form; // 验证表单 form.verify(); if (!this.validateForm()) { return; } // 关键修改3:统一localStorage键名(proData,避免大小写不一致) const proData = JSON.parse(localStorage.getItem('proData')) || []; // 添加数据(生成唯一id) this.formData.id = Date.now().toString(); proData.unshift(this.formData); // 新数据添加到数组头部 // 保存到localStorage localStorage.setItem('proData', JSON.stringify(proData)); layer.msg('添加成功', {icon: 1}, () => { window.location.href = 'pro_list.html'; // 跳转回列表页 }); }, validateForm() { if (!this.formData.x_id) { layer.msg('请输入所属小区', {icon: 5}); return false; } if (!this.formData.m_count) { // 补充对m_count的验证 layer.msg('请输入项目编号', {icon: 5}); return false; } // 关键修改4:移除重复的m_name检查 if (!this.formData.m_name) { layer.msg('项目名称不能为空', {icon: 5}); return false; } if (!this.formData.create_Time) { // 新增对日期的验证 layer.msg('请选择创建时间', {icon: 5}); return false; } return true; }, goBack() { window.location.href = 'pro_list.html'; } } }); </script> </body> </html> ``` ### 修改说明: 1. **日期选择器绑定修复**:输入框的`id`为`checkInDate`,日期选择器初始化时`elem: '#checkInDate'`,确保两者正确绑定,点击输入框会弹出日期选择面板。 2. **localStorage键名统一**:原代码中获取数据时使用`'ProData'`(大写P),保存时使用`'proData'`(小写p),修改为统一的`'proData'`(小写),避免数据无法正确读取。 3. **表单验证完善**:补充对`m_count`(项目编号)和`create_Time`(创建时间)的验证,确保所有必填字段都被检查。 4. **重复验证移除**:原`validateForm`中对`m_name`的检查重复,移除冗余代码,避免重复提示。 ### 验证方法: 1. 打开页面,点击“创建时间”输入框,应弹出layui的日期选择面板。 2. 选择日期后,输入框会显示选中的日期,且`formData.create_Time`会同步更新。 3. 填写所有必填字段并提交,数据保存到`localStorage`的`proData`中,跳转回列表页后可看到新增的记录。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值