jsp表单提交前端验证

分手后的思念是犯贱 2022-05-09 10:28 235阅读 0赞

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="static/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    	function myfunction(){
    		var name=document.getElementById("name").value;
    		var pass=document.getElementById("password").value;
    		var radio=$("input[name='role']:checked").val();
    		if(name==''){
    			alert("用户名不能为空");
    			//window.location.reload();
                //阻止表单提交
    			return false;
    		}
    		if(pass==''){
    			alert("密码不能为空");
    			//window.location.reload();
    			return false;
    		}
    		if(radio==null){
    			alert("你还未选中任何角色");
    			//window.location.reload();
    			return false;
    		}
    		return true;
    	}
    </script>
    </head>
    <body>
        <-- 此处可以写作控制器映射地址：test/login--->
    	<form action="success.jsp" method="post">
    		姓名：<input type="text" id="name" name="name"/></br>
    		密码：<input type="password" id="password" name="password"/></br>
    		<input type="radio" name="role" value="teacher"/>老师
    		<input type="radio" name="role" value="student"/>学生</br>
        <--此处一定有return，否则表单阻止提交后还是会跳转(不太清楚原理。)-->
    		<input type="submit" value="登录" onclick="return myfunction()"/>
    		<input type="reset" value="重置"/></br>
    	</form>
    </body>
    </html>

# **判断单选框是否被选中** #

1、利用获取选中值判断选中

/*------判断radio是否有选中，获取选中的值--------*/
        var val=$('input:radio[name="sex"]:checked').val();
        if(val==null){
              alert("什么也没选中!");
              return false;
         }
          else{
              alert(val);
          }

2、使用checked属性判断选中

/*------radio不能用“checked”相等来判断，只用用true来判断--------*/
      if ($(this).attr("checked")) {
            alert("选中了");
          }

# **jsp本页面判断text是否为空** #

1. 使用document.getElementById("username").value来判断其值是否为空

2.EL表达式

<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
    在页面上可以用C标签.
    <c:if test="${empty str}">  str为空</c:if><c:if test="${not empty str}">  str不为空
    </c:if>
    或者：
    <c:choose><c:when test="${empty  字符变量}">
     字符变量为空</c:when><c:otherwise>
     字符变量不为空
    </c:otherwise>
    </c:choose>