使用表单验证、客户端/服务器覆盖所有基础 - 最好的方法是什么？

Question

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

目前，我有 Javascript 函数通过 onkeyup/onblur 函数“即时”验证表单输入字段，如下所示：

（部分代码：）

<p class="form-registerUserName">
    <div class="upperLabel">
        <label for="registerUserName">User Name</label>
        <span class="required">*</span>
    </div>
    <input
        id="registerUserName"
        name="registerUserName"
        type="text"
        size="24"
        maxlength="24"
        value="<?php echo $_SESSION['registerUserName'];?>"
        onkeyup="validateName()"
        onblur="checkDuplicateName(); validateName()"
    >
    <label for="registerUserName" class="hint" id="registerUserNameHint"></label>
</p>

使用 Javascript 函数，例如：

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()

..这样输入框会变成红色，如果不验证的话会在框边显示提示。

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

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

我想实现这一点的一些方法是让我的 Javascript 函数设置一个 Session 变量来指示错误条件，如果有则不允许提交。

我不确定该怎么做，或者我如何将我的“提交”设置为不起作用，除非错误条件被清除。

不胜感激。

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

提前致谢。

Answer 1

首先，始终进行服务器端验证！

第二，HTML5表单验证得到很好的支持。
示例：http://html5pattern.com/

然后您可以使用 CSS 来验证样式。

Answer 2

用这个逻辑来构建你的验证：

   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;
         }