您的当前位置:首页HTML交互式表单验证

HTML交互式表单验证

2023-11-27 来源:华拓教育
  在 HTML 中创建表单总是有点复杂。你首先得将 HTML 标记编写正确,然后需要确保每一个表单项在提交之前都有一个可用的值,最后还需要在有问题时用提醒来告知用户。

还好 HTML5 引入了一些新的特性,让这件事情变得轻松了许多。特别是对表单控件进行了扩展来支持约束,从而无需使用 JavaScript, 就可以让浏览器在客户端对表单内容进行验证。

WebKit 已经进行了部分支持。在表单控件上使用属性来描述约束,然后使用 JavaScript 中的 checkValidity() API 来查询一个表单控件和整个表单输入的有效性,这已经成为可能。使用 ValidityState API 来了解违反了哪个约束,也是可以实现的。

不过, WebKit 以前并不支持 HTML 的交互式表单验证, 而这个会发生在表单提交时 (除非在 <form> 元素上设置了 novalidate 属性) 或者是使用 reportValidity() API 的时候。此外,我们很高兴地宣布, Webkit 现在已经对此进行了支持,并且在 Safari 技术预览版 19 也启用了这项功能。有了交互式表单验证, WebKit 现在将会对表单中所有的表单控件进行有效性检测。如果有哪怕一个表单控件违反了约束,WebKit 就会将输入焦点放到第一个上面,界面页面滚动显示出这个控件,然后在其旁边显示一个气泡消息来对问题进行解释。

 验证的约束  输入类型

有一些输入类型本身就拥有一些内在的约束。将 type 设置为 “email”, “number” 或者 “URL” 的话,就会自动检查输入的值是否是有效的电子邮件地址、数字或者 URL, 例如:

<input type="email">
  验证属性

