HTML5表单事件oninput,oninvalid及setCustomValidity设置提示信息

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>HTML5表单设置(重置)提示信息</title>
  6.     </head>
  7.     <body>
  8.         <form action="test.php" method="get">
  9.             用户名:<input type="text" name="userName" id="userName"/><br>
  10.             电话:<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"/><br>
  11.             <button>提 交</button>
  12.         </form>
  13.         <script type="text/javascript">
  14.             /*1.oninput:监听当前指定元素内容的改变,只要内容改变(添加内容,删除内容)就会触发这个事件*/
  15.             document.getElementById("userName").oninput=function (){
  16.                 console.log("oninput:"+this.value);
  17.             };
  18.             /*2.oninvalid:当验证不通过时触发  setcustomValidity 设置默认提示信息*/
  19.             document.getElementById("userPhone").oninvalid=function (){
  20.             this.setCustomValidity("请输入合法的11位手机号");
  21.             };
  22.             /*onkeyup:当键盘弹起的时候触发:每一个键的弹起都会出发一次*/
  23.             document.getElementById("userName").onkeyup=function (){
  24.                 console.log("onkeyup:"+this.value);
  25.             };
  26.         </script>
  27.     </body>
  28. </html>

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

目前评论:1   其中:访客  1   博主  0

  1. avatar 谙年博客 0

    博主的文章很不错哦~
    这里是谙年博客,欢迎回访,友链互换。

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: