文本输入提示

最新推荐文章于 2023-12-18 12:15:18 发布

footprint01

最新推荐文章于 2023-12-18 12:15:18 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/footprint01/article/details/82789239

版权

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <style type="text/css">
    fieldset {
      width: 50%;
      margin: auto;
      border-radius: 8px;
    }
    span {
      display: block;
    }
    input {
      border: none;
      border-bottom: 1px solid #000000;
    }
    .msg {
      color: red;
    }
  </style>
</head>
<body>
  <fieldset>
    <legend>注册</legend>
    <div>
      <span><label>账号：</label><input type="text" name="username" onblur="check(event);"><label class="msg"></label></span>
      <span><label>邮箱：</label><input type="text" name="email" onblur="check(event);"><label class="msg"></label></span>
      <span><label>手机：</label><input type="text" name="phone" onblur="check(event);"><label class="msg"></label></span>
    </div>
  </fieldset>
</body>
<script type="text/javascript">
  function check(evn) {
    var ele = evn.target;
    if (ele.value.trim().length == 0) {
      ele.style.borderColor = "red";
      ele.nextElementSibling.innerText = "该项不可为空";
    } else {
      ele.style.borderColor = "black";
      ele.nextElementSibling.innerText = "";
    }
  }
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

footprint01

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本输入提示

&lt;!DOCTYPE html&gt;&lt;html lang="zh-cmn-Hans"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style type="text/css"&gt; fieldset { width: 50%; margin: auto;
复制链接

扫一扫