JS学习笔记之表单的非空校验

一:表单的校验是JS里的必学内容也是很重要的内容，如果使用按钮触发式的校验方式会让用户使用体验极差，导致产品失败。

二：要在用户操作过程中进行校验，下面附上非空校验的几张测试图片

三：具体代码实现如下

html代码：

<div id="tbl" style=" margin:auto; height: 1000px; border: blue 1px solid;position: relative; text-align: center;">

       //实现了表格的垂直水平的块居中
            <table style="margin: auto; padding-top:400px ;">
                <tr>
                    <td>
                        姓名
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="text" name="userName" id="userName" onfocus="of('userName')" onblur="ob()" required="required" />
                        <span id="userNameSpan" style="color: gray; display: none;">
                        </span>
                    </td>
                </tr>

                <tr>
                    <td>
                        年龄
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="text" name="age" id="age" onfocus="of('age')" onblur="ob()" required="required" />
                        <span id="ageSpan" style="color: gray; display: none;">

                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        账号
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="text" name="userNumber" id="userNumber" />
                        <span id="userNumberSpan">

                        </span>
                    </td>
                </tr>
                <tr>
                    <td>
                        密码
                    </td>

                    <td>
                        <span style="color: red;">
                            *
                        </span>
                        <input type="password" name="password" id="password" />
                        <span id="passwordSpan">

                        </span>
                    </td>
                </tr>
</table>
</div>

Js代码

//如果要设置不同的提示信息，也可以通过传参的方式进行实现
function of(id){
                 userNameSpan=document.getElementById(id+"Span");
                 userName=document.getElementById(id);
                if(userName.value==""){
                    userNameSpan.innerHTML="XX不能为空";
                    userNameSpan.style.display="block";
                }
            }
            function ob(){
                if(userName.value!=""){
                    userNameSpan.innerHTML="";
                    userNameSpan.style.display="none";
                }else{
                    userNameSpan.innerHTML="<font color='red'>XX必填</font>"
                }
            }