下面的属性可以被用来在表单控件中描述约束:

  • required: 告诉用户必须输入一个值。

  • pattern=“[a-z]”: 告诉用户必须输入一个可以匹配给定 JavaScript 正则表达式的值。

  • minlength=x: 告诉用户必须输入一个至少有 x 个字符的值。

  • maxlength=y: 告诉用户必须输入一个至多有 x 个字符的值。

  • min=x: 告诉用户必须输入一个大于或者等于 x 的值。

  • max=y: 告诉用户必须输入一个小于或者等于 y 的值。

  • step=x: 告诉用户必须输入一个在 min 的基础上加上 x 的倍数的值。

  •  约束验证

    约束验证可以用以下集中方式触发:

  • 可以在一个表单元素或者特定的表单控件上调用 checkValidity() 。这个方法会在有约束被违反的时候返回 false。同时它也会在违反约束的元素上触发一个叫做“invalid”的事件。可以使用通过表单控件上的“validity”属性所暴露的 ValidityState 对象来检查违反了哪个约束。

  • 可以在一个表单约束或者特定的表单控件上调用 reportValidity()。这样做会触发针对约束的交互式验证。此外 checkValidity(), reportValidity() 也会将输入焦点放到第一个被检查出违背了约束的元素上,并且在其旁边显示一个气泡消息来对问题进行描述。

  • 交互式表单验证也会在提交表单的时候发生,除非在<form>元素上设置了“novalidate”属性。

  •  自定义约束

    使用 JavaScript 来做验证然后利用 setCustomValidity() API 的话,可以实现更加复杂的验证约束或者向校验出违反约束的输入项提供更加有用的错误消息。

    JavaScript 可以通过在一个表单控件上侦听给定的事件来触发(例如: onchange, oninput, …) 。然后被执行的 JavaScript 代码可以对表单控件的数据进行验证,然后使用 setCustomValidity() 来对控件的错误消息进行更新:

    <label for="feeling">Feeling:</label><input id="feeling" type="text" oninput="validateFeeling(this)"><script> function validateFeeling(input) { if (input.value == "good" || input.value == "fine" || input.value == "tired") { input.setCustomValidity('"' + input.value + '" is not a feeling'); } else { // The data is valid, reset the error message. input.setCustomValidity(''); } }</script>
     验证消息气泡提示

    在进行交互式表单验证的时候, 一个针对问题进行说明的气泡提示会显示在第一个拥有被验证违反约束的数据的表单控件旁边, 像这样:

    针对特定的约束默认设置了一些本地化的验证消息。如果你希望对验证消息进行自定义, 可以考虑使用 setCustomValidity() API。注意,WebKit 对于 JavaScript 的国际化 API 也是支持的,这个能够帮助我们对自定义的验证消息进行本地化。

     总结

    HTML 交互式表单验证现在已经在 Webkit 中得到了支持,并且在 Safari 技术预览版 19 中也是启用了的。请尝试一下我们的在线演示来体验这项功能。也欢迎您报告BUG。

    小编还为您整理了以下内容,可能对您也有帮助:

    HTML5的表单验证功能?HTML5自带的两种验证方式?

    HTML5的表单验证功能?HTML5自带的两种验证方式?

    正确答案:HTML5的表单验证功能:l表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,让Web应用更快的抛出错误,大大的优化了用户体验。HTML5自带的两种验证方式:l通过required属性校验输入框填写内容不能为空,如果为空将弹出提示框,并阻止表单提交。通过pattern属性规定用于验证input域的模式(pattern),它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表单提交。那些type为email或url的输入控件内置相关正则表达式,如果value的值不符合其正则表达式,那表单将通不过验证,无法提交。

    HTML5的表单验证功能?HTML5自带的两种验证方式?

    HTML5的表单验证功能?HTML5自带的两种验证方式?

    正确答案:HTML5的表单验证功能:l表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,让Web应用更快的抛出错误,大大的优化了用户体验。HTML5自带的两种验证方式:l通过required属性校验输入框填写内容不能为空,如果为空将弹出提示框,并阻止表单提交。通过pattern属性规定用于验证input域的模式(pattern),它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表单提交。那些type为email或url的输入控件内置相关正则表达式,如果value的值不符合其正则表达式,那表单将通不过验证,无法提交。

    HTML5中表单验证的好处

    本篇文章给大家介绍html5实现表单的复选框验证,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

    在之前的文章【JavaScript如何实现表单的复选框验证】中介绍了使用js实现表单的复选框验证的方法,本篇就在给大家介绍一种验证复选框的方法,使用html5来验证复选框。

    一、html5验证复选框

    向复选框添加HTML5验证实际上非常简单。您需要做的就是包含必需的属性:required

    <form id="example1" method="POST" ><p><input id="field_terms" type="checkbox" required name="terms"><label for="field_terms">我接受 <u>条款和条件</u></label></p><span><input type="submit"></span></form>

    效果图:

    2.gif

    这告诉浏览器在不选中复选框的情况下不允许提交表单。一些(但不是全部)浏览器将识别并强制执行此操作。

    HTML5表单验证的优点是它在我们调用JavaScript之前发生,显示指令并将用户指向相关元素。

    文本警报消息完全是由浏览器生成,甚至可以自动转换为不同的语言,这是使用JavaScript几乎不可能做的。

    HTML5表单验证优势在于,提示导致了问题的原因,并且不需要在点击的警报窗口。而且,警报文本我们也可以自定义。

    二、自定义HTML5消息

    我们可以使用自己定义的文本消息在浏览器上显示,但这只能通过JavaScript完成。这需要自己检查元素的有效性状态并明确设置(并清除)消息:

    <form id="example1" method="POST" onsubmit="return checkForm(this);"><p><input id="field_terms" onchange="this.setCustomValidity(validity.valueMissing ? '请选择接受条款和条件!' : '');" type="checkbox" required name="terms"><label for="field_terms">我接受 <u>条款和条件</u></label></p><span><input type="submit"></span></form><script type="text/javascript">document.getElementById("field_terms").setCustomValidity("请选择接受条款和条件!");</script>

    表单下方的JavaScript块在页面加载时将自定义错误消息分配给复选框。我们知道默认情况下取消选中该复选框,因此我们需要告诉浏览器要显示的消息。

    如果未选中该复选框并单击“提交”按钮,则会显示类似于上述示例的警报,但使用我们的文本而不是默认值。

    3.gif

    总结:

    HTML5中表单验证的好处

    本篇文章给大家介绍html5实现表单的复选框验证,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

    在之前的文章【JavaScript如何实现表单的复选框验证】中介绍了使用js实现表单的复选框验证的方法,本篇就在给大家介绍一种验证复选框的方法,使用html5来验证复选框。

    一、html5验证复选框

    向复选框添加HTML5验证实际上非常简单。您需要做的就是包含必需的属性:required

    <form id="example1" method="POST" ><p><input id="field_terms" type="checkbox" required name="terms"><label for="field_terms">我接受 <u>条款和条件</u></label></p><span><input type="submit"></span></form>

    效果图:

    2.gif

    这告诉浏览器在不选中复选框的情况下不允许提交表单。一些(但不是全部)浏览器将识别并强制执行此操作。

    HTML5表单验证的优点是它在我们调用JavaScript之前发生,显示指令并将用户指向相关元素。

    文本警报消息完全是由浏览器生成,甚至可以自动转换为不同的语言,这是使用JavaScript几乎不可能做的。

    HTML5表单验证优势在于,提示导致了问题的原因,并且不需要在点击的警报窗口。而且,警报文本我们也可以自定义。

    二、自定义HTML5消息

    我们可以使用自己定义的文本消息在浏览器上显示,但这只能通过JavaScript完成。这需要自己检查元素的有效性状态并明确设置(并清除)消息:

    <form id="example1" method="POST" onsubmit="return checkForm(this);"><p><input id="field_terms" onchange="this.setCustomValidity(validity.valueMissing ? '请选择接受条款和条件!' : '');" type="checkbox" required name="terms"><label for="field_terms">我接受 <u>条款和条件</u></label></p><span><input type="submit"></span></form><script type="text/javascript">document.getElementById("field_terms").setCustomValidity("请选择接受条款和条件!");</script>

    表单下方的JavaScript块在页面加载时将自定义错误消息分配给复选框。我们知道默认情况下取消选中该复选框,因此我们需要告诉浏览器要显示的消息。

    如果未选中该复选框并单击“提交”按钮,则会显示类似于上述示例的警报,但使用我们的文本而不是默认值。

    3.gif

    总结:

    HTML5中表单内置验证规则是什么,有哪些内置验证规则呢?

    在HTML5中内置了很多表单的验证规则,这些验证规则会根据用户在input元素中输入的内容返回一个布尔值来告诉我们表单验证的状态。下面我们就来列举一些我们比较常用的内置验证规则吧:

    ValueMising规则

    示例:<input type="text" required value="" >

    目的:确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。

    用法:在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示:在input元素中接添加required属性也是可以的。

    详细说明:如果表单控件设置了required特性,那么在用户填写或者通过代码调用方式填值之前,控件会一直处于无效状态。例如,在示例中我们设置该控件的值为空,空的文本输入框无法通过必填检查,除非在其中输入任意文本。输入值为空时,valueMissing会返回true。表示没有通过验证。

    typeMismatch规则

    示例:<input type=“url” value=“miaomiaoxue”/ >

    目的:保证控件值与预期类型相匹配(如numbe、email、URL等)。

    用法: 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。

    详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号,或者number型控件的输入值不是有效的数字,示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况,typeMismatch将返回true。表示没有通过验证。

    patternMismatch规则

    示例:<input type="text" pattern=“/^[A-z]+$/" value=“1234“/>

    目的:根据表单控件上设置的格式规则验证输入的文本是否为有效格式

    用法:在表单控件上设置pattern特性,井赋予适当的匹配规则。

    详细说明:pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后,只要输入控件的值不符合模式规则,如示例中设定的正则表达式规则该控件的值含有字母和$符号,这里设置的值为1234,不符合规则设定,因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑,

    你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

    tooLong规则

    示例:<input type=“text” maxlength=“3” value=“hello“/ >

    目的:避免输入值包含过多字符。

    用法:在表单控件上设置maxLength特性。

    详细说明:如果输入值的长度超过maxLength,示例中最大设置为3,但值为hello,操过了3个字符的,tooLong规则就会返回true。虽然表单控件通常会在用户输入时最大长度,但在有些情况下,如通过程序设置,还是会超出最大值。

    rangeUnderflow规则

    示例:<input type=“text” min=“3” max=“5” value=“0" />

    目的:数值型控件的最小值。

    用法:为表单控件设置min属性,并赋予允许的最小值。

    详细说明:在需要做数值范围检查的表单控件中,数值很可能会暂时低于设置的下限,如示例中设置的值为0,而设置的min属性为3。此时,rangeUnderflow属性将返回true。

    rangeOverflow规则

    示例:<input type=“text” min=“3” max=“5” value=“7" />

    目的:数值型控件的最大值。

    用法:为表单控件设置max属性,并赋予允许的最大值。

    详细说明:与rangeUnderflow类似,如果一个表单控件的值比max属性值更大,如示例中设置的值为7,而设置的max属性为5。此时,rangeOverflow属性将返回true。

    stepMismatch规则

    示例:<input type=“text” min=“0” max=“100” step=“5” value=“17" />

    目的:确保输入值符合min、max及step即设置。

    用法:为表单控件设置step特性,指定数值的增量。

    详细说明:此约束条件用来保证数值符合min、max和step的要求。换句话说,当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100,step特性值为5,此时就不允许出现17,而可以是“0+5*X”X为(0~20)中任意一个值皆可。否则stepMismatch返回true值。

    valid规则

    示例:<input type=“range” min=“5” max=“20” step=“5” value=“10" />

    目的:验证表单控件是否满足所有的表单验证规则

    用法:适用于所有的input表单控件。

    详细说明:当该表单控件满足所有验证规则时,valid属性就是true,否则,只要有一项验证规则没通过,valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识,希望对你有帮助。

    HTML5 表单多条件验证问题

    1.输入型控件

    Input type

    用途

    说明

    email

    电子邮件地址文本框

    url

    网页URL文本框

    number

    数值的输入域

    属性 值 描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值

    range

    特定值的范围的数值,以滑动条显示

    属性 值 描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值

    Date pickers

    日期,时间选择器

    仅Opera9+支持,包含date, month, week, time, datetime, datetime-local

    search

    用于搜索引擎,比如在站点顶部显示的搜索框

    与普通文本框用法一样,只不过这样更语文化

    color

    颜色选择器

    仅Opera支持

    将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。
    E-mail:
    date:
    range: number: color:
    2. 表单新特性和函数
    2.1 placeholder
    当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。
    如:

    <p><label for="runnername">Runner:</label>
    <input id="runnername"name="runnername" type="text" placeholder="First and last name" />
    </p>

    Runner:
    2.2 autocomplete
    其实在IE6中,autocomplete就已经实现,不过现在这一特性终于标准化了,浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。

    类型

    作用

    on

    该字段无需保护,值可以被保存和恢复

    off

    该字段需要保护,值不可以保存

    unspecified

    包含<form>的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on

    如:

    <form action="" method="get" autocomplete="on">
    Name:<input type="text" name="name" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" />
    </form>

    当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。
    2.3 autofocus
    页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下,使用使用autofocus会惹恼用户。
    2.5 list特性和datalist
    通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:

    Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>

    Webpage:
    请在Opera9+或Firefox10+浏览器中查看。
    2.6 required
    required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:

    Name: <input type="text" name="usr_name" required="required" />

    2.7 pattern
    pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:

    Country code: <input type="text" name="country_code"
    pattern="[A-z]{3}" title="Three letter country code" />

    2.8 novalidate
    novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
    如:

    <form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
    </form>

    3. 表单验证
    表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。
    目前任何表单元素都有八种可能的验证约束条件:

    名称

    用途

    用法

    valueMissing

    确保控件中的值已填写

    将required属性设为true,
    <input type="text"required="required"/>

    typeMismatch

    确保控件值与预期类型相匹配

    <input type="email"/>

    patternMismatch

    根据pattern的正则表达式判断输入是否为合法格式

    <input type="text" pattern="[0-9]{12}"/>

    toolong

    避免输入过多字符

    设置maxLength,<textarea id="notes" name="notes" maxLength="100"></textarea>

    rangeUnderflow

    *数值控件的最小值

    设置min,<input type="number" min="0" value="20"/>

    rangeOverflow

    *数值控件的最大值

    设置max,<input type="number" max="100" value="20"/>

    stepMismatch

    确保输入值符合min,max,step的设置

    设置max min step,<input type="number" min="0" max="100" step="10" value="20"/>

    customError

    处理应用代码明确设置能计算产生错误

    例如验证两次输入的密码是否一致,等会DEMO细说

    下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看:
    源代码:

    <form name="register1" id="register1">
    <p><label for="runnername">RunnerName:</label>
    <input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
    </p>
    <p><label for="phone">Tel #:</label>
    <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
    placeholder="xxx-xxxx-xxxx"/></p>
    <p><label for="emailaddress">E-mail:</label>
    <input id="emailaddress" name="emailaddress" type="email"
    placeholder="For confirmation only"/></p>
    <p><label for="dob">DOB:</label>
    <input id="dob" name="dob" type="date"
    placeholder="MM/DD/YYYY"/></p>
    <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
    <p><label for="style">Shirt style:</label>
    <input id="style" name="style" type="text" list="stylelist" title="Years of participation"
    autocomplete="off"/></p>
    <datalist id="stylelist">
    <option value="White" label="1st Year"/>
    <option value="Gray" label="2nd - 4th Year"/>
    <option value="Navy" label="Veteran (5+ Years)"/>
    </datalist>

    <fieldset>
    <legend>Expectations:</legend>
    <p>
    <label for="confidence">Confidence:</label>
    <input id="confidence" name="level" type="range"
    onchange="setConfidence(this.value)"
    min="0" max="100" step="5" value="0"/>
    <span id="confidenceDisplay">0%</span></p>
    <p><label for="notes">Notes:</label>
    <textarea id="notes" name="notes" maxLength="100"></textarea></p>
    </fieldset>

    <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
    </form>

    HTML5 表单多条件验证问题

    1.输入型控件

    Input type

    用途

    说明

    email

    电子邮件地址文本框

    url

    网页URL文本框

    number

    数值的输入域

    属性 值 描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值

    range

    特定值的范围的数值,以滑动条显示

    属性 值 描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值

    Date pickers

    日期,时间选择器

    仅Opera9+支持,包含date, month, week, time, datetime, datetime-local

    search

    用于搜索引擎,比如在站点顶部显示的搜索框

    与普通文本框用法一样,只不过这样更语文化

    color

    颜色选择器

    仅Opera支持

    将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。
    E-mail:
    date:
    range: number: color:
    2. 表单新特性和函数
    2.1 placeholder
    当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。
    如:

    <p><label for="runnername">Runner:</label>
    <input id="runnername"name="runnername" type="text" placeholder="First and last name" />
    </p>

    Runner:
    2.2 autocomplete
    其实在IE6中,autocomplete就已经实现,不过现在这一特性终于标准化了,浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。

    类型

    作用

    on

    该字段无需保护,值可以被保存和恢复

    off

    该字段需要保护,值不可以保存

    unspecified

    包含<form>的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on

    如:

    <form action="" method="get" autocomplete="on">
    Name:<input type="text" name="name" /><br />
    E-mail: <input type="email" name="email" autocomplete="off" /><br />
    <input type="submit" />
    </form>

    当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。
    2.3 autofocus
    页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下,使用使用autofocus会惹恼用户。
    2.5 list特性和datalist
    通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:

    Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>

    Webpage:
    请在Opera9+或Firefox10+浏览器中查看。
    2.6 required
    required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:

    Name: <input type="text" name="usr_name" required="required" />

    2.7 pattern
    pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:

    Country code: <input type="text" name="country_code"
    pattern="[A-z]{3}" title="Three letter country code" />

    2.8 novalidate
    novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
    如:

    <form action="demo_form.asp" method="get" novalidate="true">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
    </form>

    3. 表单验证
    表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。
    目前任何表单元素都有八种可能的验证约束条件:

    名称

    用途

    用法

    valueMissing

    确保控件中的值已填写

    将required属性设为true,
    <input type="text"required="required"/>

    typeMismatch

    确保控件值与预期类型相匹配

    <input type="email"/>

    patternMismatch

    根据pattern的正则表达式判断输入是否为合法格式

    <input type="text" pattern="[0-9]{12}"/>

    toolong

    避免输入过多字符

    设置maxLength,<textarea id="notes" name="notes" maxLength="100"></textarea>

    rangeUnderflow

    *数值控件的最小值

    设置min,<input type="number" min="0" value="20"/>

    rangeOverflow

    *数值控件的最大值

    设置max,<input type="number" max="100" value="20"/>

    stepMismatch

    确保输入值符合min,max,step的设置

    设置max min step,<input type="number" min="0" max="100" step="10" value="20"/>

    customError

    处理应用代码明确设置能计算产生错误

    例如验证两次输入的密码是否一致,等会DEMO细说

    下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看:
    源代码:

    <form name="register1" id="register1">
    <p><label for="runnername">RunnerName:</label>
    <input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
    </p>
    <p><label for="phone">Tel #:</label>
    <input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
    placeholder="xxx-xxxx-xxxx"/></p>
    <p><label for="emailaddress">E-mail:</label>
    <input id="emailaddress" name="emailaddress" type="email"
    placeholder="For confirmation only"/></p>
    <p><label for="dob">DOB:</label>
    <input id="dob" name="dob" type="date"
    placeholder="MM/DD/YYYY"/></p>
    <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
    <p><label for="style">Shirt style:</label>
    <input id="style" name="style" type="text" list="stylelist" title="Years of participation"
    autocomplete="off"/></p>
    <datalist id="stylelist">
    <option value="White" label="1st Year"/>
    <option value="Gray" label="2nd - 4th Year"/>
    <option value="Navy" label="Veteran (5+ Years)"/>
    </datalist>

    <fieldset>
    <legend>Expectations:</legend>
    <p>
    <label for="confidence">Confidence:</label>
    <input id="confidence" name="level" type="range"
    onchange="setConfidence(this.value)"
    min="0" max="100" step="5" value="0"/>
    <span id="confidenceDisplay">0%</span></p>
    <p><label for="notes">Notes:</label>
    <textarea id="notes" name="notes" maxLength="100"></textarea></p>
    </fieldset>

    <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
    </form>

    HTML5中如何实现表单的自定义验证消息?

    实现表单自定义验证消息,实际上很简单。大体思路为:

    1、首先我们要设置表单的验证规则

    2、然后根据表单的验证规则定义要显示验证消息,

    3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉,然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。

    下面我们就来通过一个具体的示例进行讲解,你可以将这个示例直接放在浏览器中运行查看效果,但是要注意代码中引用了第三方类库jQuery,运行时你要自己设置一下:

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>Forms: 验证提示</title>

    // 设置一些必要的样式,如验证消息的文字样式和控制验证消息显隐的样式

    <style>

    input:valid {

    background: #fff;

    }

    input:invalid {

    background: #fcc;

    color: #333;

    }

    .validation-messages {

    margin-bottom:15px;

    }

    .validation-messages span {

    font-size:0.8em;

    background-color:#eee;

    padding:6px;

    border:1px solid #ccc;

    border-radius:10px;

    color:#666;

    }

    //所有class属性为hide的元素都会被隐藏

    .hide {

    display:none;

    }

    </style>

    </head>

    <body>

    <article>

    <h1>Forms<span> - 验证提示</span></h1>

    </article>

    <div id="result-stub" class="well hidden">

    <form id="change-email-form" name="change-email-form">

    <fieldset>

    <h4>修改邮箱地址</h4>

    //设置表单应该遵循的验证规则。

    //pattern 属性:规定用于验证输入字段的模式。

    //maxlength 属性:规定输入字段的最大长度,以字符个数计。

    //required属性:规定该input元素为必须的元素。

    <label>用户名:</label>

    <input type="text" name="username"

    id="username" pattern="[a-zA-Z ]{5,}"

    maxlength="30" required />

    //设置表单的验证消息,并结合class属性样式将其隐藏起来

    <div>

    //这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种

    <span data-rule="valueMissing"

    class="hide">用户名不能为空.</span>

    <span data-rule="patternMismatch"

    class="hide">必须是字母字符(长度应为5~30个字符).</span>

    </div>

    <label>邮箱地址:</label>

    //设置表单应该遵循的验证规则。

    <input type="email" name="email" id="email"

    title="Email address is required" required />

    //设置表单的验证消息,并结合class属性样式将其隐藏起来

    <div>

    <span data-rule="valueMissing">

    邮箱地址不能为空.</span>

    <span data-rule="typeMismatch">

    邮箱格式不正确.</span>

    </div>

    <hr />

    //设置两个按钮,作用分别是“清空表单内容和对表单中的内容进行验证

    <button type="submit" id="submit"

    name="submit">修改</button>

    <button type="button" id="checkValidation"

    name="checkValidation"

    class="btn">验证</button>

    </fieldset>

    </form>

    </div>

    <script>

    window.onload= function() {

    //---

    // 创建一个验证规则容器。

    var ruleNames = [];

    // 填充验证规则容器.

    // 寻找所有具有验证规则的元素,然后将该元素的data-rule属性值添加到验证规则数组中去。

    $("[data-rule]").each(function(i, element) {

    var ruleName = element.getAttribute('data-rule');

    if ($.inArray(ruleName, ruleNames) < 0) {

    ruleNames.push(ruleName);

    }

    });

    var

    // 首先确定用户界面隐藏了所有验证消息。

    // 然后在选定的表单上运行验证规则。

    validate = function() {

    $(".validation-messages span")

    .addClass('hide');

    document.getElementById('change-email-form')

    .checkValidity();

    },

    // 查询每个输入的元素,以确定哪个元素无效。

    // 一旦检测到无效元素,就遍历验证规则,找到无效的原因,然后通过消息对用户进行提示

    validationFail = function(e) {

    var

    element = e.srcElement,

    validity = element.validity;

    if (!validity.valid) {

    ruleNames.forEach(function(ruleName) {

    checkRule(validity,

    ruleName,

    element);

    });

    e.preventDefault();

    }

    },

    // 使用 input 元素 的ValidityState 对象的实例来运行验证规则。

    //如果这个验证规则返回ture,就表示无法通过验证,在表单中就会有相应的提示信息。

    checkRule = function(state, ruleName, ele) {

    if (state[ruleName]) {

    $(ele).next()

    .find('[data-rule="'

    + ruleName + '"]')

    .removeClass('hide');

    }

    };

    // 所有验证事件处理程序是附加在input元素上的而不是button元素

    $(':input:not(:button)').each(function() {

    this.oninvalid = validationFail;

    this.onblur = validate;

    });

    $('#checkValidation').click(validate);

    }

    </script>

    <script src="../js/jquery.js"></script>

    </body>

    </html>

    推荐你去教程网站秒秒学上过一遍相关知识,希望对你有帮助。

    HTML表单验证问题 JS进

    getElementById("id名称")可以获取对象的ID,判断是否被选中即为判断此单选按钮的checked值是否为true,综合上述代码即为:
    if(getElementById("单选按钮ID名称").checked==true){
    window.alert("给出的提示信息");
    return false;
    }
    验证text是否含有@符号可用indexOf方法实现:
    if(getElementById("text文本框的id").indexOf("@")==-1){
    window.alert("给出的提示信息");
    return false;
    }

    HTML表单验证问题 JS进

    getElementById("id名称")可以获取对象的ID,判断是否被选中即为判断此单选按钮的checked值是否为true,综合上述代码即为:
    if(getElementById("单选按钮ID名称").checked==true){
    window.alert("给出的提示信息");
    return false;
    }
    验证text是否含有@符号可用indexOf方法实现:
    if(getElementById("text文本框的id").indexOf("@")==-1){
    window.alert("给出的提示信息");
    return false;
    }

    表单验证怎么做?

    用JavaScript 数据即可做。

    一、JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

    二、下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true。

    function validate_required(field,alerttxt)

    {

    with (field)

    {

    if (value==null||value=="")

    {alert(alerttxt);return false}

    else {return true}

    }

    }

    三、下面是连同 HTML 表单的代码:

    <html>

    <head>

    <script type="text/javascript">function validate_required(field,alerttxt)

    {

    with (field)

    {

    if (value==null||value=="")

    {alert(alerttxt);return false}

    else {return true}

    }

    }

    function validate_form(thisform)

    {

    with (thisform)

    {

    if (validate_required(email,"Email must be filled out!")==false)

    {email.focus();return false}

    }

    }</script>

    </head>

    <body>

    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">

    Email: <input type="text" name="email" size="30">

    <input type="submit" value="Submit">

    </form>

    </body>

    </html>

    html中post表单提交验证

    <html>
    <head>引用JQ</head>
    <body>
    <form action="" onsubmit="return check()">
        <input type="text" name="name" id="name>
        <input type="password" name="pwd" id="pwd">
    </form>
    </body>
    <script>
    function check(){
        var name = $("#name").val();;
        var pwd  = $("#pwd").val();
        if(!name || !pwd ){
            alert("提示信息");
            return false;
        }
    }
    </script>
    </html>

    追问是在注册按钮那里加上吗?我注册按钮那里的onclick还有自定义的获取ip的一个程序,可以再加一个事件?

    追答可以写在同一个方法里

    html中post表单提交验证

    <html>
    <head>引用JQ</head>
    <body>
    <form action="" onsubmit="return check()">
        <input type="text" name="name" id="name>
        <input type="password" name="pwd" id="pwd">
    </form>
    </body>
    <script>
    function check(){
        var name = $("#name").val();;
        var pwd  = $("#pwd").val();
        if(!name || !pwd ){
            alert("提示信息");
            return false;
        }
    }
    </script>
    </html>

    追问是在注册按钮那里加上吗?我注册按钮那里的onclick还有自定义的获取ip的一个程序,可以再加一个事件?

    追答可以写在同一个方法里

    html问题。一个FORM表单,怎样让submit验证指定数据,验证成功后在提交至指定页面中呢?

    js方法:

    function check(){

    var name = document.getElementById("name").value;

    if(name == null || name == ''){

    alert("用户名不能为空");

    return false;

    }

    return true;

    }

    <form name="form" action="跳转的页面" method="post" onsubmit="return check()">

    <input type="text" id="name"/>

    <input type="sumit" value="提交"/>

    </form>

    html5表单验证用placeholder显示错误提示

    html5表单验证用placeholder显示错误提示:

    1、html5包含校验的placeholder如下:

    <form action="#" method="post">

        <div>

          <label for="name">Text Input:</label>

          <input type="text" placeholder="Your name" name="name" id="name" value="" tabindex="1" />

        </div>

        <div>

          <label for="name_2">Text Input 2:</label>

          <input type="text" placeholder="Your name" name="name_2" id="name_2" value="" tabindex="1" />

        </div>  

        <div>

          <label for="textarea">Textarea:</label>

          <textarea placeholder="Some text" cols="40" rows="8" name="textarea" id="textarea"></textarea>

        </div>

      <div>

          <label for="textarea">Textarea 2:</label>

          <textarea placeholder="Some text" cols="40" rows="8" name="textarea_2" id="textarea_2"></textarea>

        </div>

        <div>

          <input type="submit" value="Submit" />

        </div>

    </form>

    2、css样式:

    ::-webkit-input-placeholder {

        color:    #999;

    }

    :-moz-placeholder {

        color:    #999;

    }

    ::-moz-placeholder {

        color:    #999;

    }

    :-ms-input-placeholder {

        color:    #999;

    }

    /* Different color for some fields */

    #name_2::-webkit-input-placeholder,

    #textarea_2::-webkit-input-placeholder

    {

      color:    #FF0000;

    }

    #name_2:-moz-placeholder,

    #textarea_2:-moz-placeholder 

    {

      color:    #FF0000;

    }

    #name_2::-moz-placeholder,

    #textarea_2::-moz-placeholder 

    {

      color:    #FF0000;

    }

    #name_2:-ms-input-placeholder,

    #textarea_2:-ms-input-placeholder 

    {

      color:    #FF0000;

    }

    3、运行效果:

    提交出错就是红色的

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。