服务器端客户端字段状态替换

I've seen some variations of this question throughout *, but I have a specific use case I'd appriciate inputs for.

我已经在*中看到了这个问题的一些变化,但是我有一个特定的用例我想要输入。

The simplest I can get this to is: 1. On a web site, I have a form with two input fields. When A is populated with 'XYZ' B should be disabled, in all other cases it should be enabled. 2. This "page" can also be saved to the a DB by the client.

我能得到的最简单的方法是:1。在网站上,我有一个带有两个输入字段的表单。当A填充'XYZ'时,应该禁用B,在所有其他情况下应该启用它。 2.此“页面”也可以由客户端保存到DB。

So, I need to be able to render the 2nd disabled field both at client tab-out (easy, simple Javascript) and when this "form" is firsy being loaded (Simple, in JSP manipulate the field's attribute when the page is loaded).

因此,我需要能够在客户端选项卡(简单,简单的Javascript)和当“表单”被填充时简单地呈现第二个禁用字段(简单,在JSP中加载页面时操作字段的属性) 。

But... I ended up having the exact same logic coded in two place. Now, consider this is required for hundreds of fields and tens of logical conditions, some times as complex as combination of 5 fields together, set of specific values to do this or that, etc. etc..

但是......我最终在两个地方完成了相同的逻辑编码。现在,考虑到这需要数百个字段和数十个逻辑条件,有时像5个字段的组合一样复杂,要做这个或那个特定值的集合等等。

Bottom line , what approach would you consider to reuse (as much as possible) UI oriented validaion/field state alterations between server side and client side (cosider that I do not want to use AJAX call with every user typing in a field.).

最重要的是,您会考虑在服务器端和客户端之间重用(尽可能多)面向UI的验证/字段状态更改的方法(我不想在每个用户键入字段时使用AJAX调用的cosider)。

Thanks

2 个解决方案

#1

A component based MVC framework like JSF (JavaServer Faces) allows you to define that in a single place. Here's a kickoff example of the particular use case:

基于组件的MVC框架(如JSF(JavaServer Faces))允许您在一个位置定义它。这是特定用例的启动示例:

<h:form>
    <h:panelGroup id="inputA">
        <h:inputText value="#{bean.inputA}">
            <f:ajax event="blur" render="inputB" />
        </h:inputText>
    </h:panelGroup>
    <h:panelGroup id="inputB">
        <h:inputText value="#{bean.inputB}" disabled="#{bean.inputA != 'XYZ'}" />
    </h:panelGroup>
</h:form>

That's basically all. Only the javabean code is omitted, but that's not so relevant here. True, ajax is used here, but that's partcularly cheap and there's basically no other way to keep the same state on both the server and client side anyway.

这基本上都是。只省略了javabean代码,但这里并没有那么重要。是的,这里使用的是ajax,但这部分便宜,而且无论如何基本上没有其他方法可以在服务器端和客户端保持相同的状态。

The above XHTML (Facelets) example will generate the appropriate HTML/JS code which will do the work at both server and client side. The only disadvantage is maybe the learning curve and lot of changes in existing pages.

上面的XHTML(Facelets)示例将生成适当的HTML / JS代码,该代码将在服务器端和客户端执行。唯一的缺点可能是学习曲线和现有页面的大量变化。

#2

My answer would be much the same a BalusC's.

我的答案与BalusC的答案大致相同。

But first a clarification of terminology: If all you are doing is enabling/disabling an HTML field, we would typically say that is client side validation, regardless of whether it is done in Javascript or JSP. Yes, in the JSP case the logic to disable/enable the fields runs on the server, but since all it is doing is setting a field for the client to display, it tends to fall into the general description of "client side validation"

但首先澄清术语:如果你所做的只是启用/禁用HTML字段,我们通常会说这是客户端验证,无论它是在Javascript还是JSP中完成。是的,在JSP情况下,禁用/启用字段的逻辑在服务器上运行,但由于它所做的只是设置客户端显示的字段,因此它往往属于“客户端验证”的一般描述

The alternative (well actually 'in addition to') to client side validation is to validate the form fields when they get POSTed to the server. That checks that the client has actually obeyed your validation rules (e.g. they might disable javascript, or they might use a tool like firebug to re-enable the field you disabled, etc.)

客户端验证的替代方案(实际上是'除了'之外)是在将表单字段发送到服务器时验证它们。检查客户端是否实际遵守了您的验证规则(例如,他们可能会禁用javascript,或者他们可能会使用像firebug这样的工具来重新启用您禁用的字段等)

You may well know all of that already, and terminology isn't super important, but I thought it was worth pointing out.

你可能已经知道所有这些,术语并不是非常重要,但我认为值得指出。

Now, back to your question. I would do it all in javascript, and ignore the logic in the JSP. All you need to do is take the piece of javascript that fires when they tab out of "A", and run it when the page loads.

现在,回到你的问题。我会在javascript中完成所有操作,并忽略JSP中的逻辑。所有你需要做的就是当它们选出“A”时触发的javascript片段,并在页面加载时运行它。

In JQuery, you'd do something like (untested)

在JQuery中,你会做一些像(未经测试的)

var check_field = function(f)
{
  if(!f) f=$(this);
  if(f.val()=='XYZ') $("#field_B").attr('disabled', true);
  else               $("#field_B").attr('disabled', false);
};
$(function()
{
   var a = $("#field_A");
   check_field(a);
   a.blur( check_field );
});

#1