js表单的校验

最新推荐文章于 2023-05-08 20:35:58 发布

无你处、无江湖

最新推荐文章于 2023-05-08 20:35:58 发布

阅读量163

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42675691/article/details/99822663

版权

本文介绍了如何改进JavaScript表单验证，避免使用弹窗提示，而是采用更友好的方式显示错误信息。通过分析HTML的innerHTML属性和JS中的onfocus、onblur、onkeyup等事件，详细阐述了实现这一目标的步骤和代码实现。

摘要由CSDN通过智能技术生成

2. 完成完成表单的校验

2.1 需求分析

昨天我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。

2.2 技术分析

【HTML中innerHTML属性】

【JS中的常用事件】

onfocus 事件: 获得焦点事件

onblur : 失去焦点

onkeyup : 按键抬起事件

2.3 步骤分析

2.4 代码实现

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<!--
    			引入外部的js文件
    		-->
    		<script type="text/javascript" src="../js/regutils.js" ></script>
    		<script>
    			/*
    				1. 确定事件 : onfocus
    				2. 事件要驱动函数
    				3. 函数要干一些事情: 修改span的内容
    			*/
    			function showTips(spanID,msg){
   
    				//首先要获得要操作元素 span
    				var span = document.getElementById(spanID);
    				span.innerHTML = msg;
    			}
    			/*
    				校验用户名:
    				1.事件: onblur  失去焦点
    				2.函数: checkUsername()
    				3.函数去显示校验结果
    			*/
    			function checkUsername(){
   
    				//获取用户输入的内容
    				var uValue = document.getElementById("username").value;
    				//对输入的内容进行校验
    				//获得要显示结果的span
    				var span = document.getElementById("span_username");
    				if(uValue.length < 6){
   
    					//显示校验结果
    					span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
    					return false;
    				}else{
   
    					span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
    					return true;
    				}
    			}
    			
    			/*
    			 密码校验
    			 */
    			function checkPassword(){
   
    				//获取密码输入
    				var uPass = document.getElementById("password").value;
    				var span = document.getElementById("span_password");
    				//对密码输入进行校验
    				if(uPass.length < 6){
   
    					span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
    					return false;
    				}else{
   
    					span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
    					return true;
    				}
    			}
    			
    			/*
    			 确认密码校验
    			 * */
    			function checkRePassword(){
   
    				//获取密码输入
    				var uPass = document.getElementById("password").value;
    				
    				//获取确认密码输入
    				var uRePass = document.getElementById("repassword"

最低0.47元/天解锁文章

无你处、无江湖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js表单的校验

2. 完成完成表单的校验2.1 需求分析昨天我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。2.2 技术分析【HTML中innerHTML属性】【JS中的常用事件】onfocus 事件: 获得焦点事件onb...
复制链接

扫一扫

专栏目录