javaweb一个表单和js简单验证

最新推荐文章于 2024-05-11 02:50:29 发布

realize1020

最新推荐文章于 2024-05-11 02:50:29 发布

阅读量1.1k

点赞数 3

分类专栏： java学习文章标签： html javaweb 表单验证

本文链接：https://blog.csdn.net/qq_38268534/article/details/86632419

版权

java学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天写一个简易版的表单和简单的验证功能，为了验证自己的学习成果。
表单代码如下：

<%@ 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的出学者，希望未来可以越学越好！

realize1020

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
javaweb一个表单和js简单验证

今天写一个简易版的表单和简单的验证功能，为了验证自己的学习成果。表单代码如下：&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&a
复制链接

扫一扫