HTML5中的表单验证_html5 表单校验

作者：AllinToyou | 2024-02-18 22:10:36

踩

html5 表单校验

表单验证

在HTML 5中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，本节将针对这些验证进行详细介绍。

一、自动验证

在HTML 5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。

1．required属性

HTML 5中新增的required属性可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素中必须输入内容。


<!DOCTYPE html> 
<head> 
<meta charset="UTF-8"> 
<title>表单验证示例</title> 
</head> 
<body> 
<form method="post"> 
    <input name="text" type="text" required>
    <input type="submit"> 
</form> 
</body>

2．pattern属性

之前提到的一些新增的input元素，譬如email、number、url等，要求输入内容符合一定的格式，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。譬如下面所示，要求输入内容为一个数字与三个大写字母。

<input pattern="[0-9]|[A-Z]{3}" name=part placeholder="输入内容：一个数字与三个大写字母。">

展开

3．min属性与max属性

min与max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制了在input元素中输入的数值与日期的范围。

4．step属性

step属性控制input元素中的值增加或减少时的步幅。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5。

二、显式验证

除了对inut元素添加属性进行元素内容有效性的自动验证外，在HTML 5中，form元素与input元素（包括select元素与textarea元素）都具有一个checkValidity方法。调用该方法，可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。请看示例2中的示例。


<!DOCTYPE html> 
<meta charset=UTF-8 /> 
<title>checkValidity示例</title> 
<script language="javascript"> 
function check() 
{ 
    var email = document.getElementById("email"); 
    if(email.value=="") 
    { 
        alert("请输入Email地址"); 
        return false; 
    } 
    else if(!email.checkValidity()) 
        alert("请输入正确的Email地址"); 
    else 
        alert("您输入的Email地址有效"); 
} 
</script> 
<form id=testform οnsubmit="return check();"> 
<label for=email>Email</label> 
<input name=email id=email type=email /><br/> 
<input type=submit> 
</form>

另外还要提到的是，在HTML 5中，form元素与input元素都还存在一个validity属性，该属性返回一个ValidityState对象。该对象具有很多属性，但最简单，最重要的属性为valid属性，它表示了表单内所有元素内容是否有效或单个input元素内容是否有效。

三、取消验证

有时我们可能想要把表单临时提交一下，但又不想让它进行表单中所有元素内容的有效性检查。譬如，一个非常大的表单需要分成两部分（或几部分），在第二部分中有个文本框中内容是必须要填的，如果填每一部分内容则会耗时较多，或填完第一部分之后，第二部分要过一段时间再填，在这种情况下应该允许用户先提交保存第一部分内容，但是同时需要临时取消第二部分的内容表单验证。

有两种方法取消表单验证，第一种方法是利用form元素的novalidate属性，它可以关闭整个表单验证。当整个表单的第二部分需要验证的内容比较多，但又想先提交表单的第一部分内容时，可以使用这种方法。先把该属性设为true，关闭表单验证，提交第一部分内容，然后在提交第二部分时再把它设为false，打开表单验证，提交第二部分内容。

第二种方法是利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素失效，在前面所举例子中，当表单的第二部分中需要验证的元素数量很少时，可以只利用这些元素的formnovalidate属性，让表单验证对这些元素失效。

而如果对submit按钮使用了formnovalidate属性，点击该按钮时，相当于利用了form元素的novalidate属性，整个表单验证都失效了。

利用这一点，可以实现“假提交”与“真提交”的效果，例如一个提交按钮，不带表单验证，提交时不进行数据有效性检查，提交时临时保存到文件或什么地方，另一个提交按钮为真提交，提交后保存到数据库中。

HTML 5中许多新的input元素都带有对于输入内容的有效性的检查，如果检查不通过，浏览器会针对该元素提供错误信息。但有时开发者不想使用这些默认的错误信息提示，而想使用自己定义的错误信息提示。或者有时，想给某个文本框增加一种错误信息提示，譬如密码与确认密码不一致时用浏览器错误信息提示方式提供关于密码不一致的错误信息。

在HTML 5中，可以使用JavaScript调用各input元素的setCustomValidity方法来自定义错误信息。请看示例3中的示例。


<!DOCTYPE html><head> 
<meta charset="UTF-8"> 
<title>自定义错误信息示例</title> 
<script language="javascript"> 
function check() 
{ 
    var pass1=document.getElementById("pass1"); 
    var pass2=document.getElementById("pass2"); 
    if(pass1.value!=pass2.value) 
        pass2.setCustomValidity("密码不一致。"); 
    else 
        pass2.setCustomValidity(""); 
    var email=document.getElementById("email"); 
    if(!email.checkValidity()) 
        email.setCustomValidity("请输入正确的Email地址。"); 
} 
</script> 
<form id="testform" onSubmit="return check();"> 
密码：<input type=password name="pass1" id="pass1" /><br/> 
确认密码：<input type=password name="pass2"  id="pass2"/><br/> 
Email:<input type=email name="email1" id="email"/><br/> 
<input type="submit" /> 
</form>

在这个例子中，追加了两种错误信息提示。第一种情况为确认密码与密码不一致时，给确认密码文本框追加的自定义错误信息提示，溯览器提供的确认密码文本框本来没有这项检查内容。第二种情况为溯览器提供的Email文本框本来就有检查输入的Email是否符合Email格式的功能，但是开发者自行修改了浏览器默认的错误信息提示。

Opera是目前唯一支持自定义错误信息提示的浏览器。对于“值***不允许页面上的脚本使用！”这个前缀文字，也是该浏览器加在前面的，不能修改。所以，请小心使用自定义错误信息提示。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/110885