0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

Java Web笔记 - 客户端Javascript与服务器端Servlet的验证

1、验证:

客户端验证:

减少服务器负载 缩短用户等待时间 兼容性难

服务器端验证:

统一确认 兼容性强 服务器负载重

2、使用Javascript进行表单检验的常用方法:

var username = document.getElementById("username");
var username = document.getElementsByName("username")[0];
var nodes = document.getElementsByTagName("input");

2.1、基本的表单验证例子:

HTML代码:

username:
password:

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代码:


JS验证代码:

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

2.3、复选框全选的例子:

HTML代码:

Select all

1

2

3

4

5

6

7

8

9

10
10

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宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法