HTML5--输入验证

最新推荐文章于 2024-07-08 16:22:22 发布

diligentyang

最新推荐文章于 2024-07-08 16:22:22 发布

阅读量3k

点赞数 2

分类专栏： HTML+CSS 文章标签： html5 表单验证

本文链接：https://blog.csdn.net/qq_28602957/article/details/52301603

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用输入验证

在获取用户输入数据的时候，得到的有可能是一些不堪敷用的东西。其原因可能是用户输入出错，也可能是设计者没有把自己想要的数据类型说清楚。

HTML5引入了对输入验证(input validation)的支持。设计者可以告诉浏览器自己需要什么类型的数据，然后浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。要是数据有问题，浏览器会提示用户进行更正，而且只有把这些问题解决后才能提交表单。

在HTML5中内置对输入验证的支持固然方便，但是，目前浏览器对这个特性的支持还不成熟，表现也不太一致。

在浏览器中验证输入数据的好处在于用户可以立刻得到问题反馈。不用经过服务器处理，大大提高了速度。

警告

浏览器所做的输入验证只是对服务器所做验证的补充，不能替代后者。首先：用户使用的浏览器未必能正确支持输入验证。其次：对恶意用户来说，绕过浏览器验证过程，直接将输入发送给服务器只是小菜一碟。

下表是表单元素对各种验证属性的支持情况：

验证属性	元素
required	textarea、select、input(text、password、checkbox、radio、file、datetime、datetime-local、date、month、time、week、number、email、url、search以及tel型)
min、max	input(datetime、datetime-local、date、month、time、week、number以及range型)
pattern	input(text、password、email、url、search以及tel型)

确保用户提供了一个值

最简单的输入验证是检查用户是否提供了一个值，这正是required属性的用途。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>required</title>
</head>
<body>
<form method="post" action="http://www.baidu.com">
    <label for="name">
        <input type="text" required id="name" name="name">
    </label>
    <button type="submit">提交</button>
</form>
</body>
</html>

运行结果如下所示：

支持输入验证的浏览器在显示上会略有差异，不过大体一致。上述例子用的是火狐浏览器。

提示

用value属性提供的初始值，可以满足required验证属性的要求，建议使用placeholder属性。

如果表单中存在多处问题，那么用户就不得不每次提交一次表单才能发现并改成一个错误，想剥洋葱一样一层一层地做下去。浏览器不能把所有验证错误一次性地告诉用户，而且错误提示的外观不受设计者控制。

确保输入值位于某个范围内

min和max属性可以用来确保输入的数值和日期数据位于指定的范围内。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>min和max</title>
</head>
<body>
<form method="post" action="http://www.baidu.com">
    <label for="name">
        <input type="text" required id="name" name="name">
    </label>
    <label for="price">
        <input type="number" min="0" max="100" id="price" name="price">
    </label>
    <button type="submit">提交</button>
</form>
</body>
</html>

运行结果为：

运行结果

提示

只有用户输入一个值后min和max属性控制的输入验证才会起作用。当设置这两个属性的文本框空着的时候，也允许提交表单，因此常常和required属性搭配使用。

确保输入值与指定模式匹配

pattern属性可以用来确保输入值与一个正则表达式匹配。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pattern</title>
</head>
<body>
<form method="post" action="http://www.baidu.com">
    <label for="name">
        <input type="text" required pattern="^.* .*$" id="name" name="name">
    </label>
    <button type="submit">提交</button>
</form>
</body>
</html>

运行结果

此例中运用正则表达式确保用户输入以空格分隔的姓氏和姓名。

提示

只有用户输入一个值后pattern属性控制的输入验证才会起作用。当设置这个属性的文本框空着的时候，也允许提交表单，因此常常和required属性搭配使用。

确保输入值是电子邮箱地址、电话号码和url

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的email、tel、url</title>
</head>
<body>
<form method="post" action="http://www.baidu.com">
    <label for="email">
        <input type="email" required id="email" name="email">
    </label>
    <button type="submit">提交</button>
</form>
</body>
</html>

运行结果为：

运行结果

注：

浏览器对于url，和tel的限定效果不是很好。尤其是对tel的支持是最差的。

禁用输入验证

有时候，需要提交一个表单来保存当前进度，以确保下次继续操作但不需要在此时验证，那么就用需要禁用输入验证。

可以设置form元素的novalidate属性，也可以设置用来提交表单的button元素的formnovalidate属性。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的email、tel、url</title>
</head>
<body>
<form method="post" action="http://www.baidu.com">
    <label for="email">
        <input type="email" required id="email" name="email">
    </label>
    <button type="submit">提交1</button>
    <button type="submit" formnovalidate>提交2</button>
</form>
</body>
</html>