Javascript 通过表单验证、客户机/服务器覆盖所有基础-最好的方法是什么？

我知道在客户端和服务器端都有很多验证表单的方法，但我想知道什么是最佳实践

目前，我有Javascript函数使用onkeyup/onblur函数“动态”验证表单输入字段，如下所示：

（部分代码：）

…以便输入框变为红色，如果未验证，则在框的侧面显示提示

所以我的问题是-当用户点击submit时，防止表单提交到我的（Mysqli）数据库的最佳方法是什么

（还有第二个问题……）在客户端验证被清除后，我是否运行额外的php服务器端脚本

我设想的实现这一点的一些方法是让Javascript函数设置一个表示错误条件的会话变量，如果存在错误条件，则不允许提交

我不确定如何做到这一点，或者我如何设置我的“提交”不工作，除非错误条件被清除

如果你能帮上忙，我将不胜感激

然后，在成功进行客户端验证之后，在插入数据库之前，我是否再次使用php对相同的数据进行重新验证（以相同的方式）

---

提前感谢。

首先，请始终执行服务器端验证

第二，HTML5表单验证得到了很好的支持。
示例：

---

然后，您可以使用CSS进行验证样式设置。

使用以下逻辑构造验证：

   if validateName() {
      document.getElementById("myForm").submit();
    }
    // if returns true (passed validation) then submit

//validate on click of submit button or on submit   
 function validateName() {
        userName = document.getElementById("registerUserName").value.trim();
        re = /^[a-zA-Z0-9_]{1,30}$/;

        if (userName==="") {
            document.getElementById('registerUserName').style.borderColor="red";
            document.getElementById('registerUserNameHint').innerHTML = 'required';
            **return false;**
        } else if (!re.test(userName)) {
            document.getElementById('registerUserName').style.borderColor="red";
            document.getElementById('registerUserNameHint').innerHTML = 'only alphanumeric characters and _';
            **return false;**
       ........ so forth
          else { 
             return true;
         }

---

你永远不应该“信任”客户。客户端验证很容易绕过。始终在服务器上进行验证。客户端验证只是改善用户体验的一个很好的补充，但它永远不会取代适当的服务器端验证。“在客户端验证清除后，我是否运行额外的php服务器端脚本？”——当然可以，因为您知道，没有客户端验证……如果您甚至假设任何到达服务器的请求都必须是通过类似“浏览器”的方式发送的，那么您就已经大错特错了。（Why-o-为什么我们必须一遍又一遍地说这个…？）“当用户点击提交时，防止表单提交到我的（Mysqli）数据库的最佳方法是什么？”–对提交事件做出反应，进行验证–然后在验证失败时取消事件（preventDefault）。当然，这也是除了“新”之外的一切，已经被讨论了无数次了。谢谢你的评论。我会调查的。我确信其中一些问题已经讨论过了，但问题在于找到那些特定的讨论。我是否应该使用会话变量来标记错误条件（如果javascript验证函数发现错误）以用于条件提交。。或者干脆跳过它，只在提交时进行服务器端验证？我想如果我不管怎么做服务器端验证都是多余的..好的，谢谢。但是关于我使用Javascript进行客户端验证的具体情况，有什么提示吗？特别是，我试图用我的javascript函数设置一个错误条件，并且不允许在任何错误条件下提交。javascript在99%的浏览器中使用。。所以，除非你现在担心另外1%，否则如果你真的在意，这没问题——这里有一个链接让你开始：谢谢你的这个想法。但是，验证函数在onblur、onkeyup事件期间运行。因此，对于我来说，要调节提交，我必须在提交过程中重新运行每个字段的所有验证函数。现在考虑设置窗口对象/全局变量，因为使用js的会话变量需要AJAX或类似的东西。在这种情况下，如果任何输入验证失败，您可以简单地将submit按钮设置为disabled onblur，OnKeyUp记住“在提交期间重新运行每个字段的所有验证函数”瞬间发生

function validateName() {
    userName = document.getElementById("registerUserName").value.trim();
    re = /^[a-zA-Z0-9_]{1,30}$/;

    if (userName==="") {
        document.getElementById('registerUserName').style.borderColor="red";
        document.getElementById('registerUserNameHint').innerHTML = 'required';
    } else if (!re.test(userName)) {
        document.getElementById('registerUserName').style.borderColor="red";
        document.getElementById('registerUserNameHint').innerHTML = 'only alphanumeric characters and _';
    } else {
        document.getElementById("registerUserName").setAttribute("style","border-color: rgb(221,221,221) rgb(241,241,241) rgb(241,241,241) rgb(221,221,221);");
        document.getElementById('registerUserNameHint').innerHTML = '';
    }
} //validateName()

   if validateName() {
      document.getElementById("myForm").submit();
    }
    // if returns true (passed validation) then submit

//validate on click of submit button or on submit   
 function validateName() {
        userName = document.getElementById("registerUserName").value.trim();
        re = /^[a-zA-Z0-9_]{1,30}$/;

        if (userName==="") {
            document.getElementById('registerUserName').style.borderColor="red";
            document.getElementById('registerUserNameHint').innerHTML = 'required';
            **return false;**
        } else if (!re.test(userName)) {
            document.getElementById('registerUserName').style.borderColor="red";
            document.getElementById('registerUserNameHint').innerHTML = 'only alphanumeric characters and _';
            **return false;**
       ........ so forth
          else { 
             return true;
         }