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>
    

      

    竹杖芒鞋轻胜马,一蓑烟雨任平生。 回首向来萧瑟处,也无风雨也无晴。
  • 相关阅读:
    C/S 与 B/S 区别
    XE2的一些新东西
    Versant数据库实验
    概率算法sherwood算法
    组合数学引论部分习题答案
    概率算法n皇后的LV算法
    概率算法Las Vegas
    小型企业库存管理系统的设计与实现
    概率算法Numerical和Monte Carlo
    我的彩票梦十一运夺金模拟程序
  • 原文地址:https://www.cnblogs.com/yaobiluo/p/13200204.html
Copyright © 2011-2022 走看看