元素
元素
工具
博客
问答

HTML表单必填字段的默认提示怎么改样式啊？

沐岩 Dev 阅读 38
前端

折腾了一下午都没搞定，我给输入框加了required属性，但提交时弹出的默认提示框太丑了，怎么才能改成自定义的提示文字和样式呢？

试过在input里写oninvalid="setCustomValidity('请输入')"，但这样文字还是不够友好。而且当用户输入错误后，怎么才能让提示框跟着光标动呢？

代码大概是这样的：

<form>
  <input type="text" required>
  <button>提交</button>
</form>

现在点提交直接弹出系统警告框，想改成页面内显示的提示信息，但不知道该从哪里下手...

我来解答 赞 7 收藏
二维码
手机扫码查看
反馈
1 条解答
庆敏
庆敏 Lv1
系统默认的验证提示确实丑到爆，改成页面内提示更友好。用CSS和JavaScript控制，代码如下：

<form id="myForm">

  <input type="text" required>

  <span class="error-tip" style="display:none;color:red;font-size:12px;">这里不能为空哦</span>

  <button>提交</button>

</form>



<script>

document.getElementById('myForm').addEventListener('submit', function(e) {

  var input = this.querySelector('input');

  var errorTip = this.querySelector('.error-tip');

  if (!input.value) {

    e.preventDefault();

    errorTip.style.display = 'inline';

    input.focus();

  } else {

    errorTip.style.display = 'none';

  }

});

</script>


这样改完提示信息就在页面里显示，不会跳出难看的系统弹框，样式想怎么调就怎么调。
点赞 2
2026-02-17 05:05
相关推荐
元素
元素
工具
博客
问答
登录/注册