【问题标题】:Handling default form values with jquery.validationEngine.js使用 jquery.validationEngine.js 处理默认表单值
【发布时间】:2011-05-21 06:27:35
【问题描述】:

我正在使用 jquery.validationEngine.js 进行表单验证。

这个js是从http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/下载的

此站点。但它不适用于检查默认值的验证,例如我的名字字段的值为“名字”。我想要验证检查该字段是否不应该为空,但它不起作用,因为它包含默认值“名字”。

我还希望这应该在 jquery.validationEngine.js 文件中工作,因为我必须对表单进行许多验证并且我正在使用这个 js。

我的领域是

<input type="text" id="Uname" name="Uname" value="User Name" onfocus="if(this.value=='User Name')this.value='';" onblur="if(this.value=='')this.value='User Name';" />

如果有人使用此文件,请告诉我并帮助解决此问题。

【问题讨论】:

标签: javascript jquery validation


【解决方案1】:

如果您希望使用验证引擎按照您描述的方式验证您的表单,那么根据文档,似乎至少有三种解决方案。

1) 您可以在翻译文件中为每个默认文本值创建一个新的自定义正则表达式,然后将该自定义正则表达式添加到相关表单项。这可能是您的选择中最棘手的,因为您需要使用负前瞻或类似的东西来使正则表达式正确。

2) 让验证器调用您编写的一个或多个函数来处理您的特殊情况。我不知道validationEngine 是否允许您将参数传递给函数——文档对此只字未提——所以我猜它不会。这可能意味着您需要为每个默认值编写单独的函数,或者使用全局变量来指示您正在检查的默认值。代码 sn-p 中 Uname 字段的函数可能如下所示:

function checkUname(field, rules, i, options){
  if (field.val() == "User Name") {
     return "You must type in your username.";
  }

一旦定义了该函数,您就可以使用类似这样的东西来使用它:

<input type="text" class="form validate[required,funcCall[checkUname]]" id="Uname" name="Uname" value="User Name" onfocus="if(this.value=='User Name')this.value='';" onblur="if(this.value=='')this.value='User Name';" />

3) 您可以编写一个 JavaScript 函数来遍历表单中的每个字段,如果找到默认值,则将其更改为空字符串。然后将该函数附加到表单中的onsubmit 事件。这可能是最简单的选择,但这取决于您的函数在validationEngine 代码之前运行。如果不是这种情况,那么它将无法正常工作。

【讨论】:

【解决方案2】:

这是一个很好的例子 How do you validate optional fields with default value?

否则,将我发布的问题视为可能更改的相同问题

jQuery.validator.addMethod("defaultInvalid", function(value, element) {
  if (element.value == element.defaultValue) return false;
}

代替开关/外壳

<input type="text" id="Uname" name="Uname" value="User Name" onfocus="if(this.value==this.defaultValue) this.value=''" 
onblur="if(this.value=='') this.value=this.defaultValue" />

【讨论】:

    【解决方案3】:

    您应该使用 HTML5 placeholder 属性而不是 JavaScript 来设置占位符值。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-09-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-23
      相关资源
      最近更新 更多