js写表单普通验证

最新推荐文章于 2025-06-11 21:14:22 发布

原创最新推荐文章于 2025-06-11 21:14:22 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

Java Web 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用Java和HTML实现的表单验证脚本，确保链接名称、链接地址、联系人邮件和排列顺序字段不为空，并检查排列顺序是否为正整数。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript">
	function checkForm(){
		var linkName=document.getElementById("linkName").value;
		var linkUrl=document.getElementById("linkUrl").value;
		var linkEmail=document.getElementById("linkEmail").value;
		var orderNum=document.getElementById("orderNum").value;
		if(linkName==null||linkName==""){
			document.getElementById("error").innerHTML="链接名称不能为空！";
			return false;
		}
		if(linkUrl==null||linkUrl==""){
			document.getElementById("error").innerHTML="链接地址不能为空！";
			return false;
		}
		if(linkEmail==null||linkEmail==""){
			document.getElementById("error").innerHTML="联系人邮件不能为空！";
			return false;
		}
		if(orderNum==null||orderNum==""){
			document.getElementById("error").innerHTML="排列顺序不能为空！";
			return false;
		}else{
			 var type="^[0-9]*[1-9][0-9]*$"; 
		     var re=new RegExp(type); 
	         if(orderNum.match(re)==null){ 
	           alert("排列顺序必须为正整数!"); 
	           return false;
	        }
			return true;
		}
		return true;
	}
</script>
</head>
<body>
<div class="data_list backMain">
	<div class="dataHeader navi">
		${navCode }
	</div>
	<div class="data_content">
		<form action="link?action=save" method="post" "return checkForm()">
			<table cellpadding="5">
				<tr>
					<td>
						<label>链接名称：</label>
					</td>
					<td>
						<input type="text" id="linkName" name="linkName" value="${link.linkName }">
					</td>
				</tr>
				<tr>
					<td>
						<label>链接地址：</label>
					</td>
					<td>
						<input type="text" id="linkUrl" name="linkUrl" value="${link.linkUrl }">
					</td>
				</tr>
				<tr>
					<td>
						<label>联系人邮件：</label>
					</td>
					<td>
						<input type="text" id="linkEmail" name="linkEmail" value="${link.linkEmail }">
					</td>
				</tr>
				<tr>
					<td>
						<label>排列顺序：</label>
					</td>
					<td>
						<input type="text" id="orderNum" name="orderNum" value="${link.orderNum }">
					</td>
				</tr>
				<tr>
					<td>
						<input type="hidden" id="linkId" name="linkId" value="${link.linkId }"/>
					</td>
					<td>
						 <button class="btn btn-primary" type="submit">保存友情链接</button>&nbsp;&nbsp;
						 <button class="btn btn-primary" type="button" "javascript:history.back()">返回</button>&nbsp;&nbsp;<font id="error" color="red">${error }</font>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
</body>
</html>