数据验证方法与技术-跨媒体信息传播原理与技术

在用户登记时，往往要对登记的内容进行验证。例如，登记一个通讯录，“姓名”这一数据项一定不能缺省。另外，如果涉及数据内容要进行计算，在填数字的文本框中就不能填入文字，这也需要验证。

数据验证大体有以下三种方法。

第一种是用JavaScrip程序来判断，这种方法由于可以自己编程，所以什么样的验证算法都能自己编出来，并且这种方法是在前端进行验证，用户体验比较好。当然验证需要写程序，对于初学者来讲，稍微有些吃力。为了简化程序，在JavaScript的基础上设计的框架（如jQuery）可以简化编程的代码。专业程序员大多用框架来解决验证的问题。

第二种是用后端程序进行验证（如用PHP、JSP、ASP等），这种方法用得比较少。

第三种是用HTML5本身的验证功能。这种验证方法简单实用，但低版本的浏览器有可能不能用，验证功能也有限。本书简要介绍HTML5的验证方法。

1. 文本不为空的验证

<input type="text" name="text1" placeholder="请输入文本内容，此框不能为空" required>

加上required这个关键字，如果提交时这个文本框为空，则空提示：“！请填写此字段”。

2. 数字类型的验证

<input type="number" name="num1" required>

将类型改为“number”后，如果在这个文本框中输入数字以外的字母，则根本打不上字。

3. 日期类型的验证

<input type="date" name="date1" required>(www.xing528.com)

将类型改为“date”后，点击右边的箭头，将会出现一个日期输入框（图4-20），通过日期输入框进行选择，则可以避免出现各种输入日期中的困惑和错误。

图4-20　HTML5日期输入框

4. <input type="email" name="email1">

“email”这个数据类型可以验证填入的E-mail地址是否符合E-mail的规则。

5. 用pattern对文本框输入内容的限制

<input type="text" pattern="[0-9]{6}" name="email1" placeholder="请输入6位数字" required >

pattern中通过正则表达式可以对文本框中输入的内容进行限制。上面的pattern的含义是，你可以输入6位0～9的数字。可以通过百度查“html5 pattern 正则表达式”了解pattern的更多功能，如判断身份证号、判断电话位数等。

6. 输入字符数的限制

<input type="text" name="limitedText" maxLength="140">

通过maxLength="140"可以限制输入字符字数的长度。