从丑陋到优雅，让代码越变越美（客户端检测方法思考）

从丑陋到优雅，让代码越变越美（客户端检测方法思考）2011-04-17 博客园 KenBlove大家都知道，客户端检测不单可以让用户获得更好的体验，而且可以通过校验数据大大减少客户端和服务器端的往返次数，减少服务器负担。在这里，小弟打算回顾一下自己在客户端检测方面的学习历程和采用方法，如果大家有什么更好的方法或者建议，欢迎提出来共享！共同进步！

为了方便举例和说明，先构建一个简单的html页面，如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS Verify</title>
</head>
<body>
    <div>
        <span>请输入用户名,年龄和自我介绍:</span>
        <br />
        <span>用户名:<input type="text" id="txtName" size="20" /></span>
        <br />
        <span>年龄:<input type="text" id="txtAge" size="5" />岁 </span>
        <br />
        <span>自我介绍:</span>
        <br />
        <span><textarea id="txtIntro" rows="10" cols="50"></textarea></span>
        <br />
        <span><input type="button" value="提交信息" /></span>
    </div>
</body>
</html>

第一阶段是：续项强写

每个人都基本会经过这个阶段，就是对检测内容每个都手工校验。很惭愧，自己也写过不少这样的代码。。这个阶段的代码如下：

function SubmitInfo（）
{
    var name = document.getElementById（"txtName"）;
    var age = document.getElementById（"txtAge"）;
    var intro = document.getElementById（"txtIntro"）;
    if（name == null || name.value == ""）
    {
        alert（"请输入用户名！"）;
        return false;
    }
    if（！/^[u4E00-u9FA5a-z0-9_]*$/gi.test（name.value））
    {
        alert（"用户名只能由中文,英文,数字及下划线组成！"）;
        return false;
    }
    if（age == null || age.value == ""）
    {
        alert（"请输入年龄！"）;
        return false;
    }
    if（！/^[1-9]d$/.test（age.value））
    {
        alert（"年龄必须为正整数！"）;
        return false;
    }
    if（intro == null || intro.value == ""）
    {
        alert（"请输入自我介绍！"）;
        return false;
    }
    alert（"提交成功！"）;
    return true;
}

不评价这个了。。因为每个人都可能因为写这些方法检测逻辑写得眼冒星星手抽筋的！弄的经常下班了还在扑哧扑哧的写啊写。。。。