第十二节 登录页面表单校验

最新推荐文章于 2024-06-19 15:46:35 发布
最新推荐文章于 2024-06-19 15:46:35 发布
阅读量387 收藏 11
点赞数 13
分类专栏： vue3 elementPlus mock后台管理系统 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongc93/article/details/135484054
版权

系列文章目录

目录

系列文章目录

前言

操作方法

总结

前言

继续登录页面，这节主要介绍表单的验证。

登录页面是我们的重重之重，将会用大量篇幅介绍完善登陆页面。

涉及到密码是否显示、登陆接口、vuex、cookie等

操作方法

  1. 登录页面引入reactive
     

    2. 


                

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  hongc93
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    13
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    11
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
前端简单入门第二十二讲 使用jQuery完成表单校验

				
			

			

				

					李阿昀的博客
				

				

					01-06
					
					647
					
				

			

		

		

			
				
还记得我之前写过的前端简单入门第十一讲 使用JavaScript完成注册页面表单提示及校验一文吗？之前我是使用JavaScript完成了表单的简单校验，即在用户提交表单的时候，我们最好是能够在用户数据提交给服务器之前去做一次校验，防止服务器压力过大，并且需要给用户一个友好提示。
在本文中，我会使用jQuery完成表单的简单校验，不可避免地要知道jQuery中两个常用的事件处理函数，它们是trigg...

			
		

	



                

              
                



	

		

			

				
					
form表单登录异步ajax校验

				
			

			

				

					AlexKate的博客
				

				

					11-22
					
					5114
					
				

			

		

		

			
				
第一步:准备用户登录的html页面




	
		
		
		我的速运-登陆

		
		

		
		
		
		
		

		
			function loginindex() {
				if (document.getElementById("telephone").value == '' || document.getElementById("password").value ==

			
		

	



                


  
              

                


	

		

			

				
					
springmvc中的表单校验

				
			

			

				

					新春客
				

				

					09-23
					
					858
					
				

			

		

		

			
				
表单校验顾名思义就是对输入表单中的数据进行校验，如果符合要求的输入格式才可以进入下一步工作。在项目开发中，几乎每一个项目都会涉及到类似操作，用户注册登录、填写一些表单数据等等，为了让用户有一个良好的用户体验，但是又不能让用户随意的输入一些非法的数据和不符合要求的数据，这时程序就有必要对用户输入的一系列参数进行校验，校验分为前端校验和后端校验，如果仅仅只有前端校验的话，如果浏览器设置了禁用js，那么...

			
		

	





	

		

			

				
					
使用JS完成注册页面表单校验

				
			

			

				

					qq_41485882的博客
				

				

					09-08
					
					1702
					
				

			

		

		

			
				
使用JS完成注册页面表单校验 
1.技术分析 
使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！ 
使用 
向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象) 
2.步骤分析 
第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数 
第二步：聚焦事件绑定的函数中(获取span给出提示信息) 
第三步...

			
		

	



		

			
		



	

		

			

				
					
vue表单校验

				
			

			

				

					两只橙的博客
				

				

					09-04
					
					4473
					
				

			

		

		

			
				
1.npm安装vue-validator$ npm install vue-validator
代码示例:
var Vue=require("vue");
var VueValidator=require("vue-validator");
Vue.use(VueValidator);
2.直接使用script标签引入vue.js要下载vue-validator，那么进入cdn的地址https://

			
		

	





	

		

			

				
					
使用js(javascript)完成注册页面表单校验

				
			

			

				

					qq_41485882的博客
				

				

					09-06
					
					4086
					
				

			

		

		

			
				
使用js(javascript)完成注册页面表单校验 
步骤分析： 
第一步：确定事件（onsubmit)并为其绑定一个函数 
第二步：书写这个函数（获取用户输入的数据<获取数据时需要在指定位置定义一个id>) 
第三步：对用户输入的数据进行判断 
第四步：数据合法（让表单提交） 
第五步：数据非法（给出错误提示信息，不让表单提交） 
问题：如何控制表单提交？ 
        关事件...

			
		

	





	

		

			

				
					
一个简单的form表单登录界面

					
热门推荐

				
			

			

				

					cxzlp0521的博客
				

				

					09-21
					
					4万+
					
				

			

		

		

			
				
1.表单展示



2.HTML代码


<body>
<div class="main">
    <div class="title">
        <span>密码登录</span>
    </div>

    <div class="title-msg"

			
		

	





	

		

			

				
					
vue如何制作自定义表单校验样式

				
			

			

				

					YodgeGGG的博客
				

				

					12-17
					
					1106
					
				

			

		

		

			
				
vue如何制作自定义表单校验样式
先上效果图

