您的位置：首页 > 运维架构 > 网站架构

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

2016-10-08 11:56 513 查看
这篇我给大家叙述下客户端验证用户的输入，一般都是用javascript的代码来实现的。

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

<script type="text/javascript">
var user = document.getElementById("user_name");
var mes = document.getElementById("user_mes");
var btn = document.getElementById("btn");
btn.onclick=function(){
if (user.value == "") {
alert("用户名不得为空");
return false;
}
if (mes.value == "") {
alert("留言内容不得为空");
return false;
}else {
alert("留言成功");
}
}
</script>
getElementById("ID名");  获取该id的元素内容，onclick点击方法。利用JS提升用户的体验，减轻服务器的工作量。

我推荐一本学习JS的书：



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

btn.onclick=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].onblur=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].onfocus=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  ，表单就不会提交了。
4000

我将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].onblur=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].onfocus=function(){
this.setAttribute("placeholder","");
}
}
}
function checkSubmit(){
//检查浏览器兼容
if (document.forms.length < 1) return false;
var theForm = document.forms[0];
//运行checkInputs函数
checkInputs(theForm);
//处理表单提交
theForm.onsubmit=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].onblur=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].onfocus=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，就可以啦！
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html
                                                php
                                                新手教程
                                                留言板
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航