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