<html:errors/>

本文介绍如何在JSP页面中使用&lt;html:errors/&gt;来区分不同表单的错误信息,通过设置特定的消息句柄实现精确的错误信息展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我在一个jsp里用到了两次<html:errors/>,分别在两个form表单里,可是写了两个之后<html:errors/>,点任何一个表单中的提交按钮这两个<html:errors/>都会一起显示错误信息,要想让他们分别显示自己该显示的错误信息的话,看下边解决办法

======================<html:errors>======================
Action 中 :
Java代码
ActionMessages message = new ActionMessages();
message.add(" 消息句柄 ",new ActionMessage(" 资源文件中 Key 值 ",String 类型描述信息 ));
this.saveErrors(request,message);
return ActionForward;

ActionMessages message = new ActionMessages();
message.add(" 消息句柄 ",new ActionMessage(" 资源文件中 Key 值 ",String 类型描述信息 ));
this.saveErrors(request,message);
return ActionForward;
JSP 页面中 :
Html代码
<html:errors property=" 消息句柄 "/>

<html:errors property=" 消息句柄 "/>
如果Action中这样设定(false),页面的提示信息将不从资源文件里读取:
Java代码
ActionMessages message = new ActionMessages();
message.add("消息句柄",new ActionMessage("String类型描述信息));",false));
this.saveErrors(request,message);
return ActionForward;

