Java Web笔记 – 客户端Javascript与服务器端Servlet的验证
本文由发表于6年前 | J2EE | 评论数 2 |  被围观 5,793 views+
1、验证:客户端验证:服务器端验证:2、使用Javascript进行表单检验的常用方法:2.1、基本的表单验证例子:2.2、单选按钮的验证例子:2.3、复选框全选的例子:3、在服务器端使用Servlet进行验证的例子:4、Servlet中的编码设置:
1、验证:
客户端验证:
减少服务器负载
缩短用户等待时间
兼容性难
服务器端验证:
统一确认
兼容性强
服务器负载重
2、使用Javascript进行表单检验的常用方法:
var username = document.getElementById("username");
var username = document.getElementsByName("username")[0];
var nodes = document.getElementsByTagName("input");
2.1、基本的表单验证例子:

HTML代码:

<form onsubmit="return validate()" action="loginServlet">
username:<input type="text" id="username" name="username"/><br />
password:<input type="password" id="username" name="password"><br />
<input type="submit" value="submit" />
</form>

JS验证代码:

function validate(){
    //使用getElementById方法获取元素
    var username = document.getElementById("username");
    var password = document.getElementById("password");

    //使用getElementsByName获取一组元素
    //var username = document.getElementsByName("username")[0];
    //var username = document.getElementsByName("password")[0];

    //获取元素的值 并判断长度
    if(username.value.length == 0){
        alert("用户名不能为空");
        return false;
    }
    if(password.value.length <6){
        alert("密码不能少于6位");
        return false;
    }
    return true;
}

//根据标签获取元素组
var nodes = document.getElementsByTagName("input");
for(var i=0; i<nodes.length; i++){
    //获取标签类型
    alert(nodes[i].type);
}
2.2、单选按钮的验证例子:

HTML代码:

男<input type="radio" name="gender" value="男">
女<input type="radio" name="gender" value="女">

JS验证代码:

//单选按钮的验证
var gender = document.getElementsByName("gender");
if(!gender[0].checked && !gender[1].checked){
    alert("请选择性别!");
}
2.3、复选框全选的例子:

HTML代码:

<input type="checkbox" name="selectAll" onclick="selectAll()">Select all<br />
<input type="checkbox" name="number" value="1">1<br />
<input type="checkbox" name="number" value="2">2<br />
<input type="checkbox" name="number" value="3">3<br />
<input type="checkbox" name="number" value="4">4<br />
<input type="checkbox" name="number" value="5">5<br />
<input type="checkbox" name="number" value="6">6<br />
<input type="checkbox" name="number" value="7">7<br />
<input type="checkbox" name="number" value="8">8<br />
<input type="checkbox" name="number" value="9">9<br />
<input type="checkbox" name="number" value="10">10<br /><input type="checkbox" name="number">10<br />

JS代码:

/* 复选框全选的函数 */
function selectAll(){
    var selectAll = document.getElementsByName("selectAll")[0];
    if(selectAll.checked){
        var numbers = document.getElementsByName("number");
        for(var i=0; i<numbers.length; i++){
            numbers[i].checked = true;
        }
    } else {
        for(var i=0; i<nmubers.length; i++){
            numbers[i].checked = false;
        }
    }
}

判断复选框是否有选择:

/* 验证用户选择的个数 */
function validateCheckbox(){
    var n = 0;
    for(var i=0; i<numbers.length; i++){
        if(numbers[i].checked){
            n++;
        }
    }
    if(n < 1){
        alert("至少要选择一项");
    }
}
3、在服务器端使用Servlet进行验证的例子:
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    String username = req.getParameter("username");
    String password = req.getParameter("password");
    //获取单选按钮的值
    String gender = req.getParameter("gender");
    //获取复选框的值
    String[] numbers = req.getParameterValues("number");

    List<String> list = new ArrayList<String>();
    //验证判断
    if("".equals(username)){
        list.add("用户名不能为空");
    }
    if(password == null){
        list.add("用户密码不能为空");
    }
    if(password != null && password.length()<6){
        list.add("用户密码不能少于6位");
    }
    //页面跳转
    if(list.isEmpty()){
        req.getRequestDispatcher("index.jsp").forward(req, resp);
    } else {
        req.setAttribute("error", list);
        req.getRequestDispatcher("error.jsp").forward(req, resp);
    }    
}
4、Servlet中的编码设置:
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
...
//编码设置
gender = new String(gender.getBytes("iso-8859-1"),"utf-8");
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/java-web-notes-client-and-server-side-javascript-validation-of-servlet.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 11/10
如果您有更好的原创技术博文或者观点,欢迎投稿:admin@itzhai.com,或者关注订阅左侧浮动面板的微信号订阅IT宅itread)发送消息。
文章评论
    2条评论
  1. 前途 2013年05月06日21:14:18  #-49楼 回复 回复

    用javascript验证好还是用servlet验证好?一般用哪一种方式验证的?

    • arthinking 2013年05月07日00:34:28 回复 回复

      最好前后端都需要校验,才能让程序更健壮,有更好的交互。

给我留言

有人回复时邮件通知我
J2EE的相关文章
随机文章 本月热门 热评
1 jQuery使用数组编写向左滚动的图片栏 2011/5/15
2 大学毕业生必须明白的几个概念:三方协议,户口,档案,干部身份,派遣证(报到证) 2012/4/9
3 Java基础笔记 – 抽象类与接口 2011/10/26
4 Java笔记 – String类的常用方法 2013/12/18
5 软件工程维护-可维护性 文档 2011/7/1
6 web组件的设计思路与编写 效率问题 2013/3/17
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.