js知识整理(十)---表单的验证

1.表单的验证逻辑:

(1). 验证通过才可以提交数据 否则不能提交数据
(2) 验证要求:
用户长度必须是 5-10 字符
密码的长度也是 5-10 字符

2.思路:

(1) 在表单中 添加 onsubmit() 事件
(2)在 onsubmit中进行逻辑处理

 <form method="GET" action="/demo01" onsubmit="return checkName()">
    
        用户名:<input id="nameId" type="text" name="name"/><span id="msgSpan"></span><br>
        密码:<input type="text" name="pwd"/><br>   
        <input type="submit">

    </form>

    <script>
        function checkName(){
            //1. 拿到 input 标签
            var inutNode = document.getElementById('nameId'); 
            var spanNode = document.getElementById('msgSpan');
            // 2. 拿到 输入框输入的内容 
           var name = inutNode.value;
            // 3. 判断 输入的内容
            if(name.length > 5 && name.length < 10) {
                 return true;  // 可以提交数据 
            }else{
                // 创建节点  添加进去也可以 
                spanNode.innerText = '输入非法';
                spanNode.style.color = "red";

                return false;  // 不能提交数据 
            }
            // 4. 返回结果 
        }
    </script>

3.存在的问题分析

(1)这个表单验证 只能验证 输入的字符串的长度 (验证不科学 正则表达式)
(2)验证有多个 邮箱验证,手机验证 等等 (封装成方法吗 封装验证方法)

4.用正则改进

** 表单的验证:
实现思路:
(1). 给input 标签添加 onblur 事件
(2). 拿到input 标签输入的内容
(3). 判断是否输入合法
(4). dom 操作修改 页面提示信息

    <script>

        function checkName(){
            var inputNode = document.getElementById("nameId");

            var spanNode = document.getElementById("msg");

            // 通过value 属性拿到内容
            var name = inputNode.value;

            // 判断是否合法
            // 正则 2 -10 个汉字 
            var reg = /^[\u4e00-\u9fa5]{2,10}$/; 

            if(reg.test(name)){
                //dom 操作修改 页面提示信息 
                spanNode.innerText = '输入合格';
                spanNode.style.color = "green";
            }else{
                spanNode.innerText = '输入不合格';
                spanNode.style.color = "red";
            }
        }

    </script>

5.验证方法的封装

表单验证:
1. 如果三个验证有一个失败 不能提交数据
2. 验证的时候需要有错误信息提示
3. 思路
(1). 添加onsubmit 方法(在表单提交数据前执行的 事件)
(2) 验证的时候 用户密码邮箱等存在重复的代码 可以进行封装

    <form method="get" action="/demo01" onsubmit="return checkForm()">
        
        用户名:<input id="nameId" type="text" name="name"/><span id="msgName"></span><br>
        密码:<input id="pwdId" type="password" name="name"/><span id="msgPwd"></span><br>
        邮箱:<input id="emailId" type="text" name="email"><span id="msgEmail"></span><br>
        <input type="submit"/>
    </form>

封装表单的验证

     * 封装:
       1. 把不确定的数据通过参数传入进来 
       2. 返回一个boolean 判断是否 验证成功 
     *

        function checkInput(objId,msgId,reg,successMsg,errMsg){
            var inputNode = document.getElementById(objId);

            var spanNode = document.getElementById(msgId);

            // 通过value 属性拿到内容
            var msg = inputNode.value;

            // 判断是否合法

            if(reg.test(msg)){
                //dom 操作修改 页面提示信息 
                spanNode.innerText = successMsg;
                spanNode.style.color = "green";

                return true;
            }else{
                spanNode.innerText = errMsg;
                spanNode.style.color = "red";

                return false;
            }
        }

    function checkForm(){

            // 验证 用户名 
              // 正则 2 -10 个汉字 
            var reg1 = /^[\u4e00-\u9fa5]{2,10}$/; 
            var nameFlag = checkInput("nameId","msgName",reg1,"输入合格","必须是汉字");

            // 验证密码
            // 6个数字的密码 
            // \d{6} 
            var reg2 = /^\d{6}$/; 
            var pwdFlag = checkInput("pwdId","msgPwd",reg2,"输入密码格式正确","密码格式不对");


            // 验证 邮箱 
            var reg3 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

            var emailFlag = checkInput("emailId","msgEmail",reg3,"输入邮箱格式正确","邮箱格式不对");

            // 不要提交数据 
            console.log(nameFlag);
            console.log(pwdFlag);
            console.log(emailFlag);

            // 提交数据 
            // 3个必须都是 为true 才可以 提交数据 

            return nameFlag && pwdFlag && emailFlag;

        }