5.1.2 客户端校验

客户端校验就是通过JavaScript在数据收集页面（通常是表单输入页）中进行初步过滤， JavaScript是一个功能非常强大的网页脚本，代码支持正则表达式，除了可以进行客户端校验外，JavaScript也是Ajax（Asynchronous JavaScript And XML）的核心技术。

提示：

如果读者需要获得更多关于JavaScript的知识，请参阅疯狂Java体系的《疯狂Ajax讲义》一书。

下面将为图4.2所示的页面增加客户端校验的JavaScript代码。

程序清单：codes\05\5.1\Validate\regist.jsp

<script type="text/javascript">
String.prototype.trim = function()
{
    return this.replace(/^\s+/ , "")
          .replace(/\s+$/, "");
}
// 校验表单的JavaScript函数
function validate(form)
{
    // 定义错误字符串
    var errStr = "";
    // 依次取出表单中的四个表单域的值
    var username = form.username.value.trim();
    var pass = form.pass.value.trim();
    var age = form.age.value.trim();
    var birth = form.birth.value.trim();
    // 判断用户名不能为空
    if (username == "" || username == null)
    {
          errStr += "您的用户名必须输入";
    }
    // 判断用户名必须是字母和数字，且长度必须在4到25之间
    else if (!/^\w{4,25}$/.test(username))
    {
          errStr += "\n您的用户名必须是字母和数字，且长度在4到25之间";
    }
    // 判断密码必须输入
    if (pass == "" || pass == null)
    {
          errStr += "\n您的密码必须输入";
    }
    // 判断密码必须是字母和数字，且长度必须在4到25之间
    else if (!/^\w{4,25}$/.test(pass))
    {
          errStr += "\n您的密码必须是字母和数字，且长度在4到25之间";
    }
    // 判断年龄必须输入
    if (age == "" || age == null)
    {
          errStr += "\n您的年龄必须输入";
    }
    // 判断年龄必须是一个有效的年龄
    else if (!/^[0-1]?[0-9]?[0-9]$/.test(age))
    {
          errStr += "\n您的年龄必须为整数，且必须是一个有效的年龄值";
    }
    // 判断生日必须输入
    if (birth == "" || birth == null)
    {
          errStr += "\n您的生日必须输入";
    }
    // 判断生日必须是一个有效的日期，且只能是19xx年，或者20xx年
    else if(!/^19\d\d\-[0-1]\d\-[0-3]\d$/.test(birth)
          && !/^20[0-1]\d\-[0-1]\d\-[0-3]\d$/.test(birth))
    {
          errStr += "\n您的生日格式不正确，格式：yyyy-MM-DD";
    }
    // 如果错误字符串为空，表明客户端校验通过
    if (errStr == "")
    {
          return true;
    }
    // 客户端校验没有通过，通过警告框输出校验失败提示
    else
    {
          alert(errStr);
          return false;
    }
}
</script>

上面的校验函数大量使用了正则表达式来校验用户的输入，正则表达式在基于JavaScript的客户端校验中有着非常广泛的用处。

提示：

如果读者希望获得关于正则表达式的知识，可以参考Java API文档中Pattern类的说明。

定义了上面的客户端校验函数后，还需要在页面的表单中使用该校验函数来进行客户端校验，只需要将该校验函数绑定到表单的onsubmit属性即可，即将表单元素修改为如下形式。

<!-- 将输入校验函数绑定到表单元素的onsubmit属性 -->
<form method="post" action="regist"
    onsubmit="return validate(this);">
    ...
</form>

增加了上面的客户端校验后，如果我们再输入不合法的数据，将看到如图5.2所示的提示框。

图5.2 客户端校验的提示框

正如图5.2中所看到的，如果浏览者再次输入300的年龄，客户端的JavaScript校验将会直接弹出警告框，提示输入无效！当然，如果浏览者输入的其他表单域不符合要求，一样会弹出警告框，提示用户输入出错。

提示：

可能有的读者会觉得上面的客户端校验比较烦琐。事实上，这些客户端校验确实比较烦琐，开发者必须为每个表单书写大量的客户端校验代码，这的确是一件很烦琐的事情，而且容易出错。大部分时候，笔者都会借助第三方的客户端校验库，例如Valiadation.js库等。

上面的页面增加了严格的客户端校验，如果用户的输入不满足这些校验要求，将无法通过该页面提交请求。但服务器端校验依然必须进行，关于进行服务器端校验的必要性，下一节将详细讲解。

上一章目录下一章