js实现表单实时验证做出提示

最新推荐文章于 2024-06-16 09:35:05 发布

有梦想的人运气不太差

最新推荐文章于 2024-06-16 09:35:05 发布

阅读量9.8k

点赞数 1

分类专栏： JavaScript 文章标签： html 表单 javascript

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文转自[打开](http://blog.csdn.net/u012063507/article/details/62417696)

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

结合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事件被触发，即显示提示文字和对应的输入框边框颜色变为红色：

填入内容后则提示消失：

有梦想的人运气不太差

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
js实现表单实时验证做出提示

本文转自[打开](http://blog.csdn.net/u012063507/article/details/62417696)对于有很多填写项目的表单，我们可能更希望在用户没有填写时或填写出错时，就即时显示提示，而不是等到提交时才进行验证。结合js的onblur事件和style.display属性可以实现此功能。html代码：<meta http-equiv="X-UA-Compat
复制链接

扫一扫