从留言板开始做网站（八）——客户端的数据验证（JS验证方法）

这篇我给大家叙述下客户端验证用户的输入，一般都是用javascript的代码来实现的。

我们在首页的底部添加JS代码：

<script type="text/javascript">
    var user = document.getElementById("user_name");
    var mes = document.getElementById("user_mes");
    var btn = document.getElementById("btn");
    btn.οnclick=function(){
        if (user.value == "") {
            alert("用户名不得为空");
            return false;
        }
        if (mes.value == "") {
            alert("留言内容不得为空");
            return false;
        }else {
            alert("留言成功");
        }
    }
</script>

getElementById("ID名");  获取该id的元素内容，onclick点击方法。利用JS提升用户的体验，减轻服务器的工作量。

我推荐一本学习JS的书：

这里我们可以增加一个焦点内容为空的代码：

btn.οnclick=function(){
    if (user.value == "") {
        alert("用户名不得为空");
        user.focus(); //焦点该元素
        return false;
    }
    if (mes.value == "") {
        alert("留言内容不得为空");
        mes.focus(); //焦点该元素
        return false;
    }else {
        alert("留言成功");
    }
}

有时候弹窗对用户体验并不友好，所以可以用醒目的文字提示功能，我们在表单的上面添加一个隐藏的提示信息，在文本框为空的时候显示出来：

<section class="mes-send">
    <p id="notice">提示信息</p>
    <form method="post" action="send.php">
        <div class="form-group">
            <label for="user_name">姓名：</label>
            <input type="text" id="user_name" name="user_name" placeholder="用户名称" alias="用户名称">
        </div>
        <div class="form-group">
            <label for="user_mes">留言：</label>
            <textarea id="user_mes" name="user_mes" rows="5" placeholder="留言内容" alias="留言内容"></textarea>
        </div>
        <input type="submit" id="btn" value="提 交">
    </form>
</section>

并把这条提示信息的CSS设为：

#notice {
    visibility: hidden;
    margin-left: 1.25em;
    color: #c06;
}

display和visibility的区别在于隐藏的时候前者不占位，后者可以作为占位符。

然后我们输入JS代码：

<script type="text/javascript">
function checkInputs(){
    //检查浏览器是否支持
    if (!document.getElementById) return false;
    if (document.forms.length < 1) return false
    //获得表单DOM
    var theForm = document.forms[0];
    var inputs = theForm.elements;
    //获得信息提示的DOM
    var notice = document.getElementById("notice");
    //循环输出表单元素
    for (var i = 0; i < inputs.length; i++) {
        //跳过表单中的提交按钮
        if (inputs[i].type == "submit") continue;
        //文本框失去焦点
        inputs[i].οnblur=function(){
            var ph = this.alias || this.getAttribute("alias");
            this.setAttribute("placeholder",ph);
            //检查文本框是否为空
            if (this.value.length == 0) {
                notice.innerHTML=ph + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }else {
                notice.style.visibility = "hidden";
            }
        }
        //文本框获得焦点
        inputs[i].οnfοcus=function(){
            this.setAttribute("placeholder","");
        }
    }
}
checkInputs();

</script>

我们根据文本框的获得焦点和失去焦点来作为行动，这样的客户体验是不是好一些啊。并且获得焦点的文本框内的灰色文字会同时消失，失去焦点，则会再次显示。

代码里面有一些说明文字了，我们稍微再分解讲下：

document.forms返回的是文档中所有表单的集合数组。因为我们的留言板中只有个表单，所以将它的下标设为0：

var theForm = document.forms[0];

我们还需要获取文本框元素：

var inputs = theForm.elements;

elements返回的是表单所有元素的数组，包括按钮也是哦。我们循环数组，判断每个表单元素是否为空，是否获得焦点或者失去焦点，我这里使用了for循环，值得一提的是，因为提交按钮不是我们需要判断的元素，所以轮到它的时候，我们需要跳过，循环继续。

if (inputs[i].type == "submit") continue;

break和continue都是跳出循环，前者跳出循环并停止执行后面的流程，而continue则是跳过此次循环，继续后面的循环。

onblur失去焦点，onfocus获得焦点。

对了，还要在文本框元素内添加一个自定义属性alias，

<input type="text" id="user_name" name="user_name" placeholder="用户名称" alias="用户名称">
<textarea id="user_mes" name="user_mes" rows="5" placeholder="留言内容" alias="留言内容"></textarea>

添加这2个自定义属性是为了能让JS操作placeholder这个属性，因为在获得焦点的时候，我们使用了setAttribute()，将placeholder这个属性的值设为空了。在它失去焦点时我们需要从alias来获取它的初值，重新为placeholder赋值。

var ph = this.alias || this.getAttribute("alias");
this.setAttribute("placeholder",ph);

this.setAttribute("placeholder","");

当失去焦点的文本框为空时，更改notice的内容，并将它显示出来。

if (this.value.length == 0) {
                notice.innerHTML=ph + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }else {
                notice.style.visibility = "hidden";
            }

