【译】表单数据校验

Submit

body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p > label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
/* 需要给Webkit浏览器下的表单元素适当的样式 */
  -webkit-appearance: none;
  
  width : 100%;
  border: 1px solid #333;
  margin: 0;
  
  font-family: inherit;
  font-size: 90%;
  
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}

演示

如我们上面看到的几个例子所示，每次用户要发送未通过校验的表单时，浏览器都会展示一段错误信息。该信息的展示方式取决于浏览器本身。

这些自动生成的信息有两大缺点：

没有标准的方法来用CSS改变其外观和体验。

它们还要依赖浏览器本地信息，这意味着你会在使用一种语言的页面中，遇到错误信息使用另一种语言展示的情况。

使用法语版本的浏览器浏览英文页面

要定制这些信息的外观和文本，你必须使用JavaScript，没有只使用HTML和CSS的方法。

HTML5提供了约束验证API来检查和定制表单元素的状态。此外它也能改变错误信息的文本。来看个例子：

  I would like you to provide me an e-mail
  
  Submit

在Javascript中，你可以调用setCustomValidity())方法：

var email = document.getElementById("mail");

email.addEventListener("keyup", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

演示

若你想要控制错误信息的样式和效果，或者想处理那些不支持HTML5表单验证的浏览器，那你就只能使用Javascript了。

现在越来越多的浏览器开始支持约束验证API，而且也支持得越来越靠谱。该API囊括了各个表单元素上的一系列方法和属性。

对于老旧浏览器，我们可以使用H5F之类的polyfill来弥补其对于约束验证API的不支持。由于这里你已经使用了Javascript，所以使用polyfill也并不会成为你设计或实现网站、Web应用时的额外负担。

来看下如何使用该API来建立定制的错误信息，首先HTLM如下：

  

    
      Please enter an email address:
      
      
    
  

  Submit

这个简单的表格用了novalidate特性来关闭浏览器的自动校验；这样我们的脚本就能控制整个校验过程了。但是这样做却不会禁用掉约束验证API、以及 :valid, :invalid, :in-range, :out-of-range 等一系列CSS伪类。这就意味着，虽然浏览器不会自动在表单发送前校验它的数据，但你仍可自己来做校验、并且按需给予表单样式。

aria-live特性用来确保我们定制的错误信息能展示给任何人，包括那些使用诸如屏幕阅读器等无障碍设备的人。

CSS
这段CSS用于装饰我们的表单、并让错误的输出看起来更吸引人些。

/* 这段只是用来美化表单 */
body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
}

p * {
  display: block;
}

input[type=email]{
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 这段是给校验未通过的输入框的样式 */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* 这段是给错误信息的样式 */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

JavaScript
下面的Javascript代码用来处理我们自定义的错误校验。

// 获取DOM节点的方法有许多，这里我们获取了表单自身以及email输入框，还有一个让我们放置错误信息的span元素。

var form  = document.getElementsByTagName("form")[0];
var email = document.getElementById("mail");
var error = document.querySelector(".error");

email.addEventListener("keyup", function (event) {
  // 每次用户输入时，我们都会检查email输入框是否合法
  if (email.validity.valid) {
    // 当校验通过时，如果已经有一段错误信息在显示了，就移除掉错误信息
    error.innerHTML = ""; // 重置消息内容
    error.className = "error"; // 重置消息的显示状态
  }
}, false);
form.addEventListener("submit", function (event) {
  // 每次用户要提交表单时，我们都会检查email输入框是否合法
  if (!email.validity.valid) {
    // 如果输入框不合法，我们就展示那段定制的错误信息
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";
    // 通过取消事件来阻止表单提交
    event.preventDefault();
  }
}, false);

下面是运行结果：

演示

约束验证API给了我们处理表单校验的强大工具，并让我们能有力地控制其用户界面，这就远超过只用HTML和CSS所能做的事了。

有时，面对老旧浏览器和[定制的组件]()，你不能（或者不想）使用约束验证API。但在这种情况下，你仍然可以使用Javascript来校验你的表单。表单的校验更多是个用户界面的问题、而非真正的数据校验。

要校验一个表单，你得先问你自己几个问题：

我需要进行什么类型的校验？
你得先决定如何校验数据，这取决于你：可以用字符串操作、类型转换、正则表达式等等。只要记住表单数据通常是一段文本，而且传到你的脚本里时也是一些字符串就好。

表单校验未通过时，我应该做什么？
这就是个UI的问题了。得靠你决定表单的行为：是不论是否通过都发送数据呢？还是高亮那些出现错误的字段？还是展示一些错误信息？

如何帮助用户用户纠正非法数据？
要减少用户的不满，很重要的是提供尽可能多的帮助信息，以指导用户纠正他们的输入。还应该提供些前置的输入建议、和清晰的错误信息，让用户知道该输入什么。

若你还想深入了解表单校验的UI要求，可以读读下面这些有用的文章：

SmashingMagazine: Form-Field Validation: The Errors-Only Approach

SmashingMagazine: Web Form Validation: Best Practices and Tutorials

Six Revision: Best Practices for Hints and Validation in Web Forms

A List Apart: Inline Validation in Web Forms

为了更好地说明，我们接下来要重构上述的例子，让它能在老旧浏览器上运行：

  

    
        Please enter an email address:
        
        
    
  

  
  Submit

如你所见，HTML的和之前几乎一模一样；这里只移除了HTML5的部分。要注意的是ARIA是个并不依赖于HTML5的独立特性，所以我们仍会保留它。

CSS
类似地，CSS不需要做大规模修改；只要把:invalid伪类转为真的类，并且不去使用IE6不支持的特性选择器即可。

/* 这段只是用来美化表单 */
body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
}

