当前位置:首页 > 学习笔记 > 正文内容

java web js验证表单(不通过不提交后台)

廖万里3年前 (2022-09-11)学习笔记49498

Register.html

form表单提交时什么也不填,从前台取到后台是空,不是null

通过document的submit()方法

<html>
  <head>
  <meta charset = 'UTF-8'>
    <title>廖万里的博客:kkkliao.cn</title>
       
    <script type="text/javascript" language = "javascript">
  
    //name是给后台获取数据信息的标识符,id是js定位的标识符
    function check(){
    //验用户名
  
    	var username = document.getElementById("user").value;
    	if(username == ""){
			alert("用户名不能为空");
			return ;
			}
     	if(!(/^\w{6,12}$/.test(username))){	
			alert("用户名为6-12位");
			return ;
			}
      
    //验密码
    
    
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
		
        if(pwd1 == ""){
			alert("密码不能为空");
			return ;
			}
       
		
		if(pwd1 != pwd2){
			alert("两次输入的密码不一样,请重新输入");
			return ;
			}
		document.getElementById("sub").submit();//方法进行到这里将form的action提交
    
    }
    
    
   
	</script>
	
  </head>
  
  
  <body>
    <h1>注册页面 </h1>
   
 
 <form id="sub" action="http://www.baidu.com">
   <table>       
              
           <tr>
           <td>用户名:</td>
           <td  > <input type="text" name="username" id="user" placeholder="请输入用户名"></td>
           </tr>  
               
           <tr>
           <td>密码:</td>
           <td> <input type="password" name="password1" id="pwd1" placeholder="请输入密码"></td>
           </tr>
           
           <tr>
           <td>密码确认:</td>
           <td> <input type="password" name="password2" id="pwd2" placeholder="请重新输入密码"></td>
           </tr>
          
    	</table>
    
    	<input type="button" value="注册" onclick="check()"/> 
   </form>
   
   
   
  
    
    	
   </form>
  </body>
</html>

表单成功提交则跳转到百度

java web js验证表单(不通过不提交后台)


onsubmit()方式,提交按钮点击时先触发,然后触发submit事件。如果不加控制的话,默认返回true,因此表单总能提交,若返回的是false则不提交。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
       
  <script>
	function check1()
	{
		var username = document.getElementById("user").value;//获取用户名的输入元素标签
		
		if(username=="")//如果用户名为空,提示并返回false
		{
			alert("用户名不能为空");
			return false;
					
		}
		
		return true;
	}
		
		function check2()
		{
			 var pwd1 = document.getElementById("pwd1").value;
		     var pwd2 = document.getElementById("pwd2").value;
						  
		     if(pwd1 == ""){
				alert("密码不能为空");
				return false;
					}
		     if(pwd1 != pwd2){
					alert("两次输入的密码不一样,请重新输入");
					return false;
					}
			return true;
		}
</script>
<form  onsubmit="return check1()&&check2()"> 
	 <table>       
              
           <tr>
           <td>用户名:</td>
           <td  > <input type="text"  id="user" placeholder="请输入用户名"/></td>
           </tr>  
               
           <tr>
           <td>密码:</td>
           <td> <input type="password"  id="pwd1" placeholder="请输入密码"/></td>
           </tr>
           
           <tr>
           <td>密码确认:</td>
           <td> <input type="password"  id="pwd2" placeholder="请重新输入密码"/></td>
           </tr>
           
           <tr>
           <td><input type="submit" value="注册"/></td>
           </tr>
          
    </table>
</form>
  </body>
</html>

java web js验证表单(不通过不提交后台)

Springboot + maven 在SSM框架 使用JQuery
关于导入Jquery
控制器未写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <title>登录页</title>
    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript">
        // 控制onsubmit提交的方法,方法名是form()
        function form(){
            var name = $("#loginname").val();
            var password = $("#loginpass").val();
            //判断上面的变量,如果为空字符串不能提交
            if(name == ""){
                alert("请输入登录名!");
                return false;
            }
            if(password == ""){
                alert("请输入密码!");
                return false;
            }
            //除以上结果的可以提交,返回true
            return true;
        }
    </script>
    <style>
        .form-horizontal{
            width:500px;
            height:300px;
        }
    </style>
