前端之表单验证

一、简概

因为，前端经常涉及到表单验证，故此篇博客用于记录前端JS对表单验证的方法。

通过表单验证，当对form表单提交时，可以防止不合法的数据传递至后台(以及判空操作)。这里我们先定义一个表单，作为示例，其它的情况都可以此类推。

前端表单代码

<div>
    <form method="get" action="https://www.baidu.com" id="form">
        <table align="center" style="margin: 0 auto;">
            <tr>
                <td><label>用户名</label></td>
                <td><input type="text" name="username" placeholder="请输入用户名" style="width: 150px" id="username"></td>
            </tr>
            <tr>
                <td><label>邮箱</label></td>
                <td><input type="email" name="email" placeholder="请输入邮箱" style="width: 150px" id="email"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td align="left">
                    <input type="radio" name="male" value="male" checked>男
                    <input type="radio" name