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
    回复 2019年11月18日 22:33  沙发

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

评论加载中...

发表评论

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