跳转到帖子

  • 游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

    赤队小组-代号1949（原CHT攻防小组）在这个瞬息万变的网络时代，我们保持初心，创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识，您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告，请注册用户查看我们的使用与隐私策略，谢谢您的配合。小组成员可以获取论坛隐藏内容！

    TheHackerWorld官方

html5表单验证

 分享
NedK7

由 NedK7，
在 Html5

推荐的帖子

NedK7 Community Regular

NedK7

发布于
发布于

 

  • 1、基本表单验证特性介绍

  • ① html5表单新增了那些类型？
    • email、url、number、range、date、search、color、tel等
  • ② 文本框中，输入一次，下一次再输入会自动提示是哪个特性？
    • autocomplete
  • ③ 初始化页面之后，如何让input自动获取焦点？
    • autofocus
  • ④ html5如何设置表单元素必填？
    • required
  • ⑤ html5表单验证如何使用正则？
    • pattern
  • ⑥ html5表单中设置了必填，提交表单的时候如何做到不验证？
    • novalidate或formnovalidate
  • ⑦ 文本框灰色提示？
    • placeholder
  • ⑧ 如何实现提示选择？
    • list和datalist        

2、代码演示 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- <form action="" method="post" novalidate> -->
    <!-- <form action="" method="post" autocomplete="on"> -->
        <form action="" method="post" >
        <input type="file"><br><br>

        <label for="">用户名</label>
        <!--
            1、required：表示该项必须填写，不然提交不了 
            2、autofocus：自动获取焦点
            3、novalidate：在form上加，表示提交表单不验证
            4、formnovalidate：在submit上加，表示提交表单不验证
            5、正则^\d{5}[imooc]$：^\d以数字开头；{5}：五个数字；
                [imooc]$以这五个字母的一个为结尾(总共6位；例如：12345c)
            6、autocomplete：为on，输入一次，下一次再输入会自动提示；off则不是
        -->
        <input type="text" name="user" placeholder="请输入用户名" 
required="required" autofocus><br><br>

        <label for="">工号</label>
        <input type="text" name="gonghao" placeholder="请输入工号" 
pattern="^\d{5}[imooc]$"><br><br>

        <input type="text" list="tips">

        <datalist id="tips">
            <option value="abc1"></option>
            <option value="abc2"></option>
            <option value="abc3"></option>
        </datalist>
        <br><br>
        <input type="submit" value="按钮">
        <input type="submit" value="formnovalidate" formnovalidate>

    </form>
</body>
</html>

效果图：

 ?i=9cec5741f26543f69f0f8ddd2c8a52fb.png?

3、label中for的补充 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <form action="" method="post" >
        <!-- 
            1、for 属性规定 label 与哪个表单元素绑定。 
               作用是 在点击label 时 会自动将焦点移动到绑定的元素上
        -->
        <label for="man">男</label>
        <input type="radio" name="sex" id="man">
        <label for="woman">女</label>
        <input type="radio" name="sex" id="woman">
    </form>
</body>
</html>

效果图： 

?i=7dd13960e68b46c4ade9a9d1c4cc614c.png

 4、html5约束验证API

  • ① 约束的API有如下几个：
    • willValidate属性
    • validity属性
    • validationMessage属性
    • checkValidity()方法
    • setCustomValidity()方法
  • ② validity属性
  • ?i=49d22432e7ce49938c73849a816bd7af.png?
  • <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*将文本框右侧的×去掉*/
            input[type="search"]::-webkit-search-cancel-button {
                -webkit-appearance: none; 
                height: 15px;
                width: 15px;
                background-color: red;
            }
             /* 去掉上下箭头 */
            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" id="username" value="123456" pattern="^\d{5}"
 required maxlength="6" minlength="2"><br><br>
            <input type="search" name="search" id="search">
            <input type="submit"><br><br>
           <input type="number" id="numbers" max="5" min="3" value="8"><br>
           <input type="number" id="numbers"  value="0.02" 
step="3" oninput="checkLength(this, 5)">
        </form>
        <script>
            var user = document.getElementById('username');
            console.log(user.validity);// 对应上面的图看，每一项相互对应的
             // 控制输入位数
            function checkLength (obj, length) {
                    obj.value = obj.value.substr(0, length);
            }
        </script>
    </body>

</html>
  •  ③ checkValidity()方法：如果元素没有满足它的任意约束，返回false，其他情况返回true。 
  • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
      <form action="" method="post">
            <!-- text文本框里面的属性：只要有一个不符合，
            那么checkValidity()返回false，反之true -->
        <input type="text" value="adfsa" id="username" pattern="^\d{5}">
        <input type="email"  id="emails" value="[email protected]">
      </form>
        <script>
            var Emil = document.getElementById('emails');
            var user = document.getElementById('username');
            if (Emil.checkValidity()){
                alert('是一个邮箱');
            }
            else {
                alert('不是一个邮箱');
            }
            if (user.checkValidity()){
                alert('符合');
            }
            else {
                alert('不符合');
            }
        </script>
    </body>
</html>

  • ④ setCustomValidity()方法：设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。

 5、html自带验证美化（这块就是加css样式了，之后就没看）

  • ① 了解一些伪类及css选择器
    • ：required和：optional：
      • :required：设置输入框必填样式
      • :optional：设置输入框非必填样式
    • ：in-range和：out-of-range
      • :in-range：选择值在指定范围内的input元素
      • :out-of-range：选择值在指定范围外的input元素
    • ：valid和：invalid
      • :valid：有效，即当填写的内容符合要求的时候触发。
      • :invalid：无效，即当填写的内容不符合要求的时候触发。
    • ：read-only和：read-write
      • :read-only：用于匹配用户可编辑的元素，即可读和可写的元素
      • :read-write：匹配任何与:read-write选择器不匹配的元素
链接帖子
意见的链接
分享到其他网站
 分享
转到主题列表

黑客攻防讨论组

黑客攻防讨论组

  
    You don't have permission to chat.

    • 最近浏览   0位会员

      • 没有会员查看此页面。

    黑客世界站内导航 (SITE MAP)

    ×
    ×
    • 创建新的...