使用MVC 4进行远程jQuery验证，从loc开始动态验证所有输入

Question

描述：

我在MVC4应用程序中有一个简单的表单，它有5个名为loc1-5的文本框和一个提交按钮。该应用程序在文本框loc1-5中最多占用5个地址，并使用bing地理编码服务和jQuery对地址进行一些处理，并创建一个带方向的地图。

问题是，在继续之前，我需要验证loc1-5文本框，以确保它们是有效的地址，并决定最好的方法是使用jQuery.validate远程调用MVC控制器函数，该函数可以使用我的预构建函数来检查有效地址。

现在，我确实提出了一个有效的解决方案来验证这些字段，但我迫切需要使其更加动态，以便在未来可以用最少的精力添加更多的文本框。理想情况下，我希望逻辑能对所有以"loc"开头的输入进行验证。

工作溶液(非常脏)：

简单形式(MVC视图)

<form action="/Home/ViewResult" method="post" id="ViewResult" name="ViewResult">
<fieldset>
<legend>Enter Route</legend>
<p>
Address 1 (Start & End):
</p>
<p>
<input type="text" id="loc1" name="loc1" value='' />
</p>
<p>
Address 2:
</p>
<p>
<input type="text" id="loc2" name="loc2" value='' />
</p>
<p>
Address 3:
</p>
<p>
<input type="text" id="loc3" name="loc3" value='' />
</p>
<p>
Address 4:
</p>
<p>
<input type="text" id="loc4" name="loc4" value='' />
</p>
<p>
Address 5:
</p>
<p>
<input type="text" id="loc5" name="loc5" value='' />
</p>
<p>
<input type="submit" value="Route"/>
</p>
</fieldset>
</form>

jQuery验证代码(在MVC视图中)

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){$("#ViewResult").validate({onfocushot:false，onkeyup：false，规则：{"loc1"：{required:true，远程：{url:"/Home/IsValidAddress1"，超时：2000，类型："post"}}，"loc2"：{required:true，远程：{url:"/Home/IsValidAddress2"，超时：2000，类型："post"}}，"loc3"：{required:true，远程：{url:"/Home/IsValidAddress3"，超时：2000，类型："post"}}，"loc4"：{远程：{url:"/Home/IsValidAddress4"，超时：2000，类型："post"}}，"loc5"：{远程：{url:"/Home/IsValidAddress5"，超时：2000，类型："post"}}}，消息：{"loc1"：{required:"起始/结束位置是必填字段。"，remote:"请输入有效地址。"}，"loc2"：{required:"请至少输入3个地址。"，remote:"请输入有效地址。"}，"loc3"：{required:"请至少输入3个地址。"，remote:"请输入有效地址。"}，"loc4"：{remote:"请输入有效地址。"}，"loc5"：{remote:"请输入有效地址。"}，}})；})程参考的家庭控制器中的功能
//用于检查有效地址的功能公共布尔值IsValidAddress(字符串位置){//如果不是空白if(location！="){//尝试获取航路点航路点航路点=获取航路点(位置)；//如果没有返回航路点，返回falseif(航路点==空){return false；}}返回true；}public JsonResult isValidAddress1(字符串loc1)//参数必须为文本框名称{if(！IsValidAddress(loc1)){返回新的JsonResult｛Data=false｝；}返回新的JsonResult｛Data＝true｝；}public JsonResult isValidAddress2(字符串loc2)//参数必须为文本框名称{if(！IsValidAddress(loc2)){返回新的JsonResult｛Data=false｝；}返回新的JsonResult｛Data＝true｝；}public JsonResult isValidAddress3(字符串loc3)//参数必须为文本框名称{if(！IsValidAddress(loc3)){返回新的JsonResult｛Data=false｝；}返回新的JsonResult｛Data＝true｝；}public JsonResult isValidAddress4(字符串loc4)//参数必须为文本框名称{if(！IsValidAddress(loc4)){返回新的JsonResult｛Data=false｝；}返回新的JsonResult｛Data＝true｝；}public JsonResult isValidAddress5(字符串loc5)//参数必须为文本框名称{if(！IsValidAddress(loc5)){返回新的JsonResult｛Data=false｝；}返回新的JsonResult｛Data＝true｝；}
问题：
同样，这是有效的，但它是非常脏的，并不是动态的。
从本质上讲，我有两个问题。
如何编写jQuery简写来为所有以"loc"开头的文本框创建验证规则
据我所知，处理远程调用的MVC控制器函数必须将文本框的名称传递给它。那么，我如何让一个MVC控制器函数处理对它的多个远程调用呢
我对jQuery不是很在行，但我真正想要的是这样的东西，这样我以后就可以毫不费力地添加更多的文本框：
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$("#ViewResult").validate({onfocushot:false，onkeyup：false，规则：{"loc1"：{required:true，}，"loc2"：{required:true，}，"loc3"：{required:true，}，$("input=text").StartsWith("loc").each()：｛远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"}}}，消息：{"loc1"：{required:"起始/结束位置是必填字段。"，}，"loc2"：{required:"请至少输入3个地址。"，}，"loc3"：{required:"请至少输入3个地址。"，}，$("input=text").StartsWith("loc").each()：｛remote:"请输入有效地址。"}，}})；})庭控制器功能
//用于检查有效地址的功能public JsonResult IsValidAddress(string loc)//loc变量是否连接到动态文本框名称？{//如果不是空白if(loc！="){//尝试获取航路点航路点航路点=获取航路点(loc)；//如果没有返回航路点，返回falseif(航路点==空){返回新的JsonResult｛Data=false｝；}}返回新的JsonResult｛Data＝true｝；}
最后请注意，我没有能力更改MVC模型。我见过许多类似的解决方案，它们直接在MVC模型中编写验证规则和远程调用，但我根本不能这样做。
欢迎提出任何改进建议，并提前感谢您的回复。
请试着告诉我哪里出了问题，或者我想要的是否可能。

Answer 1

所以我想明白了。

最终工作解决方案：

MVC家庭控制器中的功能：

//用于检查有效地址的功能//注意：地址变量参数连接到远程调用中的数据属性public JsonResult IsValidAddress(字符串地址){//如果不是空白if(address！="){//尝试获取航路点航路点航路点=获取航路点(地址)；//如果没有返回航路点，返回falseif(waypoint.Location==null){返回新的JsonResult｛Data=false｝；}}返回新的JsonResult｛Data＝true｝；}

View:中的jQuery函数

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){$("#ViewResult").validate({onfocushot:false，onkeyup:false})；$("#loc1").rules("add"{required:true，消息：{required:"起始/结束位置是必填字段。"，}})；$("#loc2").rules("add"{required:true，消息：{required:"请至少输入3个地址。"}})；$("#loc3").规则("add"{required:true，消息：{required:"请至少输入3个地址。"}})；$('#ViewResult[name^="loc"]').each(function(){var currentValue=null；currentValue=$(this)；$(this).rules("添加"{远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return currentValue.val()；｝｝}，消息：{remote:"请输入有效地址。"}})；})；})花了很多时间试图弄清楚这一点，我想我会分享。

