js实现表单实时验证，显示提示

来源：互联网发布：java线程与进程的编辑：程序博客网时间：2024/05/21 11:28

对于有很多填写项目的表单，我们可能更希望在用户没有填写时或填写出错时，就即时显示提示，而不是等到提交时才进行验证。

结合js的onblur事件和style.display属性可以实现此功能。

html代码：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Register</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style type="text/css">  body{margin:0;padding: 0;}  .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}  .login legend{font-weight: bold;color: green;text-align: center;}  .login label{display:inline-block;width:130px;text-align: right;}  .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}  input{height: 20px;width: 170px;}  .borderRed{border: 2px solid red;}  img{display: none;}</style></head><body><div class="login">    <form name="form" method="post" action="register.php" >      <p><label for="name">UserName: </label>      <input type="text" id="name" >      <p id="titleNull"  style="display:none;"><font style="color:red;">不可为空</font></p>      </form>  </div> </body></html>

js控制代码：

<script type="text/javascript">  function hasClass(obj,cls){  // 判断obj是否有此class    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  }  function addClass(obj,cls){ //给 obj添加class    if(!this.hasClass(obj,cls)){       obj.className += " "+cls;    }  }  function removeClass(obj,cls){ //移除obj对应的class    if(hasClass(obj,cls)){       var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');      obj.className = obj.className.replace(reg," ");    }  }    function checkName(name){  //验证name    if(name != ""){ //不为空则正确      removeClass(ele.name,"borderRed"); //移除class，使原来的红色边框变为正常颜色      document.getElementById("titleNull").style.display = "none"; //不显示提示信息      return true;    }else{ //若为空      addClass(ele.name,"borderRed"); //添加class，使输入框变红     document.getElementById("titleNull").style.display = ""; //显示提示信息      return false;    }  }    var ele = {       name: document.getElementById("name")    };    ele.name.onblur = function(){ //name失去焦点则检测      checkName(ele.name.value);    }  </script>

当不填写内容，鼠标离开输入框时，onblur事件被触发，即显示提示文字和对应的输入框边框颜色变为红色：

填入内容后则提示消失：

0 0