<body>

    <form>

        <!--

            required属性在提交表单时不能空着

            这个属性适用于<input> <textarea> <select>

        -->

        <input type='text' name='username' required>

        <!--

            email和url是两个得到支持的最多的类型

            email只允许输入符合电子邮件的格式

            url只允许输入的文本支持浏览器的格式

        -->

        <input type='email' name='email'>

        <input type='url' name='homepage'>

        <!--

            number类型，只允许输入数字，但是也可以输入不符的类型，但是提交的时候会

            提示错误，min是数的最小值，max最大值，step进位

        -->

        <input type='number' min='0' max='100' step='5' name='count' >

        <!--

            pattern 正则格式，允许表单输入的格式

        -->

        <input type='text' pattern="\d+" name='number' >

        <!--

            submit提交

        -->

        <input type='submit' value='提交' name='sub'>

    </form>

    <script>

        //检测表单字段是否是必填的

        var isUsernameRequired = document.forms[0].elements['username'].required;

        console.log( isUsernameRequired );//true

        //检测是否支持required

        var isRequriedSupported = 'required' in document.createElement('input');

        console.log( isRequriedSupported );//

        var count = document.forms[0].elements['count'];

        var sub = document.forms[0].elements['sub'];

        for (var i in document.forms[0])

        {

            console.log(i+' : '+document.forms[0][i])

        }

        sub.onclick = function(){

            //表单验证，只要有一个表单无效，就返回false

            if (document.forms[0].checkValidity())

            {

                alert('表单有效');

            }else{

                alert('表单无效');

            }

        }

    </script>

 </body>

5、检测有效性

customError：如果设置了setCustomValidity(),则为true，否则返回false。

6、禁用验证

　通过设置novalidate属性　

<form method='post' action='signup.php' novalidate>

        <!--这里插入表单元素-->

    </form>

如果一个表单中有多个提交按钮，为了制定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate

<form>

        <!--这里插入表单元素-->

        <input type='submit' value='Regular Submit'>

        <!--

            formnovalidate指定某个提交按钮不必验证表单

        -->

        <input type='submit' formnovalidate name='btnNoValidate' value='Non-validating Submit'>

    </form>

14.2.4HTML5约束API验证的更多相关文章

  1. python API验证

    API验证 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 API验证:     a. 发令牌: 静态         PS: 隐患 key ...

  2. API验证及AES加密

    API验证 API验证: a. 发令牌: 静态 PS: 隐患 key被别人获取 b. 动态令牌 PS: (问题越严重)用户生成的每个令牌被黑客获取到,都会破解 c. 高级版本 PS: 黑客网速快,会窃 ...

  3. CMDB服务器管理系统【s5day90】：API验证

    1.认证思路刨析过程 1.请求头去哪里拿? 1.服务器端代码: def test(request): print(request) return HttpResponse('你得到我了') 2.客户端 ...

  4. API验证插件

    前言 如果在访问某WebAPI过程中request信息被他人截获,若是get请求获取数据还好,如果是post提交数据,势必威胁数据安全,所以对于一个对安全性要求较高的API来说,对每个请求做身份验证显 ...

  5. API验证

    API验证说明 API验证: a. 发令牌: 静态 PS: 隐患 key被别人获取 b. 动态令牌 PS: (问题越严重)用户生成的每个令牌被黑客获取到,都会破解 c. 高级版本 PS: 黑客网速快, ...

  6. 基于 JWT-Auth 实现 API 验证

    基于 JWT-Auth 实现 API 验证 如果想要了解其生成Token的算法原理,请自行查阅相关资料 需要提及的几点: 使用session存在的问题: session和cookie是为了解决http ...

  7. CMDB 数据加密 最终整合API验证+AES数据加密

    当CMDB运行在内网的时候,经过API验证的三关是没有问题的,但是如果运行在外网,有一个问题是,黑客截取后的访问速度比客户端快的时候还会造成数据泄露.为了解决这个问题,就要对数据进行加密 RSA加密 ...

  8. CMDB API验证

    CMDB API验证 为什么做API验证 API验证是防止数据在传输的过程中,保证数据不被篡改 如何设计的API验证 灵感来源于Torando中加密Cookie的源码,主要是生成加密的随机字符串. M ...

  9. Java 9 揭秘（14. HTTP/2 Client API）

    Tips 做一个终身学习的人. 在此章中,主要介绍以下内容: 什么是HTTP/2 Client API 如何创建HTTP客户端 如何使HTTP请求 如何接收HTTP响应 如何创建WebSocket的e ...

随机推荐

  1. jquery中live is not a function的问题

    jquery中的live()方法在jquery1.9及以上的版本中已被废弃了,如果使用,会抛出TypeError: $(...).live is not a function错误. 解决方法: 之前的 ...

  2. android toolbar效果

    layout下的layout_main.xml: <?xml version="1.0" encoding="utf-8"?> <Relati ...

  3. OS与Internet

    1 操作系统 操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行 ...

  4. spark java.lang.OutOfMemoryError: unable to create new native thread

    最近迁移集群,在hadoop-2.8.4 的yarn上跑 spark 程序 报了以下错误 java.lang.OutOfMemoryError: unable to create new native ...

  5. kettle 无法正常启动问题

    Java环境配置后,双击spoon.bat无法打开 修改spoon.bat里内存配置: if "%PENTAHO_DI_JAVA_OPTIONS%"=="" s ...

  6. Sphinx 安装与使用

    Sphinx 优点 高速索引(接近10M/S) 高速搜索(2-4G文本搜索耗时不到0.1秒) 高可用性(单CPU支持100GB文本,100M文档) 提供相关性排名.分布式搜索.文档摘要(高亮显示) S ...

  7. java枚举类型

    jvm并不支持枚举类型,java中枚举类型是在编译器层面上实现的,先看如下代码: package demo.nio; public class EnumDemo { public static enu ...

  8. 最适合入门的Laravel中级教程(三)表单验证

    做开发有个原则是永远不能信任用户输入的数据: 即便前端已经做了验证: 在后端 php 也必须要再次验证: laravel 为表单验证提供了强大且简单的方案: 创建示例路由: routes/web.ph ...

  9. 深入理解Java中的IO

    深入理解Java中的IO 引言:     对程序语言的设计者来说,创建一个好的输入/输出(I/O)系统是一项艰难的任务 < Thinking in Java >   本文的目录视图如下: ...

  10. db2 SQL6036N解决办法

    问题背景: 数据库在进行大量的运算和数据处理的过程中,IO.CPU等资源消耗非常高的时候,强制停止数据库.db2stop force 结果数据库命令迟迟没有响应.这个时候对数据库进行其他操作均无响应, ...