H5中oninout、 oninvalid事件（自定义正则验证表单）

最新推荐文章于 2022-09-08 19:37:17 发布

zuo_zuo_blog

最新推荐文章于 2022-09-08 19:37:17 发布

阅读量3k

点赞数 2

分类专栏：正则表达式 H5/CSS3

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/88853409

版权

H5/CSS3 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

正则表达式

6 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           form{
               width: 1000px;
               max-width: 640px;
               min-width: 320px;
               margin:0 auto;
               font-size:20px
           }
           input{
               display: block;
               height: 30px;
               font-size: 20px;
               width: 100%;
               margin: 10px 0;
           }
       </style>
   </head>
   <body>
       <form action="">
           <fieldset>
               <legend>表单事件</legend>
               <label for="">
                   用户名：<input type="email" name="username" id="txt1"/>
               </label>
               <label for="">
                   密码：<input type="text" name="password" id="txt2"/>
               </label>
               <input type="submit" />
           </fieldset>
       </form>
       <script>
           //表单事件：oninout 当用户输入的时候
           //oninvalid 当验证不通过的时候触发
           var text1=document.getElementById('txt1');
           var text2=document.getElementById('txt2');

           var num=0;
           text1.οninput=function(){
               num++;
               //将字数显示在2中
               txt2.value=num;
           }
           //oninvalid 一般用于设置验证不通过时的提示文字
           text1.oninvalid=function(){
               //用于设置验证不通过时的提示文字
               this.setCustomValidity('会输入邮箱吗')
           }
       </script>
   </body>
</html>

zuo_zuo_blog

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5中oninout、 oninvalid事件（自定义正则验证表单）

代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> form{ width: 100...
复制链接

扫一扫