关于表单效验的bug（this）

昨天晚上扣了一个小时硬是没找到写的表单效验哪里出了问题，晚上睡了一觉，重新审视的时候发现了问题。

一，问题js代码如下

用户名效验

// 用户名效验
    function checkUsername(){
        var re_str=/^\w{6,12}$/
        var flag=re_str.test(this.value)
        if(flag){
            document.getElementById("username_").innerText="正确"
        }else{
            document.getElementById("username_").innerText="错误"
        }
        return flag
    }

密码效验

// 密码效验
    function checkPassword(){
        var re_str=/^\w{6,12}$/
        var flag=re_str.test(this.value)
        if(flag){
            document.getElementById("password_").innerText="正确"
        }else{
            document.getElementById("password_").innerText="错误"
        }
        return flag

    }

表单效验

// 表单效验
        document.getElementsByTagName("form")[0].onsubmit=function (){
            // alert("用户名效验"+checkUsername())
            // alert("密码效验"+checkPassword())
            return checkUsername() && checkPassword();
        }

在测试过程中用户名效验，密码效验都没问题，一到表单的提交就不管什么返回的永远是true，不管用户名密码填写的什么都给我提交上去，不停地使用alert（）打断点还是找不到

二，问题发现

在用户名与密码效验的代码中使用了this.value去获取用户名与密码输入框返回过来的值，这个this是谁调用他就返回谁的value，但是在表单效验的时候，是表单这个节点调用了用户名与密码效验的方法，所以这个this代表的不是用户名也不是密码，而是表单，所以因为this让我头疼了半天，开始改代码。

三，思路

使用dom的get方法代替this进行定位

四，修改后的代码

表单效验不变

用户名效验

  // 用户名效验
    function checkUsername(){
        var re_str=/^\w{6,12}$/
        var un=document.getElementsByName("username")[0].value
        var flag=re_str.test(un)
        if(flag){
            document.getElementById("username_").innerText="正确"
        }else{
            document.getElementById("username_").innerText="错误"
        }
        return flag
    }

密码效验

// 密码效验
    function checkPassword(){
        var re_str=/^\w{6,12}$/
        var pw=document.getElementsByName("password")[0].value
        var flag=re_str.test(pw)
        if(flag){
            document.getElementById("password_").innerText="正确"
        }else{
            document.getElementById("password_").innerText="错误"
        }
        return flag

    }

完成

这下用户名与密码输入不符合规则就不会提交了