js表单验证(提示版)
生活随笔
收集整理的這篇文章主要介紹了
js表单验证(提示版)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼塊
<!--表單提交---> <!DOCTYPE html> <html> <head><title>去除空白</title> </head> <body><script type="text/javascript">window.onload=function(){//用戶名字事件:document.getElementById("username").onblur=function(){var RegExp=/^[a-zA-Z0-9_]{3,16}$/;var user=document.getElementById("username").valueif(!RegExp.test(user)){document.getElementById("innerspan").innerHTML="<font color=red>用戶名格式不正確</font>"}document.getElementById("username").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("username").value="";}document.getElementById("innerspan").innerHTML="";}document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//用戶密碼事件document.getElementById("password").onblur=function(){ //正則表達式var RegExp=/^[a-zA-Z0-9_]{3,16}$/;var password=document.getElementById("password").valueif(!RegExp.test(password)){document.getElementById("innerspan").innerHTML="<font color=red>用戶密碼格式不正確</font>"}document.getElementById("password").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("password").value="";}document.getElementById("innerspan").innerHTML="";}document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//確認密碼document.getElementById("dbpassword").onblur=function(){//獲取原始密碼var password=document.getElementById("password").value;//獲取確認密碼var dbpassword=document.getElementById("dbpassword").value;//驗證if(password!=dbpassword){document.getElementById("innerspan").innerHTML="<font color=red>用戶密碼不一致</font>" }//清理原先的值 獲取焦點事件document.getElementById("dbpassword").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("dbpassword").value="";} document.getElementById("innerspan").innerHTML="";}//清楚span提示 點擊事件document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//郵箱驗證document.getElementById("email").onblur=function(){//獲取郵箱var email=document.getElementById("email").value;//正則表達cvar RegExp=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!RegExp.test(email)){document.getElementById("innerspan").innerHTML="<font color=red>用戶郵箱格式不對</font>" }document.getElementById("email").onfocus=function(){if(document.getElementById("innerspan").innerHTML!=""){document.getElementById("email").value="";}document.getElementById("innerspan").innerHTML="";}document.getElementById("reset").onclick=function(){document.getElementById("innerspan").innerHTML="";}}//注冊事件，提交表單document.getElementById("button").onclick=function(){//觸發所有框的blur事件username.blur();username.focus();password.blur();password.focus();dbpassword.blur();dbpassword.focus();email.blur();email.focus();if(document.getElementById("innerspan").innerHTML==""){//提交表單document.getElementById("userform").submit();}}}</script><!--form表單--> <form action="http://8080//asss" method="post" id=userform><table><tr><td>用戶姓名:</td><td><input type="text" id=username></td></tr><tr><td>用戶密碼:</td><td><input type="password" id=password></td></tr><tr><td>驗證密碼:</td><td><input type="password" id=dbpassword></td></tr><tr><td>用戶郵箱:</td><td><input type="test" id=email></td></tr><tr><td><input type="button" value="提交" id=button><input type="reset" value="重置" id=reset ></td></tr></table> </form><span id=innerspan></span> </body> </html>運行結果:
?
?用戶名密碼郵箱不對就會提示，全部對了就可以提交
總結
以上是生活随笔為你收集整理的js表单验证(提示版)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 将二维数组名作为函数实参
- 下一篇： BZOJ3251: 树上三角形