最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区".
有个表单,简单点.
<!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进行用户名存在判定
原文地址：https://www.cnblogs.com/ukzq/p/9383845.html