JavaScript表单校验

最新推荐文章于 2024-04-30 21:57:01 发布

mqingo

最新推荐文章于 2024-04-30 21:57:01 发布

阅读量946

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/mqingo/article/details/83963178

版权

确认事件
           事件触发函数
           函数操作元素

           校验用户名
               1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
                   事件: 焦点事件 onfocus
                   触发函数
                   函数里面要做一些事情
                       span 给用户提示信息

               2. 当用户鼠标移开时候, 校验一下用户输入
                   事件: 失去焦点 onblur
                   触发函数
                   函数要干事情:
                       校验用户输入
                       得到用户输入的值

               3. 当用户按键输入抬起的时候, 校验一下用户输入

01JS表单校验.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01JS表单校验</title>
		<!--
        	
        	/*
				1. 确定事件 : onfocus
				2. 事件要驱动函数
				3. 函数要干一些事情: 修改span的内容
			*/
        -->
       <!--
			确认事件
			事件触发函数
			函数操作元素
			
			校验用户名
				1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
					事件: 焦点事件 onfocus
					触发函数
					函数里面要做一些事情
						span 给用户提示信息
						
				2. 当用户鼠标移开时候, 校验一下用户输入
					事件: 失去焦点  onblur
					触发函数
					函数要干事情:
						校验用户输入
						得到用户输入的值
						
				3. 当用户按键输入抬起的时候, 校验一下用户输入
		-->
        <script>
        	//用户名
        	 function show(){
            //首先要获得要操作元素 span
        	var span = document.getElementById("uname");
        	span.innerHTML = "<font color='red'>用户名长度不能小于6位</font>";
        }
        
        function checkusername(){
            //获取用户输入的内容
			var uValue = document.getElementById("username").value;
			//对输入的内容进行校验
			var span = document.getElementById("uname");
			//获得要显示结果的span
			if(uValue.length < 6){
				//显示校验结果
				 span.innerHTML = "<font color='red'>对不起,您输入的用户名太短.</font>";
			}else{
				//显示校验结果
				 span.innerHTML = "<font color='green'>√</font>";
			}		
			
	    }
        
           //密码
			function show1(){
				 //首先要获得要操作元素 span
				 var span = document.getElementById("upass");
				 span.innerHTML = "<font color='red'>密码长度不得小于6位!</font>";
			}
			
			function checkpassword(){
				 //获取用户输入的内容
				 var uValue = document.getElementById("password").value;
				 //对输入的内容进行校验
				 var span = document.getElementById("upass");
				 //获得要显示结果的span
				 if(uValue.length < 6){
				 	//显示校验结果
				 	span.innerHTML = "<font color='red'>对不起,您输入的密码太短.</font>";
				 }else{
				 	//显示校验结果
				 	span.innerHTML = "<font color='green'>√</font>";
				 }
			}
			
			
			
        </script>
	</head>
	<body>
		<form>
			用户名      :<input type="text" placeholder="请输入用户名" id="username" onfocus="show()" onblur="checkusername()" onkeyup="checkusername()"/><span id="uname"></span><br/>
			密    码      :<input type="password" placeholder="请输入密码" id="password" onfocus="show1()" onblur="checkpassword()" onkeyup="checkpassword()"/><span id="upass"></span><br/>
			确认密码  :<input type="password" placeholder="和密码保持一致" id="repassword" /><span id="urepass"></span><br/>			
			Email:<input type="text" placeholder="Email" id="email" /><span id="uemail"></span><br/>
			手机号      :<input type="text" placeholder="请输入手机号" id="phone" /><span id="uphone"></span><br/>
			<input type="button" value="注册" /><br/>
		</form>
	</body>
</html>

02JS表单校验优化.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02JS表单校验优化</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.函数: chec