zoukankan      html  css  js  c++  java
  • js02-表单 实时校验

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			function showTips(spanId,msg){
    				var span1 = document.getElementById(spanId)
    				span1.innerHTML = msg
    				span1.style.display = ""
    			}
    			function checkUsrName(){
    				var uValue = document.getElementById("username").value
    				var span1 = document.getElementById("span_username")
    				if(uValue.length < 6){
    					span1.innerHTML = "<font color='red' size='2'>对不起,用户名太短</font>"
    					span1.style.display = ""
    				}else{
    					span1.innerHTML = "<font color='green' size='2'>用户名可用</font>"
    					span1.style.display = ""
    				}				
    			}
    			function checkPassword(){
    				var vPass = document.getElementById("password").value
    				var span2 = document.getElementById("span_password")
    				if(vPass.length < 6){
    					span2.innerHTML = "<font color='red' size='2'>对不起,密码长度太短</font>"
    					span2.style.display = ""
    				}else{
    					span2.innerHTML = "<font color='green' size='2'>密码可用</font>"
    					span2.style.display = ""
    				}			
    			}
    			function init(){
    				
    			}
    			function checkForm(){
    				
    				return false
    			}
    		</script>
    	</head>
    	<body onload="init()">
    		<form action="01-自动切换图片.html" onsubmit="return checkForm()">
    			用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsrName()" onkeyup="checkUsrName()"/><span id="span_username" style="display:none">  提示用户名相关信息</span> <br />
    			密码:<input type="password" id="password" onfocus="showTips('span_password','长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/> <span id="span_password" style="display:none">  提示用户名相关信息</span><br />
    			确认密码:<input type="password" id = "repassword"/><br />
    			手机号:<input type="password" id="phoneNum"/><br />
    			邮箱:<input type="email" /><br />
    			<input type="submit" value="提交"/>
    		</form>
    	</body>
    </html>
    

      

    竹杖芒鞋轻胜马,一蓑烟雨任平生。 回首向来萧瑟处,也无风雨也无晴。
  • 相关阅读:
    [bzoj]2131: 免费的馅饼
    [bzoj]1098: [POI2007]办公楼biu
    [luogu]P2051 [AHOI2009]中国象棋
    [luogu]P2825 [HEOI2016/TJOI2016]游戏
    MSSQL To MongoDB Tool (FREE)
    虚拟机和Linux安装详解
    Maven
    springmvc的文件上传和下载,框架集成
    json详解以及fastjson使用
    JSP——语法,指令,表达式语言(EL),JSTL标签
  • 原文地址:https://www.cnblogs.com/yaobiluo/p/13200204.html
Copyright © 2011-2022 走看看