HTML5 基础（4）—— HTML5表单新属性的使用和验证表单

最新推荐文章于 2024-04-20 14:59:10 发布

poorpenguin

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量1w

点赞数 1

分类专栏：前端 HTML5

本文链接：https://blog.csdn.net/weixin_39141044/article/details/80721154

版权

一、HTML5表单常用属性

这些都是比较常用的

属性名	说明
placeholder	在输入框无内容时显示灰色提示
autocomplete	部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on）
autofocus	让input自动获取焦点
required	设置表单元素为必填
pattern	表单验证使用正则
novalidate	该属性使用在form标签上，让设置了验证的表单可以直接提交 <form action=”…” novalidate>…</form>
formnovalidate	该属性使用在提交按钮上，让设置了验证的表单可以直接提交 <input type=”submit” value=”提交” formnonvalidate />
for	<label>的for属性是要配合<input>标签中的id属性使用的,点击label标签for对应id的input标签会获取焦点

（一）部分类型的input无法使用placeholder属性提示的解决方案

如输入日期

<input type="text" name="date" onfocus="(this.type='date')" placeholder="请输入日期"/>

这里写图片描述
点击后

缺点是需要用户点击2次

（二）<label>的for属性使用

    <label for="man">男</label>
    <input type="radio" id="man" name="sex" />
    <label for="woman">女</label>
    <input type="radio" id="woman" name="sex" />
    <br>
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" placeholder="请输入用户名" />

这里写图片描述
点击文字选中单选按钮

二、html5表单元素约束验证API

属性/方法/对象	说明
willValidate属性	元素元素有没有被符合。没有符合返回false
validity对象	元素当前验证状态（对象）
validationMessage属性	描述与元素相关约束的失败信息
checkValidity()方法	元素是否满足任意约束
setCustomValidity()方法	设置自定义的验证信息

（一）validity对象的属性

<form action="#">
    <input type="text" name="username" id="username" placeholder="请输入用户名" required pattern="^\d{4}$" />

    <input type="submit"/>
</form>
<script type="text/javascript">
    var input_username = document.getElementById('username');
    console.log(input_username.validity);
</script>

控制台会打印出
这里写图片描述

属性名	说明
valid:true/false	当前输入是否有效
badInput: false/true	输入的值是否无效
patternMismatch: false/true	正则表达式验证失败
rangeOverflow: false/true	输入值是否超过max的限定
rangeUnderflow: false/true	输入值是否小于min的限定
tooLong : false/true	输入的字符数是否超过maxlength
tooShort : false/true	输入的字符数是否小于minlength
stepMismatch : false/true	输入的数字不符合step限制
typeMismatch : false/true	输入值不符合email、url的验证
valueMissing : false/true	未输入值，违反了required要求
customError : false/true	是否存在自定义错误

只要有一个验证方面错误，某个属性就为true，valid值为false
只有没有任何验证错误，所有的属性都为false，valid才能为true
上述的每个错误在浏览器内部都有一个预定义的错误提示消息
所有的错误消息中，只要存在“自定义的错误消息”，浏览器只显示自定义的错误消息，优先级高于浏览器预定义的错误消息（设置自定义错误消息用setCustomValidity()）
当前没有自定义错误消息，所以customError : false

获取与约束相关的属性

validity对象中的每一个属性代表一个验证状态，false表示验证没问题，true表示不符合验证

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        <form action="" method="get" id="forms">
            <input type="text" id="username" placeholder="用户名" required />
            <input type="password" id="pws" placeholder="密码" required />
            <input type="email" id="email" placeholder="邮箱" required />
            <input type="submit" value="提交" id="submitBtn">
        </form>
        <script>
            var form = document.getElementById("forms"),
            submitBtn = document.getElementById("submitBtn");

            submitBtn.addEventListener("click", function() {
    
                var invalidFields = form.querySelectorAll(":invalid");
                for(var i=0,len=invalidFields.length;i<len;++i){
                    console.log('input#'+invalidFields[i].id+':'+invalidFields[i].validationMessage);
                }
            });
        </script>
    </body>
</html>

:invalid表示无效，即当填写的内容不符合要求的时候触发，form.querySelectorAll(“:invalid”);表示查询表单失效的元素。
这里写图片描述

(二)checkValidity()方法（常用）

一个input有许多约束条件，只有都满足了，才返回true，只要有任意一个约束条件不满足就返回false

<body>
    <form action="">
        <input type="text" id="username" value="" required pattern="^\d{}">
    </form>
    <script>
        var names = document.getElementById("username");
        if(names.checkValidity()){
            alert("符合验证条件");
        }else{
            alert("不符合验证条件");
        }
    //或者
        if(username.checkValidity()){
            alert("符合验证条件");
        }else{
            alert("不符合验证条件");
        }
    </script>
</body>

PS:
在HTML5中，js中一个元素的id就代表该元素的dom元素

document.getElementById("username")===username //值为true

不过不建议这样用，容易和变量混淆。

setCustomValidity()方法（常用）

设置自定义的验证提示信息，用于根据validity对象中的验证约束来覆盖预定义的信息。

<body>
    <form action="" method="get">
        <input type="url" oninput="checkit(this)">
        <input type="submit" value="提交">
    </form>
    <script>
        function checkit(obj) {
    
            var it = obj.validity;
            if(it.typeMismatch === true){
                obj.setCustomValidity("请输入带http://的网站");
            }
        }
    </script>
</body>

这里写图片描述

三、HTML5<input>标签部分类型的限制和去除默认样式

(一)input[type=search]

1.去除默认按钮

这里写图片描述

<head>
<meta charset="UTF-8" />
<style>
    input[type="search"]::-webkit-search-cancel-button{
        -webkit-appearance:none; //去除浏览器的默认样式
        height: 12px;
        width: 12px;
        background-color: red;
    }
</style>
</head>
<body>
    <form action="#">
    <input type="search" name=

最低0.47元/天解锁文章

poorpenguin

关注

1
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
HTML5 基础（4）—— HTML5表单新属性的使用和验证表单

一、HTML5表单常用属性这些都是比较常用的属性名说明 placeholder 在输入框无内容时显示灰色提示 autocomplete 部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on） autofocus 让input自动获取焦点 required 设置表单元素为必填 pattern 表...
复制链接

扫一扫