<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. 涂抹mysql笔记-InnoDB/MyISAM及其它各种存储引擎

    存储引擎:一种设计的存取和处理方式.为不同访问特点的表对象指定不同的存储引擎,可以获取更高的性能和处理数据的灵活性.通常是.so文件,可以用mysql命令加载它. 查看当前mysql数据库支持的存储引 ...

  2. 杂谈2.cpp

    Ostream类定义的插入运算符(<<)使数据插入到输出流,istream定义的抽取运算符(>>)能够从输入流中抽取信息 Cin和cout都是智能对象,能够根据程序上下文将信息 ...

  3. Action Form的过程

    1.读取配置(初始化ModuleConfig对象) Struts框架总控制器(ActionServlet)是一个Servlet, 在web.xml中配置成自动启动的Servlet. 读取配置文件(st ...

  4. java 解耦

    探索目的:使用的时候,只需要一次调用就可以完成日常复杂的操作.而工具类的高耦合带来业务代码维护复杂度加大.以 java 的思想对原始工具加以改进. 有没有比这里尝试的方法更高明的,在 A_Utils. ...

  5. DateTimeOffset DateTime

    DateTime只保存两部分信息:Ticks和KindTicks 一个Tick是100纳秒(1万Tick等于1毫秒)Ticks记录了从1/1/0001 12:00 AM到现在经过了多少100纳秒.Ki ...

  6. leetcode17

    回溯法,深度优先遍历(DFS) public class Solution { int[] x; int N; string DIGITS; Dictionary<char, List<s ...

  7. Eclipse 中Git的使用及如何解决冲突

    1. 如何导入已有Git项目 1.1 File——>import… 出现以下界面 1.2 找到Git,然后双击‘Project from Git.或者点击next 1.3 双击Clone URI ...

  8. js 模拟css3 动画3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Spring系列之Spring常用注解总结 转载

    Spring系列之Spring常用注解总结   传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点:1.如果所有的内容都配置在.xml文件中,那么.x ...

  10. opencv setTo（）

    转载至 作者:跬步达千里 opencv的setTo函数是将图像设置为某个值; 例如: 1.有一个Mat src,想将他的值全部设置成0,则可以src.setTo(0) 2.setTo还有更为高级的用法 ...