Answer 2

因此，我能够通过在规则声明中使用远程调用的数据属性来定义一个名为"address"的新参数，然后将其作为MVC控制器函数中的参数来引用，从而解决问题的第二部分。

以下是主控制器中MVC控制器功能的更新代码：

//用于检查有效地址的功能//注意：地址变量参数连接到远程调用中的数据属性public JsonResult IsValidAddress(字符串地址){//如果不是空白if(address！="){//尝试获取航路点航路点航路点=获取航路点(地址)；//如果没有返回航路点，返回falseif(waypoint.Location==null){返回新的JsonResult｛Data=false｝；}}返回新的JsonResult｛Data＝true｝；}

对于jQuery，有两种方法可以实现这两种方法。

首先使用我以前使用的格式：

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){$("#ViewResult").validate({onfocushot:false，onkeyup：false，规则：{"loc1"：{required:true，远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc1").val()；｝｝}}，"loc2"：{required:true，远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc2").val()；｝｝}}，"loc3"：{required:true，远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc3").val()；｝｝}}，"loc4"：{远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc4").val()；｝｝}}，"loc5"：{远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc5").val()；｝｝}}}，消息：{"loc1"：{required:"起始/结束位置是必填字段。"，remote:"请输入有效地址。"}，"loc2"：{required:"请至少输入3个地址。"，remote:"请输入有效地址。"}，"loc3"：{required:"请至少输入3个地址。"，remote:"请输入有效地址。"}，"loc4"：{remote:"请输入有效地址。"}，"loc5"：{remote:"请输入有效地址。"}}})；})者使用.rules("add")方法：
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$("#ViewResult").validate({onfocushot:false，onkeyup:false})；$("#loc1").rules("add"{required:true，远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc1").val()；｝｝}，消息：{required:"起始/结束位置是必填字段。"，remote:"请输入有效地址。"}})；$("#loc2").rules("add"{required:true，远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc2").val()；｝｝}，消息：{required:"请至少输入3个地址。"，remote:"请输入有效地址。"}})；$("#loc3").规则("add"{required:true，远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc3").val()；｝｝}，消息：{required:"请至少输入3个地址。"，remote:"请输入有效地址。"}})；$("#loc4").rules("add"{远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc4").val()；｝｝}，消息：{remote:"请输入有效地址。"}})；$("#loc5").规则("add"{远程：{url:"/Home/IsValidAddress"，超时：2000，类型："post"，数据：｛address:function()｛return$("#loc5").val()；｝｝}，消息：{remote:"请输入有效地址。"}})；})
</script>