14.2.4HTML5约束API验证
<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验证的更多相关文章
- 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 ...
- API验证及AES加密
API验证 API验证: a. 发令牌: 静态 PS: 隐患 key被别人获取 b. 动态令牌 PS: (问题越严重)用户生成的每个令牌被黑客获取到,都会破解 c. 高级版本 PS: 黑客网速快,会窃 ...
- CMDB服务器管理系统【s5day90】：API验证
1.认证思路刨析过程 1.请求头去哪里拿? 1.服务器端代码: def test(request): print(request) return HttpResponse('你得到我了') 2.客户端 ...
- API验证插件
前言 如果在访问某WebAPI过程中request信息被他人截获,若是get请求获取数据还好,如果是post提交数据,势必威胁数据安全,所以对于一个对安全性要求较高的API来说,对每个请求做身份验证显 ...
- API验证
API验证说明 API验证: a. 发令牌: 静态 PS: 隐患 key被别人获取 b. 动态令牌 PS: (问题越严重)用户生成的每个令牌被黑客获取到,都会破解 c. 高级版本 PS: 黑客网速快, ...
- 基于 JWT-Auth 实现 API 验证
基于 JWT-Auth 实现 API 验证 如果想要了解其生成Token的算法原理,请自行查阅相关资料 需要提及的几点: 使用session存在的问题: session和cookie是为了解决http ...
- CMDB 数据加密 最终整合API验证+AES数据加密
当CMDB运行在内网的时候,经过API验证的三关是没有问题的,但是如果运行在外网,有一个问题是,黑客截取后的访问速度比客户端快的时候还会造成数据泄露.为了解决这个问题,就要对数据进行加密 RSA加密 ...
- CMDB API验证
CMDB API验证 为什么做API验证 API验证是防止数据在传输的过程中,保证数据不被篡改 如何设计的API验证 灵感来源于Torando中加密Cookie的源码,主要是生成加密的随机字符串. M ...
- Java 9 揭秘（14. HTTP/2 Client API）
Tips 做一个终身学习的人. 在此章中,主要介绍以下内容: 什么是HTTP/2 Client API 如何创建HTTP客户端 如何使HTTP请求 如何接收HTTP响应 如何创建WebSocket的e ...
随机推荐
- 第18课 类型萃取（2）_获取返回值类型的traits
1. 获取可调用对象返回类型 (1)decltype:获取变量或表达式的类型(见第2课) (2)declval及原型 ①原型:template<class T> T&& d ...
- JAVA 每周一 每周日 时间
Calendar cal = Calendar.getInstance(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd&q ...
- Python的随机数模块
random模块中几个随机函数用法. 引入random模块: import random 1.random.random() 此函数用于生成一个0到1的随机浮点数:0 <= n < 1.0 ...
- 一步步实现：springbean的生命周期测试代码
转载. https://blog.csdn.net/baidu_37107022/article/details/76552052 1. 创建实体SpringBean public class Spr ...
- LeetCode contest-95[876,877,👁878]
876. Middle of the Linked List first submission # Definition for singly-linked list. # class ListNod ...
- 为何要使用ViewModel
ViewModel类是用来存储和管理与UI相关的数据,在设计之初就考虑到生命周期的影响.ViewModel允许数据在屏幕旋转等配置变化后存活. Android framework管理UI控制器(如Ac ...
- 富文本编辑器Ueditor 及 hibernate 逆向工程
1.1 富文本编辑器Ueditor ueditor下载地址: http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本.完整demo可参考下载文件 ...
- maven构建SSM框架中pom.xml文件配置
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 尚硅谷springboot学习31-jdbc数据连接
可以使用JdbcTemplate操作数据库,可以在启动的时候自动建表,更新数据表 配置依赖 <dependency> <groupId>org.springframework. ...
- MYSQL性能优化（2）
Insert语句优化 1. 多行并为一个语句 insert into table values (行1),(行2),........... 2. 使用中间内存队列, 逻辑是立马执行插入,其他数据放 ...