h5-表单验证

最新推荐文章于 2024-11-30 12:59:47 发布

LLL。。

最新推荐文章于 2024-11-30 12:59:47 发布

阅读量876

点赞数 2

文章标签： html 前端 html5 webview

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_54057363/article/details/123687558

版权

本文介绍了HTML5中表单验证的基本用法，包括利用validity对象检查输入值的合法性，如valueMissing、typeMismatch等属性。通过示例展示了如何在用户提交表单时触发自定义验证，并使用setCustomValidity设置错误消息，阻止非法提交。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>表单验证</title>

</head>

<body>

<!--

表单验证反馈

validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false

node.addEventListener('invalid',fn1,false);

valueMissing : 输入值为空时返回true

typeMismatch : 控件值与预期类型不匹配返回true

patternMismatch : 输入值不满足pattern正则返回true

tooLong : 超过maxLength最大限制返回true

rangeUnderflow : 验证的range最小值返回true

rangeOverflow

最低0.47元/天解锁文章

LLL。。 CSDN认证博客专家 CSDN认证企业博客

码龄4年

52: 原创

56万+: 周排名

200万+: 总排名

3万+: 访问

: 等级

605: 积分

6: 粉丝

82: 获赞

24: 评论

19: 收藏

私信

关注

热门文章

分类专栏

笔记 1篇

最新评论

canvas-使用图片背景
caozheng0417: image.onload 这里为什么没有执行
canvas-变换-rotate(旋转)
小徐努力敲代码: 多边形旋转也一样吗
H5-初识音视频-音视频引入及兼容性写法
LLL。。: ac、ogg等格式可以在格式化工厂一键转换
h5-鼠标拖拽方块-封装后
LLL。。: 2.拿到鼠标移动的距离鼠标点击的位置鼠标移动时，实时的位置鼠标移动实时的距离 = 鼠标移动时实时距离-鼠标点击的位置 3.确定鼠标移动后，元素的位置(元素起始位置+鼠标移动的距离) */ window.onload = function () { var t = document.querySelector('#test'); var imgt = document.querySelector('img'); $.drag(t,true,10,imgt); // t - 鼠标拖拽元素 // flag - 是否限制范围 // value - 吸附程度(adsorption吸附因子) // imgt - 碰撞元素 // t - 鼠标拖拽元素 } </script> <script src="/音视频/视频播放器实例/js/drag_new.js"></script> </body> </html>
h5-鼠标拖拽方块-封装后
LLL。。: 补充--- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖拽案例-封装后</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; ; overflow: hidden; } #test { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: #bfa; border: 1px solid black; } #goods { position: absolute; left: 220px; top: 240px; width: 200px; height: 140px; border: 1px solid black; } </style> </head> <body> <div id="test"></div> <img src="/射线2.jpg" id="goods" /> <script> /*拖拽的思路 1.拿到鼠标点击元素时,元素一开始的位置

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。