<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. 01-简单编写http服务器

    package com.day3; import java.io.IOException; import java.io.InputStream; import java.net.ServerSock ...

  2. Struts2 中常用的代码

    BaseAction public class BaseAction extends ActionSupport { protected String target; public Map getRe ...

  3. 实验四：xl命令的常见子命令以及操作

    实验名称: xl命令的常见子命令以及操作 实验环境: 这里我们需要正常安装一台虚拟机,如下图: 我们这里以一台busybox为例,来进行这些简单的常见的操作: 实验要求: 这里我们准备了5个常见操作: ...

  4. mysql数据库存中文字段

    mysql数据默认编码是拉丁,而我们更多的使用utf8, 在创建库的时候执行参数即可: CREATE DATABASE IF NOT EXISTS yourdbname DEFAULT CHARSET ...

  5. @controller不能被识别

    记得controller的类不能起名为Controller,否则不能被识别!!!!!

  6. 1安装Linux

    第二天笔记打卡. 系统安装注意:1.DATE&TIME2.Server with GUI3.分区默认4.网络开启 源代码安装:1.安装难度高2.编译环境复杂3.解决依赖关系 源代码:2.部署编 ...

  7. Centos安装ffmpeg

    yum install -y ffmpeg 使用上面的命令安装却出现以下问题: Google后发现缺少一些扩展: wget https://download1.rpmfusion.org/free/e ...

  8. ceph结构详解

    引言 那么问题来了,把一份数据存到一群Server中分几步? Ceph的答案是:两步. 计算PG 计算OSD 计算PG 首先,要明确Ceph的一个规定:在Ceph中,一切皆对象. 不论是视频,文本,照 ...

  9. 安全运维之：Linux后门入侵检测工具的使用

    安全运维之:Linux后门入侵检测工具的使用 https://blog.csdn.net/exitgogo/article/details/39547113

  10. Educational Codeforces Round 63-D（基础DP）

    题目链接:https://codeforces.com/contest/1155/problem/D 题意:给定n个数,可以选择一段连续子段将其乘x,也可以不操作,求最大连续子段和. 思路:比赛时觉得 ...