最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区".
有个表单,简单点.
<!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"> <!-- [错误方式->]οnchange="unameChange()"--> <!-- 传参this.value --> 用户名:<input type="text" name="username" id="username" onfocus="unameFocus(this.value)" onblur="unameBlur(this.value)" /><span id="unameTag"></span> <br /> <!-- οnfοcus="upass1Focus()" --> 密码:<input type="password" name="password" id="password" onfocus="upass1Focus()" onblur="testPassword()" /><span id="upass1Tag"></span> <br /> <!-- οnfοcus="upass2Focus()" --> 重复密码:<input type="password" name="password2" id="password2" onfocus="upass2Focus()" onblur="testPassword()" /> <!-- οnchange="upass2Blur()" --> <span id="upass2Tag"></span> <br /> <!-- 年龄:<input type="text" name="age" id="age" οnfοcus="uageFocus()" οnblur="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,并使用类似 οnblur="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数据库,现在不用了.
应该再集合起来做一次.
将编程看作是一门艺术,而不单单是个技术。 敲打的英文字符是我的黑白琴键, 思维图纸画出的是我编写的五线谱。 当美妙的华章响起,现实通往二进制的大门即将被打开。