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>
    

      

    竹杖芒鞋轻胜马,一蓑烟雨任平生。 回首向来萧瑟处,也无风雨也无晴。
  • 相关阅读:
    DOCK-SWARM
    springMVC上传和下载文件
    生成任意内容任意类型的文件
    配置监听(系统启动和关闭时运行的程序)
    配置过滤器
    读取文件内容(TXT之类的文件)
    读取properties文件中的内容
    时间戳转时间字符串和时间
    启动Service的时候报错unable to install breakpoint in
    java后台调用接口并获取返回值
  • 原文地址:https://www.cnblogs.com/yaobiluo/p/13200204.html
Copyright © 2011-2022 走看看