javaweb一个表单和js简单验证
今天写一个简易版的表单和简单的验证功能，为了验证自己的学习成果。
表单代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简单表单和验证</title>
<style>
#username_Msg,#password_Msg,#repassword_Msg{
color:red;
}
</style>
<script>
function chekForm(){
document.getElementById("username_Msg").innerHTML="";
document.getElementById("password_Msg").innerHTML="";
document.getElementById("repassword_Msg").innerHTML="";
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var repassword=document.getElementById("repassword").value;
if(username==""){
document.getElementById("username_Msg").innerHTML="用户名不能为空！";
return false;
}
if(password==""){
document.getElementById("password_Msg").innerHTML="密码不能为空！";
return false;
}
if(repassword==""){
document.getElementById("repassword_Msg").innerHTML="确认密码不能为空！";
return false;
}
if(password!=repassword){
document.getElementById("repassword_Msg").innerHTML="两次密码不一致！";
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return chekForm()">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" id="username"/></td>
<td id="username_Msg"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="password"/></td>
<td id="password_Msg"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="repassword" name="repassword" id="repassword"/></td>
<td id="repassword_Msg"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
- 首先写一个简单的form表单，要使用table标签对它进行规范化。
- 然后在每一个td标签后面再
加一个td标签，这是为了当表单校验时进行错误提示。截图如上所示：
- 接着为表单添加js校验，如下图
使用onsubmit的方式而不是使用onclick（）事件的方式。只要返回值是false，提交就不会通过！ - 然后chekFrom（）里面写校验的代码，没一次校验，都要把错误提示初始化为空！，把错误提示的字体样式改为红色。截图如下所示！
- 最后想说的是，今天是我第一次开通这个博客，我也是一个javaweb的出学者，希望未来可以越学越好！