p * {
  display: block;
}

input.mail {
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 这段是给校验未通过的输入框的样式 */
input.invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus.invalid {
  outline: none;
}

/* 这段是给错误信息的样式 */
.error {
  width  : 100%;
  padding: 0;
 
  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;
 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

JavaScript
Javascript代码的改变最大，为了兼容我们需要做更多的事情。

// 老旧浏览器上获取DOM节点的方法少了些
var form  = document.getElementsByTagName("form")[0];
var email = document.getElementById("mail");

// 下面是个访问DOM里下个兄弟元素节点的的技巧
// 但这样做很危险，因为很容易就会建立一个死循环
// 在现代浏览器上，应该使用element.nextElementSibling
var error = email;
while ((error = error.nextSibling).nodeType != 1);

// 按照HTML5的规范来
var emailRegExp = /^[a-zA-Z0-9.!#$%&"*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;

// 许多老旧浏览器不支持addEventListener方法
// 下面是个解决该问题的简单方法，当然方法远不止这一种
function addEvent(element, event, callback) {
  var previousEventCallBack = element["on"+event];
  element["on"+event] = function (e) {
    var output = callback(e);
    
    // 回调返回`false`时会终止回调链并结束事件回调的执行
    if (output === false) return false;

    if (typeof previousEventCallBack === "function") {
      output = previousEventCallBack(e);
      if(output === false) return false;
    }
  }
};

// 现在可以来重构我们的校验了
// 由于我们不依赖CSS伪类，故而必须在email字段明确设置valid/invalid类
addEvent(window, "load", function () {
  // 这里我们检验该字段是否为空(注意，该字段不是必填的)
  // 若不是，我们再检验它的内容是否为正确格式的email地址
  var test = email.value.length === 0 || emailRegExp.test(email.value);
 
  email.className = test ? "valid" : "invalid";
});

// 定义用户在该字段输入时会发生什么
addEvent(email, "keyup", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  } else {
    email.className = "invalid";
  }
});

// 定义用户提交数据时会发生什么
addEvent(form, "submit", function () {
  var test = email.value.length === 0 || emailRegExp.test(email.value);
 
  if (!test) {
    email.className = "invalid";
    error.innerHTML = "I expect an e-mail, darling!";
    error.className = "error active";

    // 某些老旧浏览器不支持event.preventDefault()方法
    return false;
  } else {
    email.className = "valid";
    error.innerHTML = "";
    error.className = "error";
  }
});

结果如下所示：

演示

如你所见，自己建立一个校验系统并不是一件难事。难点就在于如何跨平台、并在你创建的任何表单上都能使用它。现在有许多库能执行表单校验，你应该毫不犹豫地使用他们。如下是几个例子：

独立的库

Validatious

Validate.js

jQuery插件

Validation

Valid8

有些情况下使用远端校验还是挺有用的。在用户输入的数据得添加到应用服务器的数据存储时，这种校验是有必要的。一个相应的例子就是需要填用户名的注册表单。为避免用户名重复，更聪明的办法是发送一个AJAX请求来检查用户名的可用性，而不是让用户发送完数据、然后再返回一个带有错误的表单。

使用这种校验，需要注意以下几点：

因为需要公开暴露API和一些数据，所以得保证数据不是敏感的。

由于网络存在延迟，故得进行异步校验。这就得靠一些UI设计来保证校验不能正确执行时，用户操作不至于被阻塞。

表单校验并不用靠复杂的Javascript，但它要求我们认真为用户着想，始终得帮用户纠正他们输入的数据。要做到这点，请确保：

展示明确的错误信息

约定好输入格式

指出错误出现的确切位置（特别是在那些巨大的表单中）