表单验证后提交
需求
（1）用戶名不能為空
（2）用戶名必須在6-14位之間
（3）用戶名只能有數(shù)字和字母組成，不能含有其它符號(hào)（正則表達(dá)式）
（4）密碼和確認(rèn)密碼一致
（5）統(tǒng)一失去焦點(diǎn)驗(yàn)證
（6）錯(cuò)誤提示信息統(tǒng)一在span標(biāo)簽中提示，并且要求字體12號(hào)，紅色。
（7）文本框再次獲得焦點(diǎn)后，清空錯(cuò)誤提示信息
（8）最終表單中所有項(xiàng)均合法方可提交
結(jié)果演示
代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表單驗(yàn)證</title><style type="text/css">span{font-size: 12px;color: red;}</style></head><body><!-- 思路寫出用戶名+密碼+確認(rèn)密碼+提交的表單用戶名失去焦點(diǎn)就檢測(cè)是否正確，錯(cuò)誤在旁邊span顯示不為空+6-14位之間+數(shù)字和字母組成確認(rèn)密碼失去焦點(diǎn)就驗(yàn)證是否和第一次是密碼一致，錯(cuò)誤在旁邊span顯示提交表單上述都正確后再提交--><script type="text/javascript">/* （1）用戶名不能為空（2）用戶名必須在6-14位之間（3）用戶名只能有數(shù)字和字母組成，不能含有其它符號(hào)（正則表達(dá)式）（4）密碼和確認(rèn)密碼一致（5）統(tǒng)一失去焦點(diǎn)驗(yàn)證（6）錯(cuò)誤提示信息統(tǒng)一在span標(biāo)簽中提示，并且要求字體12號(hào)，紅色。（7）文本框再次獲得焦點(diǎn)后，清空錯(cuò)誤提示信息（8）最終表單中所有項(xiàng)均合法方可提交*/window.onload=function(){//console.log(11111) // 用戶名失去焦點(diǎn)就檢測(cè)是否正確，錯(cuò)誤在旁邊span顯示 // 不為空+6-14位之間+數(shù)字和字母組成var myUseName=document.getElementById("useName");var myUseNameSpan=document.getElementById("usenameSpan");myUseName.onblur=function(){//console.log(11111)// 去除掉前后空白var nameArr=myUseName.value.trim();//console.log(nameArr);//（1）用戶名不能為空if(nameArr==""){myUseNameSpan.innerHTML="用戶名不能為空";}else{//（2）用戶名必須在6-14位之間if(nameArr.length>14||nameArr.length<6){myUseNameSpan.innerHTML="用戶名必須在6-14位之間";}else{//（3）用戶名只能有數(shù)字和字母組成，不能含有其它符號(hào)（正則表達(dá)式）var zhengZeUseName=/^[a-zA-Z0-9]+$/;var ok=zhengZeUseName.test(nameArr);if(!ok){myUseNameSpan.innerHTML="用戶名只能有數(shù)字和字母組成";}else{myUseNameSpan.innerHTML="";}}}}// 確認(rèn)密碼失去焦點(diǎn)就驗(yàn)證是否和第一次是密碼一致，錯(cuò)誤在旁邊span顯示var myConPassword=document.getElementById("conPassword");var myConPasswordSpan=document.getElementById("conPasswordSpan");myConPassword.onblur=function(){//拿到之前的密碼var firstPassword=document.getElementById("password").value;//console.log(firstPassword);//驗(yàn)證是否和第一次是密碼一致if(firstPassword!=myConPassword.value){myConPasswordSpan.innerHTML="密碼和確認(rèn)密碼不一致";}else{myConPasswordSpan.innerHTML="";}}//用戶名或者確認(rèn)密碼有焦點(diǎn)的時(shí)候,旁邊的span為空myUseName.onfocus=function(){myUseNameSpan.innerHTML="";}myConPassword.onfocus=function(){myConPasswordSpan.innerHTML="";}// 提交表單 // 上述都正確后再提交//讓用戶名+確認(rèn)密碼都失去焦點(diǎn),重新驗(yàn)證一下//判斷兩個(gè)span是否為空document.getElementById("tiJiaoButton").onclick=function(){//先獲取焦點(diǎn)才能再失去myUseName.focus();//觸發(fā)文本框的獲取焦點(diǎn)事件myUseName.blur();//觸發(fā)文本框的失去焦點(diǎn)事件// 驗(yàn)證密碼,怎么驗(yàn)證密碼？讓確認(rèn)密碼失去焦點(diǎn)myConPassword.focus();myConPassword.blur();console.log("用戶名span的值="+myUseNameSpan.innerHTML);console.log("確認(rèn)密碼span的值="+myConPasswordSpan.innerHTML);//判斷兩個(gè)span是否為空if(myUseNameSpan.innerHTML==""&&myConPasswordSpan.innerHTML==""){//提交document.getElementById("myForm").submit();}}}</script><!-- 思路寫出用戶名+密碼+確認(rèn)密碼+提交的表單用戶名失去焦點(diǎn)就檢測(cè)是否正確，錯(cuò)誤在旁邊span顯示不為空+6-14位之間+數(shù)字和字母組成確認(rèn)密碼失去焦點(diǎn)就驗(yàn)證是否和第一次是密碼一致，錯(cuò)誤在旁邊span顯示提交表單上述都正確后再提交--><!-- 寫出用戶名+密碼+確認(rèn)密碼+提交的表單 --><form id="myForm" action="http://localhost:8080/oa/save" >用戶名：<input type="text" name="useName" id="useName" /> <span id="usenameSpan"></span><br>密 碼 ：<input type="password" name="password" id="password" /><br>確認(rèn)密碼：<input type="password" name="conPassword" id="conPassword" /> <span id="conPasswordSpan"></span><br><input type="button" value="提交" id="tiJiaoButton"/></form></body> </html>總結(jié)
- 上一篇： javascript解析json格式的字
- 下一篇： 新手小白零基础搭建个人博客（一）服务器篇