表单事件 验证码判断

 <form action="./01_复习.html" method="GET">

        账号: <input type="text"><span name="1"></span><br>

        密码: <input type="password"><span name="2"></span><br>

        <button>提交</button>

    </form>

    <script>

        // 表单事件,都是与form表单相关的事件

        // 多用于提交标签的验证判断

        // 1,要组织默认事件的执行

        // 例如 : 点击button按钮就会执行提交表单事件,需要阻止这个默认事件

        //        点击鼠标右键,弹出的内容,也是默认事件,也可以阻止

        // 阻止鼠标右键事件

       document.oncontextmenu = function(e){

            // 事件对象的兼容

            e = e || window.event

            // 阻止右键单击,默认事件的执行,没有不会弹出默认的右键菜单

            if(e.preventDefault){

                // 普通浏览器,阻止默认事件的方式

                e.preventDefault()

            }else{

                // 低版本IE浏览器阻止默认事件方式

                e.returnValue = false;

            }

        

            console.log(123);

       } 

        // 表单事件1: submit 表单提交事件

        //           submit 提交事件的事件对象,必须是,只能是,一定要是 form表单

        var oFrom = document.querySelector('form');

        oFrom.onsubmit = function(e){

            // 兼容事件对象

            e = e || window.event;

            // 阻止默认事件的执行

            if(e.preventDefault){

                // 普通浏览器,阻止默认事件的方式

                e.preventDefault()

            }else{

                // 低版本IE浏览器阻止默认事件方式

                e.returnValue = false;

            }

            // 执行验证判断,如果验证通过,会执行ajax传参

            // 前端只能验证,数据是否符合,语法规范

            // 不能验证账号,密码是否正确,要验证,必须要通过服务器和数据库进行操作

            // 目前就简单的验证一下

            // 账号密码的长度都必须在 8-16 位之间

            // 获取标签的数据,可以通过

            // 标签对象.value 来获取标签的数据或者设定标签的数据

            // 获取到的数据,是字符串形式

            // 通常情况下,验证判断输入内容是否符合规范,不需要转化为数值类型

            // 字符串验证判断更方便

            // 可以通过不同的type属性和属性值来获取标签对象

            // var oIpt1 = document.querySelector('[type="text"]');

            // var oIpt2 = document.querySelector('[type="password"]');

            // console.log(oIpt1,oIpt2);

            // 也可以通过标签名称,获取标签对象的伪数组,通过索引下标,获取具体的标签

            // document.querySelectorAll('input') 所有input的伪数组

            // document.querySelectorAll('input')[0] 通过索引下标,获取具体的一个标签对象

            // document.querySelectorAll('input')[0].value 或者这一个标签对象的value属性值,也就是数据数值

            var oIpt1 = document.querySelectorAll('input')[0].value;

            var oIpt2 = document.querySelectorAll('input')[1].value;

            console.log(oIpt1,oIpt2);

            // 获取两个span标签,准备写入提示信息

            var oSpan1 = document.querySelectorAll('span')[0];

            var oSpan2 = document.querySelectorAll('span')[1];

            // 获取字符串数据后,可以根据字符串的length属性判断长度

            // 账号长度在 8-16位之间,密码长度在 8-16位之间,允许提交

            // 否则,不允许提交,弹出报错信息

            

            // 验证判断账号

            if(oIpt1.length >= 8 &&  oIpt1.length <= 16){

                // 账号符合规范

                // 给账号之后的span,内容清空

                oSpan1.innerHTML = '';

            }else{

                // 账号不符合规范

                // 给账号之后的span,添加内容

                oSpan1.innerHTML = '<em style="color:red">账号不符合规范<em>';

            }

            // 验证判断密码

            if(oIpt2.length >= 8 &&  oIpt2.length <= 16){

                // 密码符合规范

                // 给密码之后的span,内容清空

                oSpan2.innerHTML = '';

            }else{

                // 密码不符合规范

                // 给密码之后的span,添加内容

                oSpan2.innerHTML = '<em style="color:red">密码不符合规范<em>';

            }

 

 

 <form action="./01_复习.html">

        验证码: <input type="text"> <span></span><br>

        <h1></h1>

        <button>提交</button>

    

    </form>

    <script src="./tools.js"></script>

    <script>

        // 1,获取标签对象

        // 此时只获取标签对象,不要获取标签数据

        // 页面初始状态,标签中没有输入数据

        var oFrom = document.querySelector('form');

        var oIpt = document.querySelector('input');

        var oSpan = document.querySelector('span');

        var oH1 = document.querySelector('h1');

        // 2,通过随机验证码函数,将验证码字符串写入到标签中

        // 看不清楚换一张的效果

        

        // 页面起始,先给span标签写入一个验证码

        oSpan.innerHTML  = mySetVc();

        // 点击span标签,给span标签重新吸入新的验证码

        oSpan.addEventListener('click' , function(){

            // 重新调用随机字符串函数,生成新的随机字符串,写入到标签中

            oSpan.innerHTML  = mySetVc();

        })

        oFrom.onsubmit = function(e){

            // 1,兼容事件对象

            e = e || window.event;

            // 2,阻止默认事件执行

            // 阻止默认事件的执行

            if(e.preventDefault){

                // 普通浏览器,阻止默认事件的方式

                e.preventDefault()

            }else{

                // 低版本IE浏览器阻止默认事件方式

                e.returnValue = false;

            }

            // 3,判断验证码输入是否正确

            // 获取写入到标签中的验证码内容

            var vc = oSpan.innerHTML;

            // 获取input中输入的数据

            var oIptVal = oIpt.value;

            // 如果区分大小写,没需要其他操作,直接比较数据是否相等

            // 如果不区分大小写,需要大小写统一

            if( vc.toLowerCase() === oIptVal.toLowerCase() ){

                oH1.innerHTML = '';

                console.log('验证码输入正确');

            }else{

                oH1.innerHTML = '<em style="color:red">验证码输入错误</em>';

            }

        }

 

// 生成验证码函数

function mySetVc(){

    var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXUZ';

    var newStr = '';    

    for(var i = 1 ; i <= 6 ; i++){

        var num = parseInt( Math.random()*str.length )

        if(newStr.indexOf(str[num]) === -1){

            newStr += str[num];

        }else{

            i--;

        }

    }

    return newStr;

}