<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. 自己动手制作的淘宝闲鱼APP宝贝数据采集工具软件

    之前做过淘宝PC端宝贝和店铺数据的采集,后来需要做APP端的数据采集,因为没有学过Android,以前也都是做PC端的软件,有没有其他方法呢? 突然想到了用手机模拟器,可以在电脑端控制运行手机APP端 ...

  2. MyISAM与InnoDB两者之间区别与选择，详细总结，性能对比

    1.MyISAM:默认表类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.不 ...

  3. scrapy-items

    items定义字段名字 import scrapy class HrItem(scrapy.Item): # define the fields for your item here like: ti ...

  4. py库： flask笔记

    http://flask.pocoo.org/ http://flask.pocoo.org/docs/0.12/api/#api API http://docs.pythontab.com/flas ...

  5. 基于LNMP的Zabbix4.0.1部署

     转:http://www.safecdn.cn/monitor/2018/12/lnmp-zabbix4-0-1-install/306.htmlZabbix4.0.1部署   一 安装源和Zabb ...

  6. Rabbitmq 与springboot 结合

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  7. java List<Map<String,Object>

    xml <select id="selectShopList" resultType="java.util.HashMap"> SELECT p.P ...

  8. poi横纵动态导入

    dao层 <insert id ="saveInTarget" parameterType="java.util.List" > INSERT IN ...

  9. java应用健康检查

    本文主要针对自己手写shell监控应用状态,有可系统解决方案的,比如K8S,可以略过 #!/bin/sh#health_check.sh count=`ps -ef | grep test.jar | ...

  10. jstl标准标签库 其他标签

    url操作标签 import 将另一个页面的内容引入到这个页面上来, 与include指令的区别: 这个标签可以引入其他项目中甚至网络上的资源 <c:import url="被导入的路 ...