如何在webForms中的form.onSubmit期间调用HTML5 form.checkValidity？
Ian*_*oyd 5 asp.net html5 webforms html5-validation
我如何覆盖或扩展标准WebForms WebForm_OnSubmitjavascript函数？
我在ASP.net WebForms网站上使用HTML5输入类型.用户代理(例如Chrome,IE,Firefox)已经正确处理数据清理,备用UI等.
通常,当用户单击<input type="submit">按钮时,User-Agent将暂停提交,并显示UI以向用户指示他们的输入将无效:
WebForms的问题在于它不使用" 提交"按钮.相反,一切都可以通过javascript回发来完成,而不是提交表单:
<asp:LinkButton ID="bbOK" Text="Save User" runat="server" OnClick="bbOK_Click"></asp:LinkButton>
当渲染到客户端html时,它变成对Javascript的调用:
WebForm_DoPostBackWithOptions(...)
真正的长形式是Anchor标签:
<a id="Really_Long_Thing_ctl00_bbOK"
href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$VistaToolbar$ctl00$bbOK", "", true, "", "", false, true))'>
Save User
</a>
这意味着用户代理从不向用户提示输入的元素无效.
即使form没有"提交",它仍然会触发onsubmit事件.我可以使用以下方法手动触发HTML5表单验证:
isValid = form.checkValidity();
理想情况下,我会在我的ASP.web WebForms站点中挂钩该事件:
的Site.Master
<form runat="server" onsubmit="return CheckFormValidation(this)">
<script type="text/javascript">
function CheckFormValidation(sender)
{
//Is the html5 form validation method supported?
if (sender.checkValidity)
return sender.checkValidity();
//If the form doesn't support validation, then we just assume true
return true;
}
</script>
除了WebForms基础结构删除我的 onsubmit方法处理程序,并用它自己的替换它:
<form id="ctl01" onsubmit="javascript:return WebForm_OnSubmit();" action="UserProperties.aspx?userGuid=00112233-5544-4666-7777-8899aabbccdd" method="post">
所以我自己的提交电话被忽略了.看来,深入WebForm_OnSubmit探讨ASP.net WebForms验证基础架构的漏洞:
function WebForm_OnSubmit()
{
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
return false;
return true;
}
调用函数:
var Page_ValidationActive = false;
function ValidatorOnSubmit()
{
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else
{
return true;
}
}
哪些调用,哪些调用,哪些调用,哪些检查.
只想要使用WebForms进行HTML5表单验证
问题是WebForms 在提交之前有一个巨大的基础设施来检查表单,并通过标准化机制(以及我不使用的整个基础架构)向用户显示错误.它接管onsubmit表单的事件,并且(不一定)<input type="submit">在过程中使用.
我该怎么做才能说服ASP.net WebForms网站让User-Agent验证表单？
也可以看看
Web 表单基础结构删除了处理程序，因为您尝试将其直接添加到可视设计环境中的元素上，而 Web 表单并非设计为以这种方式工作。
捕获提交处理程序很容易，您只需要稍微创造性地思考即可。
每当您尝试在 Web 表单环境中处理类似的事情时，您都必须学会考虑Web 表单页面渲染管道之后的解决方案。如果您尝试找到直接在 Web 表单引擎内部工作的解决方案，那么 Web 表单每次都会获胜。
如果您也需要，您可以在这里重现我的确切测试用例，或者您可以挑选出您需要的部分并根据需要重新使用。
步骤1
在 C# 中创建一个新的 Web 表单项目（如果需要，您可以在 VB 中执行此操作，但我将示例设为 C#），创建项目后，右键单击应用程序引用，进入 NuGet 并安装jQuery。
无需 JQuery 即可完成此操作，只需使用本机方法，但今天是周日，我今天很懒:-)
第2步
向您的项目添加一个新的 Web 表单（使用添加新项目）并将其命名为“ Default.aspx ”，在此表单上添加一些文本、一个文本框、一个按钮和一个标签。
您的代码应类似于：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jsvalidation.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Please enter your name :
<asp:TextBox ID="txtName" runat="server" data-jsname="username"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" />
</div>
<asp:Label runat="server" ID="lblResult">...</asp:Label>
</form>
</body>
</html>
然后按 F7（或双击按钮）转到表单的代码隐藏编辑器。
步骤3
将按钮处理程序的代码添加到后面的代码中。如果您的操作方式与我完全相同，那么您的代码应该类似于以下内容：
using System;
namespace jsvalidation
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}
protected void btnSubmit_Click(object sender, EventArgs e)
{
if(Page.IsPostBack)
{
lblResult.Text = "Well hello there " + txtName.Text;
}
}
}
}
此时，您可以通过按 F5 来测试工作，无论您在文本框中输入（或不输入）什么内容，当您按下提交按钮时，都应该与下面的标签中的消息一起出现。
现在我们已经设置了基本的网络表单，我们只需要拦截表单提交即可。
步骤4
正如我刚才所说，您需要跳出网络表单的框框进行思考。
这意味着您需要在页面呈现并发送到浏览器之后运行拦截。
Web 表单注入到混合中的所有 JS 通常在允许页面输出继续之前执行，这意味着在开始 body 标记之前执行。
为了让您的代码在它之后运行，您需要将脚本放在html 输出的末尾，以便它最后运行。
在结束正文标记之前添加以下代码，但在结束表单标记之后
<script src="/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function() {
var uninput = $('input[data-jsname="username"]');
var username = uninput.val();
if (username == "")
{
alert("Please supply a username!");
return false;
}
});
});
</script>
更精明的人会立即注意到我没有调用 HTML5 验证 API，原因是我试图使这个示例保持简单。
我检查用户名值的地方是重要的部分。
重要的是我执行检查的匿名函数返回 true 或 false。（如果您不返回任何内容，则默认为 True）
如果返回 false，您将阻止回发的发生，从而允许您使用 HTML5 验证 API 更改表单字段所需的任何 JS 代码。
我个人偏好是使用 bootstrap（请参阅我的 Bootstrap 2 书的同步融合免费电子书范围，以及即将发布的 Bootstrap 3 书），您可以在框架中使用特殊的标记和 css 类，例如“has-errors” “给事物适当地着色。
至于使用 JQuery 的组件选择，这里还有两件事需要注意。
1）你不应该在一个网络表单页面上有多个表单，事实上，如果我没记错的话，如果你这样做，你的应用程序将无法编译，或者最多肯定会在运行时抛出异常。
2）因为你只有一种表单，所以你可以非常安全地做出假设，JQuery 中的通用“表单”选择器只会选择你的主表单（无论 ID、名称、缺少或大小）并向其添加 onsubmit 处理程序，将始终在Web 表单执行此操作后附加此处理程序。
3) 因为 Web 表单可以（并且通常）修改 ID 名称，所以使用“数据属性”向标签添加自定义位通常更容易。实际的 ASP.NET js 端验证本身执行完全相同的技巧，以允许 JS 代码和 .NET 代码在同一页面中愉快地共存。有多种方法可以告诉 .NET 如何命名 ID，但通常您必须在很多地方设置很多选项，而且很容易错过其中一个。使用“数据属性”和 JQ 属性选择器语法是实现相同目标的更安全、更易于管理的方法。
概括
这不是一项困难的任务，但我必须承认，如果您不看看网络表单在您周围构建的栅栏之外，这并不是一个立即显而易见的任务。
Web-forms 专为快速应用程序开发而设计，主要针对习惯桌面 win-forms 模型的开发人员。虽然 Web 表单如今仍然占有一席之地，但对于新的未开发应用程序，我建议也考虑其他选项，尤其是那些构建在新 HTML5 规范正在努力建立和完善的基础上的选项。
| 归档时间： |
|
| 查看次数： |
3329 次 |
| 最近记录： |