JS判定注册表单的几个方式 及 Ajax进行用户名存在判定

最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区".

有个表单,简单点.

<!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数据库,现在不用了.

应该再集合起来做一次.

 

posted @ 2018-07-28 23:15  ukyo--BlackJesus  阅读(476)  评论(0)  编辑  收藏  举报