html5的表单验证

最新推荐文章于 2022-09-13 10:26:55 发布

一千次晚安。

最新推荐文章于 2022-09-13 10:26:55 发布

阅读量393

点赞数 1

分类专栏：前端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_46104231/article/details/120933797

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html5表单新增的类型：

邮箱验证：email网址验证：url电话号码验证：tel数字验证：number查找：search日期选择：date选择周：week选择月：month日期和时间：datetime 非本地时间日期和时间：fatetime-local 本地时间颜色：color范围值：range

文本框中，输入一次，下一次会自动提示的属性为autocomplete

初始化页面后，让第一个输入框为焦点的属性为autofocus

设置表单元素必须填写的属性为required

设置表单验证使用正则的属性为pattern

不验证的属性为novalidate（form），按钮为formnovalidate

如果要设置一个上传文件的input，需要在form标签中添加enctype属性，这里设置了autocomplete为off，不会有记住密码的功能。

placeholder默认显示的值，required表示必填字段，autofocus在刷新页面时焦点在这个输入框

pattern当中可以写正则表达式进行一个匹配

list属性可以为输入框添加一个候选，需要给出id字段的值，在下面写出datalist 并且id等于，然后写option value=""

label的for用于单选框比较多一点，也是id属性对应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5表单测试</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data" autocomplete="off">
        <input type="file" name="" id="">
        
        <label for="">用户名：</label>
        <input type="text" name="user" placeholder="请输入用户名" required autofocus />
        <label for="">工号：</label>
        <input type="text" name="gonghao" placeholder="请输入工号" pattern="^\d{5}[test]$" >

        <input type="text" list="tips">
        <datalist id = "tips">
            <option value="test1"></option>
            <option value="test2"></option>
        </datalist>

        
        <label for="man">男</label>
        <input type="radio" name="sex" id="man" required>
        <label for="feman">女</label>
        <input type="radio" name="sex" id="feman" required>

        <!-- <input type="submit" formnovalidate /> -->
        <input type="submit">
        
    </form>
</body>
</html>

validity属性中有很多属性用于判断输入框中是否满足一些约束，obj.validity.valueMissing为是否为空，如果不为空则是false，空则是true。obj.validity.patternMismatch表示正则是否匹配，匹配则是false，不匹配则是true

obj.setCustomValidity("必须是五个数字！");setCustomValidity可以设置提醒的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validity</title>
</head>
<body>
    <form action="" method="post">
        <label for="">id:</label>
        <input type="text" name="username" id="username" oninput="checkit(this)" placeholder="请输入id" required pattern="^\d{5}$">
        <input type="submit" value="提交">

    </form>
    <script>
        function checkit(obj){
            
            if( true== obj.validity.valueMissing){
                obj.setCustomValidity("不能为空！");
            }
            else{
                if (obj.validity.patternMismatch == true){
                    obj.setCustomValidity("必须是五个数字！");
                }else{
                    obj.setCustomValidity('');
                }
            }
        }
    </script>
</body>
</html>

一千次晚安。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5的表单验证

html5表单新增的类型：邮箱验证：email网址验证：url电话号码验证：tel数字验证：number查找：search日期选择：date选择周：week选择月：month日期和时间：datetime 非本地时间日期和时间：fatetime-local 本地时间颜色：color范围值：range文本框中，输入一次，下一次会自动提示的属性为autocomplete初始化页面后，让第一个输入框为焦点的属性为autofocus设置表单元素必须填写的属性为required设置表单验证使用正.
复制链接

扫一扫