如何实现同意条款复选框与<button>提交按钮的配合验证？

嘿，这个需求很好实现，我来帮你搞定！你提到看到很多人用<input type="submit">搭配复选框做条款同意校验，但想换成自定义样式的<button type="submit">按钮，其实只需要一个小改动就行。

先看看你找到的原<input>实现示例：

原实现代码 #

<form action="#" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('请确认您已阅读并同意条款和隐私政策'); return false; }">
<input type="checkbox" name="checkbox" value="check" id="agree" />
我已阅读并同意条款和隐私政策
<input type="submit" name="submit" value="Register" />
</form>

修改后的解决方案代码 #

<form action="#" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('请确认您已阅读并同意条款和隐私政策'); return false; }">
<input type="checkbox" required name="checkbox" value="check" id="agree" />
我已阅读并同意条款和隐私政策
<button type="submit" class="btn" name="reg_user">Register</button>
</form>

关键改动说明 #

只需要给复选框添加required属性即可：

<input type="checkbox" required name="checkbox" value="check" id="agree" />

这个属性会让浏览器自动校验复选框的勾选状态，配合你原有的onsubmit脚本逻辑，当用户没勾选复选框时，既会触发浏览器的原生校验提示，也会弹出你自定义的alert提示，确保用户必须同意条款才能提交表单，完全满足你的需求。

内容的提问来源于stack exchange，提问作者DM-98