JS判定註冊表單的幾個方式 及 Ajax進行用戶名存在判定
阿新 • • 發佈：2018-07-29
手機號 col 分層 code 驗證用戶名 inf href maria ech
最近感覺不趕緊把代碼邏輯記一下梳理一下,再做的時候就容易進入"邏輯誤區".
有個表單,簡單點.
<!DOCTYPE html> <!-- 註冊表單驗證,用戶名格式(未加入Ajax)密碼兩次相同,則可提交 --> <html> <head> <meta charset="UTF-8"> <!-- 實現form表單驗證及跳轉action --> <title>JS2_form表單驗證</title> </head> <body> <p>註冊</p> <form action="http://www.ykmimi.com" name="formReg" onsubmit="return submitFunc()" method="post"> <!-- [錯誤方式->]onchange="unameChange()"--> <!-- 傳參this.value --> 用戶名:<input type="text" name="username" id="username" onfocus="unameFocus(this.value)"onblur="unameBlur(this.value)" /><span id="unameTag"></span> <br /> <!-- onfocus="upass1Focus()" --> 密碼:<input type="password" name="password" id="password" onfocus="upass1Focus()" onblur="testPassword()" /><span id="upass1Tag"></span> <br /> <!-- onfocus="upass2Focus()" --> 重復密碼:<input type="password" name="password2" id="password2" onfocus="upass2Focus()" onblur="testPassword()" /> <!-- onchange="upass2Blur()" --> <span id="upass2Tag"></span> <br /> <!-- 年齡:<input type="text" name="age" id="age" onfocus="uageFocus()" onblur="uageBlur()" /><span id="uageTag"></span> <br/> --> <input type="submit" value="提交" /> </form> <hr> <br> 待完善: <br> 1.bootstrap框架引入. <br> 2.後臺判定. <br> 3.Ajax判定用戶名是否存在. <br> 4. </body> <!-- 引入外部js,判定註冊賬戶賬戶信息 --> <script type="text/javascript" src="scripts/reg2.js"> </script> </html>
然後這個reg2.js
:
/** * 用戶註冊界面JS */ // ///*[[用戶名的焦點和失焦方法]] // 驗證用戶名格式長度.等,Focus時 function unameFocus() { // 獲取id為username中的數據值 var unameObj = document.querySelector("#username"); // 獲取具體值 var uname = unameObj.value; if (uname.length == 0 || uname=="") { document.querySelector("#unameTag").innerHTML = "請輸入用戶名,長度不小於3位."; return false; } } // 驗證用戶名格式長度,等, Blur時 function unameBlur() { // 獲取document對象 var unameObj = document.querySelector("#username"); var upass1Obj = document.querySelector("#password"); var upass1Tag = document.querySelector("#upass1Tag"); var upass2Obj = document.querySelector("#password2"); var upass2Tag = document.querySelector("#upass2Tag"); // 獲取具體值 var uname = unameObj.value; var unameTag = document.querySelector("#unameTag"); if (uname.length == 0 || uname=="" || uname.length < 3) { unameTag.innerHTML = "請輸入用戶名,長度不小於3位."; upass1Tag.innerHTML = ""; upass2Tag.innerHTML = ""; upass1Obj.value = ""; upass2Obj.value = ""; return false; } else { unameTag.innerHTML = "用戶名可用."; return true; } } // ///*[[用戶密碼的判定 重復密碼是否相同,長短等]] // 用戶密碼1 Focus時 function upass1Focus() { // 獲取document對象 var upass1Obj = document.querySelector("#password"); var upass1Tag = document.querySelector("#upass1Tag"); // 獲取具體值 (第一種方式) // var upass1 = upass1Obj.value; // 另一種獲取value的方式: √ var upass1 = document.formReg.password.value; // 判定是否滿足密碼的格式條件 if (upass1.length == 0 || upass1=="") { upass1Tag.innerHTML = "輸入密碼,密碼長度不小於6位,兩次密碼需輸入一致,且不能有非法字符如%,*,#"; return false; } } // 用戶密碼1 Blur時 function upass1Blur() { // 獲取document對象 var upass1Obj = document.querySelector("#password"); var upass1Tag = document.querySelector("#upass1Tag"); // 獲取具體值 var upass1 = upass1Obj.value; // 判定是否滿足密碼的格式條件 if (upass1.length == 0 || upass1=="" || upass1.length < 6) { upass1Tag.innerHTML = "輸入密碼,密碼長度不小於6位.謝謝合作??"; return false; } else { upass1Tag.innerHTML = "密碼1格式正確.請輸入密碼2." // 使得密碼2的input獲得焦點 /* formReg.password2.focus(); */ // 格式正確的話返回password1密碼 return upass1; } } // ///* [[用戶密碼2判定]] // 用戶密碼2 Focus時 function upass2Focus() { // 獲取document對象 var upass2Obj = document.querySelector("#password2"); var upass2Tag = document.querySelector("#upass2Tag"); // 獲取具體值 var upass2 = upass2Obj.value; // 判定是否滿足密碼的格式條件 if (upass2.length == 0 || upass2=="") { upass2Tag.innerHTML = "重復輸入密碼,密碼長度不小於6位,兩次密碼需輸入一致,且不能有非法字符如%,*,#"; return false; } } // 用戶密碼2 Blur時 function upass2Blur() { // 獲取document對象 var upass2Obj = document.querySelector("#password2"); var upass2Tag = document.querySelector("#upass2Tag"); // 獲取具體值 var upass2 = upass2Obj.value; // 判定是否滿足密碼2格式條件,兩次密碼需要一致 if (upass2.length == 0 || upass2=="" ||upass2.length < 6) { /* upass2Tag.innerHTML = "重復輸入密碼,密碼長度不小於6位,兩次密碼需輸入一致,且不能有非法字符如%,*,#"; */ return false; } else { // 格式正確的話返回password2密碼 return upass2; } } /////* 密碼1,密碼2輸入框失去焦點時執行該方法, function testPassword() { //如果當密碼判定兩個密碼相同時,返回true if ("".passwordJudger(upass1Blur(), upass2Blur())) { console.log("password OK"); return true; }else{ return false; } } // ///* 密碼格式正確後,判定兩次密碼是否相等 String.prototype.passwordJudger = function(upass1, upass2) { console.log("in judger."); // ///* 如果密碼一樣且格式正確 就判定正確返回 true if ((upass1 == upass2) && upass1 != false && upass2 != false) { upass1Tag.innerHTML = ""; upass2Tag.innerHTML = "密碼格式正確!且兩次輸入一致!??"; upass2Tag.style.color = "green"; return true; } // ///* 如果密碼1格式又錯誤了,那麽提示重新輸入密碼1,並清空密碼2 返回 false else if (upass1 == false) { upass1Tag.innerHTML = "輸入密碼,密碼長度不小於6位.謝謝合作??"; upass2Tag.innerHTML = ""; upass1Tag.style.color = "red"; upass2Tag.style.color = "red"; console.log("wrong pass1"); // *如果密碼1格式不正確了,則密碼2中密碼清空 document.querySelector("#password2").value = ""; return false; } // ///* 如果兩次密碼不匹配,則返回不一致,並返回false else { upass1Tag.innerHTML = ""; upass2Tag.innerHTML = "兩次密碼輸入不一致."; upass2Tag.style.color = "red"; console.log("wrong pass2"); // *如果密碼1/2格式不正確了或不同了,則密碼2中密碼清空 這樣的話不太友好,所以去掉 /* document.querySelector("#password2").value=""; */ return false; } } // [***judger old method***] // else if(!upass1Blur()){ // upass1Tag.innerHTML = "輸入密碼1,密碼長度不小於6位.謝謝合作??"; /* upass1Tag.style.color = "red"; */ // return false; // }else if(!pass2Blur()){ // upass2Tag.innerHTML = "輸入密碼2,密碼長度不小於6位.謝謝合作??"; /* upass2Tag.style.color = "red"; */ // return false; // } function submitFunc() { //如果密碼重復正確和用戶名判定正確 if (unameBlur() && testPassword()) { return true; } else { return false; } //還未判定年齡手機號等. }
總體上使用了一個新學的方法有點累贅了, --> String.prototype.passwordJudger = function(upass1, upass2) {..
其實換成普通方法也是一樣的
然後今天看視頻其實在input字段中可以省略其ID和name,並使用類似 onblur="passBlur(this.value)" 的形式獲取 密碼的input的value的值,從而在js中使用 passBlur(password){ password.length....等其他判定}
但是這種方法在使用上面我的這種寫法時會產生錯誤,因為上面的寫法是在最後submitFunc時還要進行判定,那麽那個this.value就已經消失了.
---
下面是趨向正常的返回判定
---
而對於正則表達式還沒有加入,感覺這種東西是純屬搬入性質的.
而這個判定中也是沒有AJAX進行用戶名是否存在判定的.
下面的連接是之前學的使用Ajax進行字段查找及web頁面局部刷新.
http://www.ykmimi.com/Ajax/ajax_0.html
上面這個ajax做的時候,使用了簡單的布局沒有進行service和dao的分層,以及JDBC使用的是一個mariadb數據庫,現在不用了.
應該再集合起來做一次.
JS判定註冊表單的幾個方式 及 Ajax進行用戶名存在判定