关于表单校验的问题

最新推荐文章于 2023-09-20 14:50:09 发布

luyunix

最新推荐文章于 2023-09-20 14:50:09 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

分类专栏： Javaweb的学习

本文链接：https://blog.youkuaiyun.com/weixin_37311400/article/details/79944612

Javaweb的学习专栏收录该内容

4 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
	<h3>登录啊啊啊</h3>
	<hr/>
	<form id="frm" action="control.jsp" method="post">
		<input type="text" id="username" name="username" placeholder="请输入用户名"><br/><br/>
		<input type="password" id="pwd" name="pwd" placeholder="请输入密码"><br/><br/>
		<p id="msg" style="color:red;fontsize:8px">${msg }</p>
		<!-- <input type="submit" value="登录啊" onclick="check_input()"> -->
		<!-- <button onclick="check_input()">登录啊</button> -->
		<input type="button" value="登录啊" onclick="check_input()">
	</form>
</center>
<script type="text/javascript">
	function check_input(){
		var username = document.getElementById("username").value;
		var pwd = document.getElementById("pwd").value;
		document.getElementById("msg").innerHTML = "";
	    if("" == username || "" == pwd){
		    document.getElementById("msg").innerHTML = "请输入用户名或密码！";
		    return;
	    }
		document.getElementById("frm").submit();  
	}
</script>
</body>
</html>

照前面代码的写法，注释的两行校验无效，下一行才是有效校验，

前面两个无论你的校验函数无论username和pwd是否为空表单都会自动提交到后台。

翻阅w3c规范

参考代码：

<html>
<head>
<script type="text/javascript">
function validate(){
    var at=document.getElementById("email").value.indexOf("@")
    var age=document.getElementById("age").value
    var fname=document.getElementById("fname").value
    submitOK="true"

    if (fname.length>10) {
         alert("名字必须小于 10 个字符。")
         submitOK="false"
     }
    if (isNaN(age)||age<1||age>100){
         alert("年龄必须是 1 与 100 之间的数字。")
         submitOK="false"
     }
    if (at==-1) {
         alert("不是有效的电子邮件地址。")
         submitOK="false"
     }
    if (submitOK=="false"){
         return false
     }
}
</script>
</head>

<body>
    <form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">
        名字（最多 10 个字符）：<input type="text" id="fname" size="20"><br />
        年龄（从 1 到 100）：<input type="text" id="age" size="20"><br />
        电子邮件：<input type="text" id="email" size="20"><br />
        <br />
        <input type="submit" value="提交"> 
    </form>
</body>

</html>