验证信息添加到表格中

<!DOCTYPE html>
<html>
    <head>
        <!--
            作者：1102780712@qq.com
            时间：2017-08-07
            
            思路分析：当我点击添加的时候，第一步先验证，验证通过后，才通过操作dom将数据添加到table表格中展示
            1.先完成js验证
            2.通过dom给table中添加我们输入的数据
        -->
        
        <script type="text/javascript">
            function add(){
                clearSpan();
                //给定一个标识符
                var flag = true;
                //获取名称中的值，判断是否为空
                var nameValue = document.getElementById("iname").value;
                var priceValue = document.getElementById("iprice").value;
                var countValue = document.getElementById("icount").value;
                
                //判断名称是否为空
                if(nameValue == null || nameValue.trim()== "" ){
                    flag = false;//如果验证失败，第一：flag 设置为false 第二给span中给提示
                    document.getElementById("sname").innerHTML = "<font color='red'>不能为空</font>";
                }
                
                //价格在30-60
                if(!(priceValue >= 30 && priceValue <=60)){
                    flag = false;//如果验证失败，第一：flag 设置为false 第二给span中给提示
                    document.getElementById("sprice").innerHTML = "<font color='red'>价格必须在30-60之间</font>";
                }
                
                //场次不能为空
                if(countValue == null || countValue.trim()== ""  ){
                    flag = false;//如果验证失败，第一：flag 设置为false 第二给span中给提示
                    document.getElementById("scount").innerHTML = "<font color='red'>场次不能为空</font>";
                }
                
                /*
                  思路：
                  我们调用add方法会返回一个boolean值，如果是true，则通过验证，
                  如果是false则没有通过验证；  通过验证的我们在table中才添加，不通过验证，我们不做任何事情，他本身有红色的错误提示
             */
                if(flag){
                //1.创建tr
                var tr = document.createElement("tr");
                //2.创建4个td
                var td1 = document.createElement("td");
                td1.innerHTML= document.getElementById("iname").value;
                var td2 = document.createElement("td");
                td2.innerHTML= document.getElementById("iprice").value;
                var td3 = document.createElement("td");
                td3.innerHTML= document.getElementById("icount").value;
                var td4 = document.createElement("td");
                var date = new Date();
                td4.innerHTML= date.toLocaleString();
                
                //把td放到父节点tr中
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
                
                //tr放到父节点table中
                document.getElementById("tab").appendChild(tr);
            }
            }
            
            //清除span标签里面的数据
            function clearSpan(){
                    var arr = document.getElementsByTagName("span");
                    for(var i = 0; i < arr.length; i++){
                        arr[i].innerHTML = "";
                    }
                }
            
            
            
            
            
        </script>
    </head>
    <body>
        <table align="center" >
            <tr>
                <td>
                    名称：<input type="text" id="iname" name="uname" />
                    <span id="sname" ></span>
                </td>
            </tr>
            <tr>
                <td>
                    价格：<input type="text" id="iprice" name="uprice" />
                    <span id="sprice"></span>
                </td>
            </tr>
            <tr>
                <td>
                场次：<input type="text" id="icount" name="ucount" />
                <span id="scount"></span>
                </td>
                
            </tr>
            <tr align="center">
                <td colspan="2">
                <input type="button" value="添加" onclick="add()"  />
                </td>
            </tr>
            
        </table >
        
        <hr width="35%"/>
        <table align="center" width="30%" cellspacing="0" border="1px" id="tab">
            <tr>
                <th>名称</th>
                <th>价格</th>
                <th>场次</th>
                <th>日期</th>
            </tr>
        </table>
        
    </body>
</html>