<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. tips：Jquery的attr和prop的区别

    Jquery的attr和prop的区别 描述:想做一个复选框checkbox全选的功能,当勾选全选后,将子项的复选框状态设置成一致的, 但遇到了一个问题,就是attr函数并不能改变子项的checkbo ...

  2. Java入门到精通第4版汇总

  3. java.util.Stack类中的peek()方法

    java.util.stack类中常用的几个方法:isEmpty(),add(),remove(),contains()等各种方法都不难,但需要注意的是peek()这个方法. peek()查看栈顶的对 ...

  4. 使用List需要注意的点

    目录 1. 概述 2. Arrays.asList(); 2-1. 产生不可操作的集合 2-2. 需要传入对象数组而不是基本类型数组 3. arrayList.subList(); 3-1. subL ...

  5. Keepalived+MySQL实现高可用

    MySQL的高可用方案有很多,比如Cluster,MMM,MHA,DRBD等,这些都比较复杂,我前面的文章也有介绍.最近Oracle官方也推出了Fabric.有时我们不需要这么复杂的环境,这些方案各有 ...

  6. Mesh属性[Unity]

    Mesh属性[Unity] Mesh是Unity内的一个组件,称为网格组件.3D网格是Unity中最重要的图形元素.在Unity中存在多种组件用于渲染标准网格或者蒙皮网格.拖尾或者3D线条. 在Uni ...

  7. CSS表单2 组件排版

    <!DOCTYPE html> <html>     <head>         <title>单选按钮对齐</title>        ...

  8. oracle sql developer怎么创建用户

    学习数据库的时候,用管理员账户,会有会有很多系统自创的表,很麻烦.所以要自己创建普通用户. create user 用户名 identified by 密码;--创建用户 grant connect, ...

  9. [转]MAC系统下Sublime Text3 配置Python3详细教程（亲测有效）

    原文地址: https://blog.csdn.net/weixin_41768008/article/details/79859008?tdsourcetag=s_pctim_aiomsg 这段时间 ...

  10. 大数据入门到精通13--为后续和MySQL数据库准备

    We will be using the sakila database extensively inside the rest of the course and it would be great ...