最后，运行这个函数

checkInputs<span style="font-family: Arial, Helvetica, sans-serif;">();</span>

我们其实可以把这个JS内容移到外部的JS文件，然后再导入到html文件内。我们新建一个文件夹命名为js，并在里面新建一个main.js文件，然后将首页内的JS内容剪切复制到该文件内，js的HTML标签不用复制<script></script>

在首页的底部</body>上面导入JS文件：

<script type="text/javascript" src="js/main.js"></script>

基本的判断是做好了，但是还有个问题，就是空内容仍旧会提交到处理文件中，我们应当如果文本框是空内容，就不能把表单提交，这个也是很简单的只要表单的onsubmit方法设成return false  ，表单就不会提交了。

我将main.js的内容重新修改了下，增加了一个checkSubmit()函数，内容如下：

function checkInputs(theForm){
    //检查浏览器是否支持
    if (!document.getElementById) return false;
    //获得表单DOM
    var inputs = theForm.elements;
    //获得信息提示的DOM
    var notice = document.getElementById("notice");
    //循环输出表单元素
    for (var i = 0; i < inputs.length; i++) {
        //跳过表单中的提交按钮
        if (inputs[i].type == "submit") continue;
        //文本框失去焦点
        inputs[i].οnblur=function(){
            var ph = this.alias || this.getAttribute("alias");
            this.setAttribute("placeholder",ph);
            //检查文本框是否为空
            if (this.value.length == 0) {
                notice.innerHTML=ph + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }else {
                notice.style.visibility = "hidden";
            }
        }
        //文本框获得焦点
        inputs[i].οnfοcus=function(){
            this.setAttribute("placeholder","");
        }
    }
}
function checkSubmit(){
    //检查浏览器兼容
    if (document.forms.length < 1) return false;
    var theForm = document.forms[0];
    //运行checkInputs函数
    checkInputs(theForm);
    //处理表单提交
    theForm.οnsubmit=function(){
        var inputs = this.elements;
        //循环输出表单元素
        for (var i = 0; i < inputs.length; i++) {
            //跳过表单提交按钮
            if (inputs[i].type == "submit") continue;
            //文本框为空，则表单提交失效
            if (inputs[i].value == "") return false;
        }
    }
}
checkSubmit();

原来的checkInputs()函数增加了一个参数theForm，你会发现这个参数就是原来的变量theForm。

新增函数内容与原来差不多，我就不一一讲解了，这里令我比较郁闷的是两个函数重复的东西有点多，可是自己的能力有限不知道该如何优化，请大神们提点一下。

用JS做了判断文本框内是否为空，现在还应该判断用户输入的值是否是恰当的值。

修改checkInputs函数，增加正则判断的功能：

function checkInputs(theForm){
    //检查浏览器是否支持
    if (!document.getElementById) return false;
    //获得表单DOM
    var inputs = theForm.elements;
    //获得信息提示的DOM
    var notice = document.getElementById("notice");
    //设置文本框的正则表达式
    var regex = /^[\u4E00-\u9FA5a-zA-Z0-9]{1,15}$/;
    //循环输出表单元素
    for (var i = 0; i < inputs.length; i++) {
        //跳过表单中的提交按钮
        if (inputs[i].type == "submit") continue;
        //文本框失去焦点
        inputs[i].οnblur=function(){
            //失去焦点，恢复预置文本
            var ph = this.alias || this.getAttribute("alias");
            this.setAttribute("placeholder",ph);
            //如果文本框为空
            if (this.value.length == 0) {
                //更改notice的文本内容，并显示
                notice.innerHTML=ph + "不得为空！";
                notice.style.visibility = "visible";
                return false;
            }else if (!regex.test(this.value) && this.type == "text"){//检查文本内容是否符合正则表达式
                notice.innerHTML = ph + "仅限中文和数字且不多于15个字符！";
                notice.style.visibility = "visible";
                return false;
            }else{
                notice.style.visibility = "hidden";
                return true;
            }
        }
        //文本框获得焦点
        inputs[i].οnfοcus=function(){
            this.setAttribute("placeholder","");
        }
    }
}

修改了原来的提示语句，应该把限定字数也要写上去，前面忘记写了。

js的正则与PHP的正则在限定中文字符上还是有所区别的，/^[\u4E00-\u9FA$/ 这个是JS的写法，/^[\x{4e00}-\x{9fa5}$/u这个是PHP的写法。

else if (!regex.test(this.value) && this.type == "text"){//检查文本内容是否符合正则表达式
                notice.innerHTML = ph + "仅限中文和数字且不多于15个字符！";
                notice.style.visibility = "visible";
                return false;
            }

这一段，是检查正则表达式的，然后又限定在用户名这个文本框，而不需要检查留言框里的内容。

其实呢，在placeholder这段在IE的低版本中是无法显示出来的，我也是偷懒了不愿意写，有兴趣的朋友可以自己写下，利用value的值来给placeholder当备胎，并给value的值加个同样的灰色文字CSS，就可以啦！