需要有关 PHP 或 Javascript 验证的帮助

Question

我不知道如何在页面内进行自我验证。

我有一个 php 文件，其中包含一个复选框和很多文本框。我想做的是，用户将在复选框上选中的内容将需要填写文本框。我试图在 php 中使用我的语句进行验证，但它总是在验证所有内容之前重定向到另一个页面，我想要的是当用户单击提交按钮时，它将触发整个页面并验证应该填写的页面。

1. 用户将选中任何复选框
2. 那么它就有了相应的条件，使得需要填写的文本框！

希望你们能帮助我。我不知道该怎么做。 javascript什么的？我需要解决方案，请告诉我。

代码是这样的：

Test 1 <input name="chkbox[]" type="checkbox" value="1"><br>
Test 2 <input name="chkbox[]" type="checkbox" value="2"><br>
Test 3 <input name="chkbox[]" type="checkbox" value="3"><br>
Test 4 <input name="chkbox[]" type="checkbox" value="4"><br>
Test 5 <input name="chkbox[]" type="checkbox" value="5"><br>

<br><br>

Name <input name="txt1" type="text"><br>
Address <input name="txt2" type="text"><br>
Number <input name="txt3" type="text"><br>
Age <input name="txt4" type="text"><br>

Answer 1

这有两个选项（全部在 javascript 中）。 首先，根据要求验证用户何时尝试提交。

document.addEventListener("DOMContentLoaded", function (event) {
    var isValid = false;
    document.querySelector("#formid").addEventListener("submit", function(e){
        var _selector = document.querySelectorAll('input[type=checkbox]:checked');
        var checked = _selector.length;
        for(var i = 0; i<checked; i++){
            if (_selector[i].checked) {
                if(!document.querySelector('input[name=txt'+ _selector[i].value +']').value)
                    break;
            }
        }
        if(checked == i)
            isValid = true;

        if(!isValid){
            alert('at least one field is empty');
            e.preventDefault();    //stop form from submitting
        }
    });
});

第二个使用事件监听器添加和删除必填字段。

document.addEventListener("DOMContentLoaded", function (event) {
    var _selector = document.querySelectorAll('input[type=checkbox]');
    for(var i = 0; i<_selector.length; i++){
        _selector[i].addEventListener('change', function (event) {
            if (event.target.checked) {
                document.querySelector('input[name=txt'+ event.target.value +']').required = true;
            } else {
                document.querySelector('input[name=txt'+ event.target.value +']').required = false;
            }
        });
    }
});

然后您可以设置所需字段的样式以显示需要填写的字段：

:required{border: red solid 1px;}