4.2 客户端校验
客户端校验可以过滤掉用户的错误操作，是第一道防线，一般使用JavaScript代码实现。下面介绍如何通过编写JavaScript来实现客户端校验。
4.2.1 正则表达式
客户端校验一般都使用JavaScript来进行输入的校验。JavaScript对输入判断都会使用到正则表达式。正则表达式是字符串处理的利器，功能非常强大。
正则表达式的功能非常强大，通过它可以进行字符串匹配、字符串查找和字符串替换。今天重点介绍字符串的匹配功能，字符串的匹配功能可以为输入校验提供了很大的帮助。先看下面简单的正则表达式的示例。
正则表达式：a.b
匹配abb, acb，等
“.”是正则表达式的特殊字符，它的含义是匹配所有的字符还有空格和Tab键。表4.1所示列出了正则表达式常用的特殊字符及其作用。
表4.1 常用的特殊字符以及其作用
4.2.2 JavaScript中使用正则表达式
下面以一个简单示例来介绍在JavaScript中如何使用正则表达式进行字符串匹配。程序要求必须输入数字，如果输入的不是数字就弹出提示，代码如下所示。
<html>
<head>
<title>JavaScript中使用正则表达式</title>
<script language="javascript">
function validate(form){
var num = form.number.value;
if(! /^[0-9]*$/.test(num)){
alert("输入的不是数字请重新输入数字");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="aa" method="post" onSubmit="return validate(this)">
输入数字：<input type="text" name="number">
<input type="submit">
</form>
</body>
</html>
test方法检查在目标字符串中是否符合该模式，如果符合则返回true，页面可以进行提交；否则就返回false，页面弹出提示框，并无法进行提交。
“/..../”表示其中位于“/”定界符之间的部分就是将要在目标字符串中进行匹配的模式。只要把希望查找匹配字符串的模式内容放入“/”定界符之间即可。‘^’定位符规定匹配模式必须出现在目标字符串的开头，‘$’定位符规定匹配模式必须出现在目标对象的结尾。
下面来测试一下。假如现在在该页面中的文本框中不输入数字，而是输入字符。页面将会提示错误信息，如图4.7所示。
图4.7 客户端校验
使用正则表达式进行字符串匹配应该还能实现许多其他功能。下面给出一些常用的模式，通过对照前面表4.1可以好好地熟悉如何使用正则表达式进行字符串匹配，代码如下所示。
要求：校验登录名：只能输入5～20个以字母开头，可带数字、"_"、"."的字串
模式：/^[a-zA-Z]{1}([a-zA-Z0-9]—[._]){4,19}$/
要求：校验用户姓名：只能输入1～30个以字母开头的字串
模式：/^[a-zA-Z]{1,30}$/
要求：校验普通电话，可以"+"开头，除数字外，可含有"-"
模式：/^[+]{0,1}(\d){1,3}[ ]? ([-]? (\d){1,12})+$/
要求：校验手机号码：必须以数字开头，除数字外，可含有"-"
模式：/^[+]{0,1}(\d){1,3}[ ]? ([-]? ((\d)—[ ]){1,12})+$/
4.2.3 JavaScript完成客户端校验
现在为注册示例添加客户端校验功能。首先来看下有哪些输入校验规则。
（1）用户名、密码、确认密码必须输入。
（2）用户名只能是数字或者字母，长度为6～20之间。
（3）密码、确认密码必须是数字或者字母，长度为6～20之间。
（4）密码和确认密码必须相同。
（5）年龄必须为整数，而且必须是有效的年龄值。
（6）出生日期必须为正确的日期格式，如1988-01-03，而且只能是19**年到200*年之间。
（7）邮箱地址必须为合法的邮箱地址。
根据程序要求，设计如下代码。
<html>
<head>
<title>JavaScript中使用正则表达式</title>
<script language="javascript">
//使用此函数截断字符串前后的空格
function trim(str){
return str.replace(/^\s*/, "").replace(/\s*$/, "");
}
function validate(form){
//定义错误字符串
var errors = "";
//取出表单中的值并使用trim截断前后空格
var username = trim(form.username.value);
var password = trim(form.password.value);
var repassword = trim(form.repassword.value);
var age = trim(form.age.value);
var birth = trim(form.birth.value);
var email = trim(form.email.value);
//判断用户名是否输入，如果输入了，再判断格式是否正确
if(username == "" —— username == null){
errors += "用户名必须输入";
}else if(! /^\w{6,20}$/.test(username)) {
errors += "\n用户名必须是字母和数字，长度为6到20之间"
}
//判断密码是否输入，如果输入了，再判断格式是否正确
if(password == "" —— password == null){
errors += "\n密码必须输入";
}else if(! /^\w{6,20}$/.test(password)) {
errors += "\n密码必须是字母和数字，长度为6到20之间"
}
//判断确认密码是否输入，如果输入了，再判断格式是否正确
if(repassword == "" —— repassword == null){
errors += "\n确认密码必须输入";
}else if(! /^\w{6,20}$/.test(repassword)) {
errors += "\n确认密码必须是字母和数字，长度为6到20之间"
}
//判断确认密码和密码是否相同
if(repassword ! = password){
errors += "\n确认密码和密码必须相同";
}
//年龄不是必须字段，只需要判断格式是否正确
if(age ! = "" && ! /^[0-1]? [0-9]? [0-9]$/.test(age)){
errors += "\n请输入正确的年龄格式"
}
//出生日期不是必须字段，只需要判断格式是否正确
if( birth ! = "" && ! /^19\d\d\-[0-1]\d\-[0-3]\d$/.test(birth) &&
!/^20[0-1]\d\-[0-1]\d\-[0-3]\d$/.test(birth)){
errors += "\n请输入正确的生日格式（1988-03-31）"
}
//邮箱地址不是必须字段，只需要判断格式是否正确
if(email ! = "" && ! /^[a-zA-Z][a-zA-Z0-9._-]*@([a-zA-Z0-9-_]+.)+
(com—gov—net—com.cn—edu.cn)$/.test(email)){
errors += "\n请输入正确的邮箱地址"
}
if(errors == ""){
return true;
}else{
alert(errors);
return false;
}
}
</script>
</head>
<body>
<form action="aa" method="post" onSubmit="return validate(this)">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码：</td>
<td> <input type="password" name="repassword"></td>
</tr>
<tr>
<td>年龄： </td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>出生日期： </td>
<td><input type="text" name="birth"></td>
</tr>
<tr>
<td>邮箱地址：</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
现在打开用户注册页，不输入任何数据，单击“提交”按钮，页面将提示未按要求进行输入的错误信息，如图4.8所示。
因为程序要求用户名、密码、确认密码必须输入，所以会提示错误信息。假如输入非法的数据，单击“提交”按钮，页面将会提示按照要求进行输入的错误信息，如图4.9所示。
图4.8 提示用户进行输入
图4.9 提示用户输入合法信息
客户端输入校验主要的功能是用来过滤正常用户的错误操作，要构建健壮的Web应用还必须提供服务器端输入校验。