为Web登陆添加验证码功能
大家好，才是真的好。幾天沒見，很是想念。首先，我覺得應該換換文首的動圖，但我居然沒找到我新做的動圖——可能我還沒做吧。其次，上周新聞寫得很多，這周我們就來點硬貨。今天我們寫寫Web登陸頁怎么加驗證碼功能。對，和標題是一樣的，就算是點題。
嗯，沒有分割線，但以下為嚴肅的技術內容。
在Domino中開啟了會話驗證，并創建了Domcfg.nsf數據庫，Web驗證登陸時便會出現以下表單界面：
在此基礎上，我們加了一個驗證碼，效果如下：
如不輸入驗證碼或驗證碼錯誤，當我們點擊登陸按鈕，則會出現相應的提示，比如“請您輸入驗證碼”，如下圖：
是不是已經實現了驗證碼的功能？好，今天我們的內容就到此結束。
但，其實還沒有，這只是我實現的功能，你們還沒有實現。
關于怎么創建domcfg.nsf我們不說，直接看圖
圖很大，應該看得很清楚。另外的步驟是開啟Domino中的Web會話驗證，這個就真不截圖了。
我們繼續回來主線，打開domcfg.nsf數據庫之后，找到表單$$LoginUserForm雙擊打開
在表格中多追加兩行，然后添加
別忘了，如果提交按鈕沒了，系統可能會自動生成一個按鈕放到左下角，所以我們得注釋掉這個按鈕，辦法是寫上，然后選擇"文本"菜單->“內置HTML”，效果如下圖：
重頭戲來了，我們在JS Header中要添加生成驗證碼的JS代碼，如下圖
詳細代碼如下： //頁面加載時，生成隨機驗證碼//生成驗證碼的方法function createCode(length) {var code = "";var codeLength = parseInt(length); //驗證碼的長度var checkCode = document.getElementById("checkCodeChar");所有候選組成驗證碼的字符，當然也可以用中文的var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //循環組成驗證碼的字符串for (var i = 0; i < codeLength; i++){//獲取隨機驗證碼下標var charNum = Math.floor(Math.random() * 62);//組合成指定字符驗證碼code += codeChars[charNum];}if (checkCode){//為驗證碼區域添加樣式名checkCode.className = "code";//將生成驗證碼賦值到顯示區checkCode.innerHTML = code;}}//檢查驗證碼是否正確function validateCode(){//獲取顯示生成的驗證碼var checkCode = document.getElementById("checkCode").innerHTML;//獲取輸入的驗證碼var inputCode = document.getElementById("inputCode").value;//console.log(checkCode);//console.log(inputCode);if (inputCode.length <= 0){alert("請輸入驗證碼！");return false}else if (inputCode.toUpperCase() != checkCode.toUpperCase()){alert("驗證碼輸入有誤！");createCode(4);return false}else{return true} };//登陸時調用 function login() { var thisform=document.forms[0];if(thisform.Username.value=="") { thisform.Username.focus(); alert("請您輸入用戶名"); } else if(thisform.Password.value=="") { thisform.Password.focus(); alert("請您輸入密碼"); } else if(thisform.inputCode.value==""){ alert("請您輸入驗證碼"); }else { thisform.submit(); } }
代碼是夠長的，不過只需要粘貼復制，所以特別簡單。
還有一個步驟就能看到效果，便是在表單的onload事件中寫上"createCode（4）"；如果要創建6位驗證碼，就請寫createCode（6），但如驗證碼太長，會被用戶打——這樣，表單加載時生成驗證碼；
還有把HTML Body Attributes事件中的代碼清干凈，不用問為什么，你試試就知道。聽人勸，吃飽飯。
好了，摩拳擦掌，現在可以看看效果了。
嗯，不錯，但有點丑，還得加點樣式進去。把下列樣式表加到表單上，內置為HTML，如下圖：
CSS樣式也貼給大家
好看一點的效果就出現了
這種簡單的基于JavaScript的驗證碼方式是不是很容易實現？你也許可以做得更好，也許——還做不出來。
最后，還有一個彩蛋，那就是我共享了一篇Notes Domino為什么這么特別的PPT，有興趣可下載https://pan.baidu.com/s/1DrFaxMAqa0Fh22cFBVZLxw
好了，今天我們就寫到這里，下面真的沒有內容了。但請繼續保持關注。
更多精彩內容請關注微信公眾號“協作者”
原文地址：https://mp.weixin.qq.com/s/krGDyi-7VU70c4yEXRZOTg
總結
以上是生活随笔為你收集整理的为Web登陆添加验证码功能的全部內容，希望文章能夠幫你解決所遇到的問題。
