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>
    

      

    竹杖芒鞋轻胜马,一蓑烟雨任平生。 回首向来萧瑟处,也无风雨也无晴。
  • 相关阅读:
    【HDOJ5538】House Building(计算几何)
    maven操作
    Guava 是个风火轮之函数式编程(3)——表处理
    guava 学习笔记 使用瓜娃(guava)的选择和预判断使代码变得简洁
    guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用
    Google Guava官方教程(中文版)
    Guava中Predicate的常见用法
    guava函数式编程
    idea常用快捷键
    guava
  • 原文地址:https://www.cnblogs.com/yaobiluo/p/13200204.html
Copyright © 2011-2022 走看看