ActionMessages message = new ActionMessages();
message.add("消息句柄",new ActionMessage("String类型描述信息));",false));
this.saveErrors(request,message);
return ActionForward;
JSP页面:
Html代码
<html:errors/>或<html:errors property="消息句柄"/>
<!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> body { background-color: #f2f3f5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .x-body { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin: 20px auto; max-width: 800px; } .form-header { font-size: 18px; font-weight: bold; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; color: #333; } .x-red { color: #ff5722; } .layui-form-label { width: 120px; font-weight: 500; } .layui-input-block { margin-left: 150px; } .submit-btn { margin-top: 30px; text-align: center; } .error-tip { color: #ff5722; font-size: 12px; margin-top: 5px; display: none; } .has-error .error-tip { display: block; } .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div id="app"> <div class="x-body"> <div class="form-header">收费项目明细添加</div> <form class="layui-form layui-form-pane"> <input type="hidden" name="id" v-model="formData.id"> <!-- 所属小区(改为文本框) --> <div class="layui-form-item" :class="{'has-error': errors.community_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>所属小区 </label> <div class="layui-input-block"> <!-- 关键修改1:select改为input --> <input type="text" v-model="formData.community_name" class="layui-input" placeholder="请输入所属小区名称" lay-verify="required"> <div class="error-tip" v-if="errors.community_name">{{ errors.community_name }}</div> </div> </div> <!-- 收费项目(改为文本框) --> <div class="layui-form-item" :class="{'has-error': errors.project_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目 </label> <div class="layui-input-block"> <!-- 关键修改2:select改为input --> <input type="text" v-model="formData.project_name" class="layui-input" placeholder="请输入收费项目名称" lay-verify="required"> <div class="error-tip" v-if="errors.project_name">{{ errors.project_name }}</div> </div> </div> <!-- 业主(改为文本框) --> <div class="layui-form-item" :class="{'has-error': errors.owner_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>业主 </label> <div class="layui-input-block"> <!-- 关键修改3:select改为input --> <input type="text" v-model="formData.owner_name" class="layui-input" placeholder="请输入业主姓名" lay-verify="required"> <div class="error-tip" v-if="errors.owner_name">{{ errors.owner_name }}</div> </div> </div> <!-- 应收金额 --> <div class="layui-form-item" :class="{'has-error': errors.yf_money}"> <label class="layui-form-label"> <span class='x-red'>*</span>应收金额(¥) </label> <div class="layui-input-block"> <input type="number" v-model="formData.yf_money" autocomplete="off" placeholder="请输入应收金额" class="layui-input" @input="validateMoney('yf_money')"> <div class="error-tip" v-if="errors.yf_money">{{ errors.yf_money }}</div> </div> </div> <!-- 实收金额 --> <div class="layui-form-item" :class="{'has-error': errors.ss_money}"> <label class="layui-form-label"> <span class='x-red'>*</span>实收金额(¥) </label> <div class="layui-input-block"> <input type="number" v-model="formData.ss_money" autocomplete="off" placeholder="请输入实收金额" class="layui-input" @input="validateMoney('ss_money')"> <div class="error-tip" v-if="errors.ss_money">{{ errors.ss_money }}</div> </div> </div> <!-- 缴费日期 --> <div class="layui-form-item" :class="{'has-error': errors.jf_time}"> <label class="layui-form-label"> <span class='x-red'>*</span>缴费日期 </label> <div class="layui-input-inline"> <input class="layui-input" v-model="formData.jf_time" placeholder="点击选择日期" id="paymentDate" readonly> </div> <div class="error-tip" v-if="errors.jf_time">{{ errors.jf_time }}</div> </div> <!-- 备注 --> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>备注 </label> <div class="layui-input-block"> <textarea placeholder="请输入备注内容" v-model="formData.desc" class="layui-textarea"></textarea> </div> </div> <!-- 提交按钮 --> <div class="layui-form-item submit-btn"> <button class="layui-btn layui-btn-normal" type="button" @click="submitForm"> 保存 </button> <button class="layui-btn layui-btn-primary" type="button" @click="resetForm"> 重置 </button> </div> </form> </div> <!-- 加载中提示 --> <div class="loading-overlay" v-if="loading"> <div class="layui-anim layui-anim-rotate layui-anim-loop"> <i class="layui-icon layui-icon-loading" style="font-size: 40px; color: #1E9FFF;"></i> </div> <div style="margin-top: 10px; color: #666;">提交中,请稍候...</div> </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: '', community_name: '', // 关键修改4:字段名从community_id改为community_name project_name: '', // 关键修改5:字段名从project_id改为project_name owner_name: '', // 关键修改6:字段名从personnel_id改为owner_name yf_money: '', ss_money: '', jf_time: '', desc: '' }, errors: { community_name: '', // 关键修改7:错误字段名同步调整 project_name: '', owner_name: '', yf_money: '', ss_money: '', jf_time: '' }, loading: false, laydate: null }, mounted() { layui.use(['laydate', 'form'], () => { this.laydate = layui.laydate; layui.form.render(); this.initDatePicker(); }); }, methods: { initDatePicker() { this.laydate.render({ elem: '#paymentDate', type: 'date', value: this.formData.jf_time || new Date(), min: '2010-01-01', max: '2099-12-31', done: (value) => { this.formData.jf_time = value; this.validateField('jf_time'); } }); }, validateMoney(field) { const value = this.formData[field]; if (!value) { this.errors[field] = '金额不能为空'; } else if (isNaN(value) || parseFloat(value) <= 0) { this.errors[field] = '请输入有效的金额'; } else { this.errors[field] = ''; } }, validateField(field) { switch(field) { // 关键修改8:验证字段名同步调整 case 'community_name': this.errors.community_name = this.formData.community_name ? '' : '请输入所属小区'; break; case 'project_name': this.errors.project_name = this.formData.project_name ? '' : '请输入收费项目'; break; case 'owner_name': this.errors.owner_name = this.formData.owner_name ? '' : '请输入业主'; break; case 'yf_money': this.validateMoney('yf_money'); break; case 'ss_money': this.validateMoney('ss_money'); break; case 'jf_time': this.errors.jf_time = this.formData.jf_time ? '' : '请选择缴费日期'; break; } }, validateForm() { // 关键修改9:验证字段名同步调整 this.validateField('community_name'); this.validateField('project_name'); this.validateField('owner_name'); this.validateField('yf_money'); this.validateField('ss_money'); this.validateField('jf_time'); // 检查是否有错误 for (let key in this.errors) { if (this.errors[key]) return false; } // 验证实收金额不小于应收金额 if (parseFloat(this.formData.ss_money) < parseFloat(this.formData.yf_money)) { this.errors.ss_money = '实收金额不能小于应收金额'; return false; } return true; }, submitForm() { if (!this.validateForm()) { layui.layer.msg('请正确填写表单', {icon: 5}); return; } this.loading = true; // 模拟AJAX提交 setTimeout(() => { this.loading = false; // 模拟成功响应(这里保存的是文本输入值) layui.layer.msg('添加成功', {icon: 1, time: 1500}, () => { if (window.parent && window.parent.layer) { const index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); parent.location.reload(); } this.resetForm(); }); }, 1500); }, resetForm() { this.formData = { id: '', community_name: '', project_name: '', owner_name: '', yf_money: '', ss_money: '', jf_time: '', desc: '' }; for (let key in this.errors) { this.errors[key] = ''; } this.initDatePicker(); } } }); </script> </body> </html> 删除备注
最新发布
07-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值