运用javascript进行表格校验

一、在html文档中创建用户名、密码的输入框：

1. 在html文档的body标签中插入表单标签，设置表单的属性：提交路径设置为当前页面、提交方式为get（这里为了在地址栏中显示提交内容，一般用post方式提交表单）、添加onsubmit属性（属性后面为js代码）。
2. 在表单标签中插入table表格标签，在table中加入tr（行标签）和td（单元格标签），在input标签中设置onblur（失去焦点事件）属性，属性值为js代码，js代码为一个函数的调用，函数在js中定义。
3. 在每个tr标签的最后留出一个span标签，用于提示用户输入格式是否满足要求。

<form action="#" method="get" onsubmit=" return checkedForm();">
        <table>
            <tr>
                <td>账号</td>
                <td><input type="text" name="username" id="username" onblur="blurUser();" placeholder="账号"></td>
                <td><span id="user_span"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" name="password" id="password" onblur="blurPass();" placeholder="密码"></td>
                <td><span id="pass_span"></span></td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>

在网页中的效果如下：

二、在html文档中创建用户名、密码的输入框：

在body结束标签前加入js代码，定义onsubmit（表单提交）事件的具体执行代码，分别定义两个输入框的焦点事件的具体执行代码。定义一个正则表达式，在函数体中判断用户输入内容是否满足正则规则。

<script>
        var user_span = document.getElementById("user_span");
        var pass_span = document.getElementById("pass_span");
        let reg = /^\w{6,12}$/;
        var blurUser = function (){
            var username = document.getElementById("username").value;
            var flag = reg.test(username);
            console.info(flag);
            if(flag){
                user_span.innerHTML = "<font style='color: green; font-size: 10px'><b>账号输入正确</b></font>";
            } else {
                user_span.innerHTML = "<font style='color: red; font-size: 10px'><b>账号输入错误</b></font>";
            }
            return flag;
        };
        var blurPass = function (){
            var password = document.getElementById("password").value;
            var flag = reg.test(password);
            if(flag){
                pass_span.innerHTML = "<font style='color: green; font-size: 10px'><b>密码输入正确</b></font>";
            } else {
                pass_span.innerHTML = "<font style='color: red; font-size: 10px'><b>密码输入错误</b></font>";
            }
            return flag;
        };
        var checkedForm = function(){
            return blurUser()&&blurPass();
        }
    </script>

加上表单校验之后的效果如下：

当用户名和密码不符合要求时后面会提示账号密码输入有误，点击提交按钮无法提交。只有用户名和密码都符合要求时才会提交表单中的内容。