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

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

. .这样，输入框就会变成红色，如果没有验证，就会在框的一侧显示提示。

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

(第二个问题…)我是否运行一个额外的php服务器端脚本后，客户端验证已清除?

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

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

请帮忙。

然后我重新验证相同的数据(以相同的方式)与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;
         }