Html5验证输入值不等于默认值答案

【问题标题】：Html5 validate input value not eqaul to by default valueHtml5验证输入值不等于默认值
【发布时间】：2015-06-03 04:09:13
【问题描述】：

我想通过html5验证验证输入值不等于默认值，可以吗？

 <input type="text" name="First Name" value="First Name" id="FirstName"
 required=""  title="First Name is Required!" >

当用户点击提交按钮时，如果输入字段的值=名字然后显示错误。

我不想使用 placeholder="First Name"。

有没有办法使用模式属性进行验证，比如 pattern="!First Name"

【问题讨论】：

为什么不用placeholder="First Name" 而不是value="First Name"
我需要使用 value="First Name" 而不是占位符
为什么需要使用它？如果浏览器禁用了 javascript 会发生什么 - 值“First Name”将被发送到服务器。使用placeholder 属性将解决同样的问题......请记住，它并不是要用作label 的替代品——这样做是一种反模式。

标签： html

【解决方案1】：

添加模式应该可以工作。

<input type="text" name="First Name" value="First Name" id="FirstName"
 required=""  title="First Name is Required!" pattern="^((?!First Name).)*$">

如果您的值包含字符串“First Name”，这将引发错误。

【讨论】：

【解决方案2】：

您可以在下面尝试使用 Javascript：

<form>
  <input type="text" name="First Name" value="First Name" id="FirstName" required="" title="First Name is Required!">
  <input type="submit" value="Submit" onclick="if (document.getElementById('FirstName').value == 'First Name') return false;">
</form>

【讨论】：

我在表单中有多个输入字段。 :)
然后你可以创建一个js函数来验证所有字段并在点击时调用它

【解决方案3】：

有一个更好的解决方案：使用placeholder 属性而不是value 属性...但不要将其用作标签的替代品（请参阅input 上的MDN 页面）。

<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="First name is required" ... />

这意味着你不需要有任何逻辑来检查默认值没有被填充。

【讨论】：

我知道占位符，但是必须使用value属性。
您听说过en.wikipedia.org/wiki/5_Whys - 我只是在调查是否真的需要使用value 属性。例如一个答案可能是“因为我使用的 CMS 不会公开您提到的属性”