标签: html5-validation

或者,是否可以使用html5验证另一个字段的值？

一个常见的例子是选择日期范围,其中"from"日期应小于或等于"to"日期.以下将描述值之间的期望关系,如果只有您可以在语法中使用元素引用:

<input type="date" name="from" max="to">    //todo: populate with ~to.value
<input type="date" name="to" min="from">    //todo: populate with ~from.value

在Firefox或Chrome中查看这两个小提琴.在这一个中,我只有一个带有required属性和submit按钮的简单表单.当框为空时按"提交"使其被设置为样式invalid(在Firefox中,它是红色轮廓).但它等到你按提交显示它无效.

现在尝试这个.它是相同的,除了有一些CSS:

input:invalid{
    border-color:orange
}

除此之外,即使在按下提交之前,也会应用橙色边框颜色.因此,当且仅当您手动invalid为表单设置样式时,浏览器才会应用它,这不是直观的行为.当然,在您输入任何内容之前,必填字段将无效.

有没有办法来解决这个问题？

目前有没有办法在2个字段之间进行比较检查,以检查它们是否匹配或在HTML5验证中不匹配？或者你必须编写自己的Javascript来做到这一点？

我有一个我创建的Javascript 验证框架，我正在尝试向它添加 HTML5 验证。在我的框架中，验证是通过使用data-属性将验证约束绑定到元素来完成的。这有点类似于HTML5的验证是如何发生的，通过使用属性，如required，min，max，等。

我现在有两个问题。好吧，它们不一定是问题，但我想更好地了解情况，以便我可以决定如何前进。

我遇到的第一个问题element.validity.typeMismatch，true如果元素的值与元素的类型不匹配，则设置为。例如，如果您的元素带有无效的 URL 值，type="url"或者带有type="email". 但是，这种行为对于类似type="number". 行为不一致的原因是浏览器不允许您向inputwith添加无效值type="number"（通过 UI 甚至通过 DOM）。因此，element.validity.typeMismatch永远不会设置为true并element.checkValidity()始终返回true。此行为是与行为不一致type="url"，并type="email"在那里你可以输入无效值，并element.validity.typeMismatch与element.checkValidity() 返回预期值。

我在使用maxlength. 有一个ValidityState名为tooLongat的属性element.validity.tooLong。似乎在直接从浏览器与 a 交互时从未设置此值，因为您永远不能输入比 * 值更长的值。此外，尽管你可以设置一个值是长于从DOM，再次，是从来没有设置。所以我想知道如果这个属性或多或少没用，为什么它甚至存在。trueinputmaxlength …

使用HTML5表单验证时，如果表单中的输入值无效，则会中止提交该表单。如何检测到用户尝试提交表单失败？由于onsubmit验证失败而停止提交时，表单的处理程序不会触发。

我目前正在监听“提交”按钮上的keypress和click事件，以检测提交尝试。有没有更好的方法来检测失败的表单提交？

我想知道我是否可以为我的应用程序中的每个表单设置禁用html5验证的东西.有没有办法做到这一点,或者我应该novalidate为每个表单标签添加属性？

我如何覆盖或扩展标准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 …

我正在尝试创建一个regex验证用户名,该用户名应与以下内容匹配:

• 只(._-)允许一个特殊字符,它不能位于字符串的极值
• 第一个字符不能是数字
• 允许的所有其他字符都是字母和数字
• 总长度应在3到20个字符之间

这是针对HTML5验证模式的,遗憾的是它必须是一个很大的正则表达式.

到目前为止,这就是我所拥有的:

^(?=(?![0-9])[A-Za-z0-9]+[._-]?[A-Za-z0-9]+).{3,20}

但积极的前瞻可以重复多次,允许不止一个特殊角色,这不是我想要的.我不知道如何纠正这一点.

我正在尝试使用模式属性验证我的 HTML 输入。在某些情况下它可以工作，在某些情况下它不起作用，我无法弄清楚它为什么会坏。

给大家分享两段代码。代码 1 正在运行。代码 2 不是。我先写了代码 1，然后是代码 2。我真的复制粘贴了代码 2，但由于某种超出我理解的原因，它不起作用。一探究竟。

CODE1（正在工作的那个）

<input id="clinicProfileNumber" name="clinicProfileNumber" ng-model="clinic.profile.number" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">

Code2（不工作的那个）

<input id="doctorProfileContactnumber" name="doctorProfileContactnumber" ng-model="doctor.profile.contactNumber" type="text" class="user-input" pattern="[0-9]{10}" title="10 digit mobile number">

让我给您举几个其他不起作用的代码示例：

<input id="doctorProfileEmail"
       name="doctorProfileEmail"
       ng-model="doctor.profile.email"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
       required type="text"
       class="user-input"
       title="Please enter a valid email." />

<input id="doctorProfilePassword"
       name="doctorProfilePassword"
       ng-model="doctor.profile.password"
       type="text"
       class="user-input"
       pattern=".{6,}"
       title="Must contain at least 6 or more characters">

</div>

请检查这个，让我知道我做错了什么。

使用Angular 2(2.0.0),使用Angular Forms 动态标记字段的建议方法是什么？

在他们的所有示例中,只添加了必需的属性,如:

<input type="text" class="form-control" id="name" required>

如果我绑定的模型有一个IsRequired属性,那将是真/假？

如果我使用类似的东西:

<input [(ngModel)]="field.Value" type="text" value="{{field.Value}}" [attr.required]="field.IsRequired"/>

这在页面上呈现(注意="true"):

<input type="text" required="true" />

出于某种原因,当Angular具有实际值(="true")时,它似乎不会识别此属性,所以当此字段为空时,我的表单本身仍然有效:

<form class="ng-untouched ng-pristine ng-valid">

所以看起来我必须使用required而不是required="true",但是如何动态添加该属性？

什么也行不通:

<input type="text" {{ getRequiredAttr(field) }} />

以为我可能有一个函数可以根据字段返回我的字符串"required",这只会产生模板错误.

有没有办法完成这个并只required为我的属性渲染？还是一种让Angular在值为true/false时识别此属性的方法？

FWIW - 我已经验证我可以根据我的属性*ngIf编写两个几乎相同的<input type='text' />控件,IsRequired并使用required属性对其进行硬编码,但这看起来很糟糕.希望有更好的方法!