</head>
<body>
<h1>练习ssm框架之登录实现</h1>
<hr>
<form action="testlogin" method="post"
      onsubmit="return form()">
    <div>
        <label class="col-sm-2 control-label">用户名</label>
        <div>
            <input type="text" id="loginname"
                   name="name">
        </div>
    </div>
    <div>
        <label class="col-sm-2 control-label">密码</label>
        <div>
            <input type="password" id="loginpass"
                   name="password">
        </div>
    </div>
    <div>
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
</body>
</html>


本文链接:https://www.kkkliao.cn/?id=35 转载需授权!

分享到:

版权声明:本文由廖万里的博客发布,如需转载请注明出处。


“java web js验证表单(不通过不提交后台)” 的相关文章

万策云网络工作室旗下高性能服务器,保证用户数据安全

万策云网络工作室旗下高性能服务器,保证用户数据安全

万策云工作室旗下所有业务均使用1T高防高性能服务器,数据定时备份,多台服务器实时同步数据,保障用户数据安全!多台服务器定时备份,企业级安全,50m独享,大带宽抗cc文件实时同步备份,数据库定时备份。主服务器采用T级群防,150G单机防御的国内高性能服务器。秒解机器!真实可测客户数据丢了都可以找回来...

如何配置mybatis并且自动生成实体类pojo和mapper

如何配置mybatis并且自动生成实体类pojo和mapper

1如何配置mybatis1.1 复制jar 点击下载mybatis和mysql的jar包:mybatis和mysql的jar包 - 万策云盘编辑1.2 复制配置文件 resources配置文件下载: resources配置文件 - 万策云盘编辑1.3...

MyBatis-写分页的几种方法,怎么写分页最简单

MyBatis-写分页的几种方法,怎么写分页最简单

1、就是直接使用我们的SQL语句进行分页,也就是在Mapper里面加上分页的语句就好了。比如MySQL添加一个limit 2,4。这种方式弊端很大,比如我们不用MySQL了,所有的代码都要修改。2、MyBatis中的分页的插件PageHelper,3、自己手写分页框架。这种用的比较少,不是说写不出来...

CloudDriver一款将各种网盘云盘挂在到电脑本地变成本地磁盘的工具 教程

CloudDriver一款将各种网盘云盘挂在到电脑本地变成本地磁盘的工具 教程

平时我们的电脑可能由于大量的文件资料之类的导致存储空间可能不够,所以我们可以选择将网盘我们的本地磁盘用来存放东西。CloudDrive 是一款可以将 115、阿里云盘、天翼云盘、沃家云盘、WebDAV 挂载到电脑中,成为本地硬盘的工具,支持 Windows 与 Dock...

一款安卓/鸿蒙设备也能够轻松连接homepod的插件,跨平台音乐推流工具airmusic分享

一款安卓/鸿蒙设备也能够轻松连接homepod的插件,跨平台音乐推流工具airmusic分享

编辑点评:支持多种音频传输的方案,最为重要的就是支持AirPlay设备支持多种上音频传输方式的一款神器,AirMusic安卓免费版,是个解锁了高级功能的版本,软件需要root权限,可以将音频内容以满足自己需求的方式来推送到你所需要的音响当中,让你的安卓设备也能够轻松的享受到各种不同的音响的内容。操作...

如何将 Kali Linux 写入到U盘

如何将 Kali Linux 写入到U盘

我们需要用到的工具:至少需要一个大于8G的U盘(大点更好),Ventoy(U盘写入工具),一个Kali Linux镜像1.Kali Linux下载地址:https://www.kali.org/get-kali/#kali-installer-images2.U盘写入工具:https://...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。