您的位置：首页 > Web前端 > JavaScript

使用JavaScript与Servlet实现客户端与服务器端验证

2013-05-24 00:21 387 查看

表单的验证有两种：

客户端验证：

--减少服务器负担。

--缩短用户等待时间。

--兼容性难。（不同浏览器对脚本语言的兼容性都是不同的）

服务器端验证：

--统一确认。

--兼容性强。

--服务器负载重。

客户端验证不写也是允许的，但服务器端验证必须有。用户可以（通过查看源代码直接输入地址）绕过客户端验证，如果服务器端的屏障没做好，插入到数据库的数据就是错误的，很麻烦。晚上的系统一般都有双重验证。

[b]使用使用JavaScript实现客户端验证：[/b]

验证条件：用户名、密码、重复密码不为空，密码和重复密码相同，长度6-10.

//myLogin.jsp
<html>
<head>
<script type ="text/javascript">
function validate()
{
var usern = document.getElemertBYid("username1");
var pasw = document.getElemertBYid("password1");
var repasw = document.getElemertBYid("repassword1");
if(usern.value.length == 0)
{
alert("username can't be blank!")
return false;
}

if(pasw.value.length < 6 || password.value.length > 10)
{
alert("length of password is invalid!")
return false;
}
if(repasw.value.length < 6 || repasw.value.length > 10)
{
alert("length of repassword is invalid!")
return false;
}
if(pasw.value.length != repasw.value.length )
{
alert("password not the same!")
return false;
}

}
</script>
</head>
<body>
<form onsubmit="return validate()" action="someServlet">

username:<input type="text" name="username" id="username1"><br>
password:<input tytype="text" name="password" id="password1"><br>
repassword:<input tytype="text" name="repassword" id="repassword1"><br>
<input type="submit" value="submit">

</form>
</body>
</html>

script通常写在<head></head>里。

<script></script>表示里面使用js脚本。

使用js最常用的就是定义函数。没有那么多东西，就是function yourf（）{} ，其所有的变量也都是由var定义的。对于javascript也常用alert。

要获得下面表单的东西，方式有很多：

1、给控件增加id属性。id属性不是被服务器端使用的，是被客户端javascript脚本使用的。

document是javascript内置对象，代表当前文档本身。 javascript不强制要有分号结束。

onsubmit="return validate();提交的时候调用该函数。分号可无。返回真才提交给服务器。

在js里点什么并没有全部的智能提示，没出现也可以用。

这时，用户可以这么做：

查看浏览器的该源代码，由<form onsubmit="return validate()" action="someServlet">发现表单提交到someServlet，并且有username、password、repassword3个变量。那他可以直接在浏览器url输入

http://……/someServlet?username=&password=123&repassword=456

这样用户就可以绕过客户端验证直接到达服务器端了。所以服务器端验证必须有。

另外，javascript里面数组长度确定了还可以改变大小，和集合一样：

//myLogin.jsp
<html>
<head>
<script type ="text/javascript">
function validate()
{
//var usern = document.getElemertBYid("username1");
//var pasw = document.getElemertBYid("password1");
//var repasw = document.getElemertBYid("repassword1");

var usern = document.getElementsByName("username1")[0];
var pasw = document.getElementsByName("username1")[0];
var resw = document.getElementsByName("username1")[0];

用javascript实现全选：

<html>
<head>
<script type="text/javascript">
function selectAll()
{
var allMails = document.getElementsByName("allMails");
var mails = document.getElementsByName("email");
if(allMails.checked)
{

for(var i = 0; i < mails.length;i++)
{
mails[i].checked = true;
}
}
else
{
for(var i = 0; i < mails.length;i++)
{
mails[i].checked = false;
}
}
}
</script>
</head>
<body>
全选<input type="checkbox" onclick="selectAll" name="allMails"><br><br><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>

</body>
</html>

另外，除了document.getElementsByName还可以document.getElementsByTagName。通过标签（像input这些标签）的名字获得元素，打印出来看看。如：

// in the function selectAll:
var nodes=document.getElementsByTagName("input");
for(var i = 0 ; i <nodes.length;i++)
{
alert(nodes[i]);
alert(nodes[i].type);
}

[b]使用Servlet实现服务器端验证：[/b]

验证条件也是：用户名、密码、重复密码不为空，密码和重复密码相同，长度6-10.

也是那个表单：给表单增加 action="someServlet" action="ValidateServlet"

<body>
<form onsubmit="return validate()" action="someServlet" action="ValidateServlet">

username:<input type="text" name="username" id="username1"><br>
password:<input tytype="text" name="password" id="password1"><br>
repassword:<input tytype="text" name="repassword" id="repassword1"><br>
<input type="submit" value="submit">

</form>
</body>

新建 ValidateServlet.java

成功页面：

失败页面：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航