整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html5 中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，接下来我们来说1下自动验证。
在html5中，通过对元素使用属性的方法，可以实现在表单提交时履行自动验证的功能，在履行代码后，将在表单提交时自动验证输入的内容是不是为数字，如果验证通不过，将显示毛病信息文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表单验证示例</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" required pattern="^\w.*$">
<input type="submit" value="提交">
</form>
</body>
</html>
接下来我们来看1下在html5 中追加的关于对元素内输入内容进行限制的属性的指定。
1.required属性
html5 中新增的required属性可以利用在大多数输入元素上（除隐藏元素，图片元素按钮上）。在提交时，如果元素中内容为空白。则不允许提交，同时在阅读器中显示信息提示文字，提示用户这个元素中必须输入内容，效果如图
2.pattern属性之条件到的新增的input元素，比如email，number，URL等，要求输入内容符合1定的格式，对input元素使用pattern属性，并且将属性值设置为某个格式的正则表达式，在提交时会检查其内容是不是符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在阅读器中显示信息提示文字，提交输入的内容必须符合给定格式，代码以下，要求输入内容为1个数字与3个大写字母：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表单验证示例</title>
</head>
<body>
<form action="#" method="post">
请输入指定内容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="输入:1个数字3个大写字母">
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
3.min属性与max属性
min与max这两个属性是日期类型或数值类型的input元素的专用属性，他们限制了在input元素中输入的数值与日期的范围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表单验证示例</title>
</head>
<body>
<form action="#" method="post">
请输入数值:<input type="number" name="point" min="0" max="100" />
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
4.step属性
step属性控制input元素中的值增加过减少时的步骤。例如当你想让用户输入的值在0与100之间，但必须是5的倍数时，你可以指定step为5，代码以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表单验证示例</title>
</head>
<body>
<form action="#" method="get">
<input type="number" name="point" step="5" />
<input type="submit" />
</form>
</body>
</html>
效果以下：
原文：http://www.wfuyu.com/htmlcss/27520.html
<form method="提交方式" action="提交地址">
表单元素
</form>
1. <input type="元素类型" name="元素名称" />
2. 特殊的
<select>
<option value="选项的值">选项的文本</option>
...
</select>
<textarea name="" rows="行数" cols="列数">值</textarea>
1. 用来填的
text : 单行文本框
password : 密码框
textarea : 多行文本框
email : 邮件地址输入框
url : 网址输入框
number : 数字输入框
属性:
size可以控制宽度
maxlength可以控制最大输入的字符数
max(最大值), min(最小值)对number，range有效
2. 用来选的
checkbox : 复选框
radio : 单选框
select : 下拉列表框
属性:
checked用于默认选中radio和checkbox
selected用于默认选中select中的option选项
value用于设置元素的值
3. 用来点的
submit : 提交按钮
reset : 重置按钮
button : 一般按钮, 没有功能
image : 图片按钮, 功能上等同于submit
4. 其它的
file : 文件域, 用于文件上传
hidden : 隐藏域, 作用不明
range：滑块
设置表单要注意的地方
1. 一组radio应该设置相同的name, 这样才能"互斥"
2. 除按钮外, 其它表单元素都应该设置name属性
3. 用于选择的元素都应该设置value
表单元素的只读和禁用
readonly
disabled
使用label提高用户体验
label称为"标注", 可以扩大表单元素的可操作区域, 点击label就等价于点击了对应的表单元素.
方式一:
<label for="表单元素的id">文本</label>
方式二:
<label>
文本
<input />
</label>
1. 用户提示
<input placeholder="提示信息" />
2. 用required实现必填验证
<input required="required" />
3. 用pattern实现复杂的文本信息验证(正则表达式)
<input pattern="[a-zA-Z]{4,9}" /> //必须由4-9位字母组成
<input pattern="1[35][0-9]{9}" /> //必须是13xxxxxxxxx或15xxxxxxxxx
<input pattern="[\u4E00-\u9FA5]{5}" /> //必须由5位中文字符组成
注意: email, url等元素自带pattern验证规则
文共3663字，预计学习时长11分钟
来源：Pexels
表单验证是使用HTML5时的一个内置特性，HTML5提供了各种验证属性。作为浏览器端HTML和JavaScript的一部分。在将数据发送到服务器之前，我们可以使用它来验证表单输入。但是，我们应该信任发送的内容，所以最终验证应该仍然在服务器上进行。
当表单输入有效时，要素将显示:valid 伪类样式表。如果它是无效的，那么则出现:invalid 伪类样式表。
当表单输入无效时，浏览器将阻止表单提交并显示错误信息。
Pattern
Pattern应用于文本、检索、链接、电话、邮件和密码形式的输入元素。
·它将正则表达式设置为数值，然后浏览器对其进行验证。
Min
该属性适用于范围、数字、日期、月、周、时间、本地时间等类型的输入元素。
·当输入范围或数字时，它会检验该值是否大于或等于Min属性的给定值。
·当输入日期、月份或星期时，它会检验日期是否为该属性给定日期或在给定日期之后。
·当输入时间时，它会检验日期和时刻是否都大于或等于该属性给定时期。
Max
Max属性是min属性的对立面，它检查输入的内容是否小于或等于该属性的给定值。
·当应用于范围或数字类型的输入时，它将检查输入的数字是否小于或等于min属性的给定值
·当应用于日期、月份或星期等类型的元素时，它将检查日期是否小于或等于该属性值中给定的日期。
·当应用于时间类型输入时，它将检查日期和时间是否小于或等于min属性的给定值。
Required
该属性验证输入元素是否为空。
·它可以用于文本、检索、链接、电话、邮件、密码、日期、时间、月份、星期、数字、复选框、录音、文档，以及被选中内容和文本框等元素。
来源：Pexels
Step
Step检验输入值是否为整数。
·若输入日期类型的元素，它会检查天数是否为整数。
·若输入月份类型的元素，它会检查月份数是否为整数。
·若输入星期类型的元素，它会检查星期数是否为整数。
·若输入时间类型的元素，它会检查秒数是否为整数。
·若输入范围和数字类型的元素，它会检查范围和数值是否为整数。
Minlength
Minlength属性可应用于文本、检索、链接、电话、电子邮、密码和文本框类型的输入元素。
·它检查用户输入文本字数是否大于或等于该属性值。
Maxlength
Maxlength属性同样可应用于文本、检索、链接、电话、电子邮、密码和文本框类型的输入元素。
·它检查用户输入文本字数是否小于或等于该属性值。
我们可以通过将表单验证属性添加到元素中来使用它们。例如，编写一份以电子邮件地址作为输入的表单。
第一步，输入以下HTML语言：
<formid='form'> <labelfor="email">What's your email address?</label> <inputid="email" name="email" requiredpattern="[^@]+@[^\.]+\..+"> <buttontype='submit'>Submit</button></form>在上述代码中，输入元素带有required属性，根据设定进行输入。
同时，我们还以电子邮件地址的正则表达式作为值，对其添加pattern属性。
接着如下所示，当输入有效或无效时，我们通过添加样式表来改变输入元素的边界：
input:invalid { border: 1px solid red}input:vvalid { border: 1px solid black}来源：view rawinput.css 平台： GitHub
此处会用到文章开头提及的伪类样式来完成这一步骤。
最后，通过调用preventDefault来添加JavaScript代码以防止本例中的表单提交。
constform = document.querySelector('#form');form.onsubmit = (e) => { e.preventDefault();}
再举一个检查输入的长度和范围的例子。比如，编写如下 HTML代码来获取用户的姓名和年龄：
<formid='form'> <labelfor="name">What's your name?</label> <inputid="name" name="name" requiredminlength='5' maxlength='20'> <br> <spanid='name-too-short' hidden>Name is too short</span> <spanid='name-too-long' hidden>Name is too long</span> <br> <labelfor="age">What's your age?</label> <inputid="age" name="age" type='number' requiredmin='0' max='150'> <br> <spanid='age-too-high' hidden>Age is too high</span> <spanid='age-too-low' hidden>Age is too low</span> <br> <buttontype='submit'>Submit</button></form>输入的姓名和年龄都具有长度和范围属性，当输入无效时，可以看到以文中所示形式出现的输入信息。
与例一相同，当输入元素有效或无效时，输入样式表来更改输入框边界：
input:invalid { border: 1px solid red}input:vvalid { border: 1px solid black}最后，当输入无效时可以通过JavaScript看到验证信息：
const form = document.querySelector('#form');const name = document.querySelector('#name');const age = document.querySelector('#age');const nameTooShort = document.querySelector('#name-too-short');const nameTooLong = document.querySelector('#name-too-long');const ageTooLow = document.querySelector('#age-too-low');const ageTooHigh = document.querySelector('#age-too-high');form.onsubmit= (e) => { e.preventDefault();}name.oninput= (e) => { nameTooShort.hidden=true; nameTooLong.hidden=true; if (e.srcElement.validity.tooShort) { nameTooShort.hidden=false; }if (e.srcElement.validity.tooLong) { nameTooLong.hidden=false; }}age.oninput= (e) => { ageTooLow.hidden=true; ageTooHigh.hidden=true; if (e.srcElement.validity.rangeOverflow) { ageTooHigh.hidden=false; }if (e.srcElement.validity.rangeUnderflow) { ageTooLow.hidden=false; }}在上述代码中，将oninput事件处理程序设置为事件处理程序函数，以便检查后续输入的有效性。
在每个函数中，我先隐藏所有信息，这样就不会看到过时的消息了。然后，根据设置的最小和最大长度来检查名称输入是否太短或太长。
若出现任何错误，会在HTML中取消隐藏相应的信息。
来源：Pexels
同样，我们根据长度的最大最小设定值来检验年龄输入值是否在所属区间内。若出现错误，我们会在HTML中取消隐藏相应的信息。
通过HTML5和JavaScript，不需要任何函数库就可以检验各种类型输入值的有效性。
我们可以检验长度、范围、任何带有正则表达式的模式等输入元素，但在保存之前应当检查服务器端，因为部分用户仍可以破解浏览器端应用程序来跳过验证。
留言点赞关注
我们一起分享AI学习与发展的干货
如转载，请后台留言，遵守转载规范
*请认真填写需求信息，我们会在24小时内与您取得联系。
