1、验证:
客户端验证:
减少服务器负载 缩短用户等待时间 兼容性难
服务器端验证:
统一确认 兼容性强 服务器负载重
2、使用Javascript进行表单检验的常用方法:
var username = document.getElementById("username");
var username = document.getElementsByName("username")[0];
var nodes = document.getElementsByTagName("input");
2.1、基本的表单验证例子:
HTML代码:
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");