JavaScript回顾——表单验证

表单验证与JavaScript

在我们惊叹于JavaScript的灵活性与不可预知的隐藏潜力时,它的起源或许已经不在是思维的起点。我们热衷于去思考如何用这样一门艺术般的脚本语言去开发更加强大的程序或功能,当然,这也是JavaScript的使命性“责任”。所谓使命,简单来说就是更好的去满足用户体验,满足网络世界甚至整个世界的需求,那么有趣的是,它满足的第一个需求是什么呢?甚至这第一个需求可能就是它最初的目的。

没错,这第一个需求,就是表单验证

对于表单,我们是再熟悉不过了,用户信息的录入基本都是基于表单的,因而为了区别和规范用户输入的信息,不同的录入容器都有不同的格式化要求,比如“用户名由数字,字母,下划线构成,并且不能以数字开头。”之类的言语。在早期的信息录入过程中,提交的表单中的信息的验证都是交付后台进行处理,当后台接收到前端的字符串后,进行判别,再将结果返回到前端(在信息合格的情况下有时也会返回,如连续但不同页的信息填写),这个过程十分依赖于用户的网速及服务器的承载能力,当其中一个环节出现问题的时候往往会对整个过程的效率带来极大的影响。那么,伟大的前驱们为了解决这个问题想了怎样的办法呢?**没错,Navigator公司开发了一门脚本语言来在前端解决表单验证问题**,它在发布的时候叫做JavaScript。**

如何书写一个表单验证的脚本?

其实大家都知道这是个很简单的小程序啦,只是自己在回顾的时候,突然想到这个竟然就是JavaScript的第一个用户体验改进实现,颇有感触,所以来啰嗦啰嗦。。。

下边就上菜吧

PS:既然都追本溯源了,那本文的基本验证功能就都由ascii码来做吧。

上菜

首先,建立一个基本的表单结构:

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>表单验证小试</title>
    </head>
    <body>
        <input type="text" id="username" name="test" />
        <br />
        <input type="password" id="password" name="text" />
        <br />
        <button onclick="check()">提交</button>

    </body>
    </html>

接下来就是获取输入框内容,并对其进行判断了。
假设用户名的要求为“由数字,字母及下划线组成,并且不能以数字开头。长度为6-20位”。
通过查表,其要求的字符ascii码区间分别为
"_": 95;
"a"-"z": 97-122;
"A"-"Z": 65-90;
"1"-"9": 48-57;

    var username = document.getElementById("username").value;//获取用户名输入框的内容
    function check() {
        if ( username == "" ) { alert("请输入用户名,由数字,字母及下划线组成,并且不能以数字开头"); }//其实这里开始通常的做法就是一个正则判断的功夫,不过有时试试其他的办法也不失为一个乐子~
        else if ( username.length < 6 || username.length > 20 ) { alert("请输入不小于6位,不大于20位的用户名"); }//判断字符串长度是否符合要求
        else if ( username.charCodeAt( 0 ) >= 48 && username.charCodeAt( 0 ) <=57 ) { alert("用户名不能以数字开头"); }//检测开头字符是否符合要求
        else {
            for ( var c in username ) {//遍历检测输入的字符串
                var un = username.charCodeAt( c );//将当前字符的ascii码传给一个变量un(为了方便一点)
                if ( !(un == 95 || (un >= 48 && un <= 57) || (un >= 65 && un <=90) || (un >= 97 && un <= 122)) ) {//判断是否不符合字符类型要求
                    alert("用户名只能以数字,字母及下划线组成");
                }
            }
        }
    }

这样就写好了一个基本的用户名格式检测的脚本,为什么是基本的呢,因为有一些机构对用户名有更多要求,会涉及一些相关的特殊词汇,处理办法也有所不同。
密码的处理办法也是一样的,因为在这样的获取过程中,密码是以明文转入的这里就不赘述了~

这就是JavaScript踏上征程的第一攻占点,对表单有没有一丝特别的感觉了呢?当然这只是鄙人自己的感觉,如果是错觉,请海涵哈哈。

Thanks for read!

posted @ 2016-09-05 15:27  Asambojur  阅读(218)  评论(0编辑  收藏  举报