最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区".
有个表单,简单点.
<!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数据库,现在不用了.
应该再集合起来做一次.
原文地址：https://www.cnblogs.com/ukzq/p/9383845.html
时间： 2024-11-06 23:24:44