由于vue的优越性，所以衍生出很多与之匹配并非常受欢迎的ui组件库，比如最常见的element-ui和antvue，两者内容几乎相同，样式略有差异，所以在制作一款后台管理系统的时候，表单与表格非常重要，对于表单的验证，出于开发效率的原因上我们通常会直接引用这些组件库中的内容，对于这些封装好的组件我们可以通过穿透(深层)样式或是定制样式的方法去修改，但对于一些个性化较强的样式，这样的修改显然很费劲，所以对于这些例如登录/注册或是其他类个性化较强的表单，我们可以自

			
		

	





	

		

			

				
					
前端简单入门第十一讲 使用JavaScript完成注册页面表单提示及校验

				
			

			

				

					李阿昀的博客
				

				

					05-03
					
					4119
					
				

			

		

		

			
				
使用JavaScript完成注册页面表单提示及校验还记得我之前写过的教你一天玩转JavaScript(二)——完成对注册页面的数据的简单校验一文吗？很明显这种以弹出对话框的形式进行表单校验的方式不是特别友好！更好地做法是可以将错误信息显示到文本框的后面，而且当光标落入到文本框的时候，会有提示的信息。 
如要使用JavaScript完成注册页面表单提示及校验，不可避免地要知道下面两个知识点：
Java

			
		

	





	

		

			

				
					
struts2笔记之校验表单信息

				
			

			

				

					10-02
				

			

		

		

			
				
总结来说，Struts2的表单校验机制提供了多种灵活的方式，开发者可以根据实际需求选择适合的校验策略，确保用户输入的数据准确无误，从而提高应用的安全性和稳定性。无论是使用XML配置文件、注解还是自定义校验方法，...

			
		

	





	

		

			

				
					
第二章 猜数字小游戏 S02.pdf

				
			

			

				

					01-15
				

			

		

		

			
				
3. 如果找到，ActionServlet将表单数据封装成ActionForm对象，该对象通常是一个JavaBean，用于存储用户输入。 4. ActionServlet根据配置决定是否调用ActionForm的Validate方法进行数据校验。若有错误，返回错误信息...

			
		

	





	

		

			

				
					
Web开发敏捷之道-应用Rails进行敏捷Web开发-第三版.rar

				
			

			

				

					09-02
				

			

		

		

			
				
第12章 任务G：最后一片饼干 129 12.1 生成XML 129 12.2 扫尾工作 136 第13章 任务I：国际化 139 13.1 迭代I1：翻译 139 13.2 迭代I2：探索内容的翻译策略 149 第14章 任务T：测试 151 14.1 加上测试 151 14.2 模型...

			
		

	





	

		

			

				
					
python入门到高级全栈工程师培训 第3期 附课件代码

				
			

			

				

					06-07
				

			

		

		

			
				
第12章  01 今日内容介绍以及基础测试题答案讲解 02 Python 列表的魔法 03 Python 元组的魔法 04 Python 字典的魔法 05 Python 错误更正：布尔值可以作为字典的key 06 Python 今日内容整理  第13章  第13章共1课  第...

			
		

	





	

		

			

				
					
Vue3-滑动到最右验证功能

				
			

			

				

					地理信息的专栏
				

				

					06-13
					
					545
					
				

			

		

		

			
				
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证

			
		

	





	

		

			

				
					
JS面试题第一章

					
最新发布

				
			

			

				

					2301_79858637的博客
				

				

					06-19
					
					229
					
				

			

		

		

			
				
undefined表示的是无的原始值。但是null表示的是无 对象 0。

			
		

	





	

		

			

				
					
【尚庭公寓SpringBoot + Vue 项目实战】后台用户信息管理（十七）

				
			

			

				

					小林的博客
				

				

					06-18
					
					932
					
				

			

		

		

			
				
用户的密码通常不会直接以明文的形式保存到数据库中，而是会先经过处理，然后将处理之后得到的"密文"保存到数据库，这样能够降低数据库泄漏导致的用户账号安全问题。

			
		

	





	

		

			

				
					
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用

				
			

			

				

					浩星
				

				

					06-18
					
					361
					
				

			

		

		

			
				
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。

			
		

	





	

		

			

				
					
写一个js登录页面包括校验

				
			

			

				

					07-11
				

			

		

		

			
				
好的，我可以为您提供一个简单的 JS 登录页面示例，包括基本的校验功能。

HTML 代码：

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h2>登录</h2>
    <form>
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
        </div>
        <div>
            <button type="submit" onclick="login()">登录</button>
        </div>
    </form>
    <script src="login.js"></script>
</body>
</html>
```

JS 代码：

```
function login() {
    // 获取表单输入
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    
    // 校验用户名和密码是否为空
    if (!username || !password) {
        alert("请输入用户名和密码！");
        return false;
    }
    
    // 发送登录请求
    // TODO: 发送请求的代码
    
    // 处理登录结果
    // TODO: 处理登录结果的代码
}
```

这个示例中，我们首先获取了用户名和密码的输入，然后进行了基本的校验，如果用户名或密码为空，则提示用户输入。接下来我们可以在 `TODO` 标记的位置编写发送登录请求和处理登录结果的代码。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
hongc93

			
感谢鼓励 继续航行

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值