js校验表单中数据格式及数字类型

最新推荐文章于 2022-10-25 13:07:34 发布

最新推荐文章于 2022-10-25 13:07:34 发布 · 211 阅读

文章标签：

#Mobile #JavaScript #ViewUI

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个简单的表单验证脚本，该脚本用于验证用户的输入是否符合要求，包括电话号码和手机号码的有效性检查。通过对输入长度和字符类型的验证确保了数据的准确性。

<script type="text/javascript">   
    function isNumberInt(form){   
        var rtnBoolean = false;   
           
        var phoneParam = form.phone.value;   
        var mobileParam = form.mobile.value;   
           
        var enterPhone1 = "请输入联系电话!";   
        var enterPhone2 = "请输入真实的联系电话!";   
        var numberPhone = "联系电话,请输入数字!";   
        rtnBoolean = validLength(phoneParam,1,7,enterPhone1,enterPhone2);   
        if(rtnBoolean == false){   
            return rtnBoolean;   
        }   
           
        rtnBoolean = validNumber(phoneParam,numberPhone);   
        if(rtnBoolean == false){   
            return rtnBoolean;   
        }   
           
           
        var enterMobile1 = "请输入手机号码!";   
        var enterMobile2 = "请输入真实的手机号码!";   
        var numberMobile = "手机号码,请输入数字!";   
           
        rtnBoolean = validLength(mobileParam,1,11,enterMobile1,enterMobile2);   
        if(rtnBoolean == false){   
            return rtnBoolean;   
        }   
           
        rtnBoolean = validNumber(mobileParam,numberMobile);   
        if(rtnBoolean == false){   
            return rtnBoolean;   
        }   
           
        return true;   
    }   
  
    function validLength(param,minLength,stdLength,alertParam1,alertParam2){   
        if(param.length < minLength){   
            alert(alertParam1);   
            return false;   
        }   
           
        if(param.length < stdLength){   
            alert(alertParam2);   
            return false;   
        }   
    }   
       
    function validNumber(param,numberPhone){   
        for (i = 0;i < param.length;i++){   
            ch = param.charAt(i);   
            if(ch<'0'||ch>'9'){   
                alert(numberPhone);   
                    return false;   
            }   
        }      
    }   
  
</script>

<form name="msgForm" action="提交的路径" method=post>  
                <table class="word">                      
                    <tr>    
                      <td height="25"><div align="right">标题：</div></td>  
                      <td colspan="2"><input name="headline" type="text" size="40"> <font color="#FF0000">  
                        *</font></td>  
                    </tr>                       
                    <tr>    
                      <td height="25"><div align="right">用户名：</div></td>  
                      <td colspan="2"><input name="userName" type="text"> <font color="#FF0000">    
                        *</font></td>  
                    </tr>                       
                    <tr>    
                      <td height="25"><div align="right">公司名：</div></td>  
                      <td colspan="2"><input name="companyName" type="text" size="40"> <font color="#FF0000">    
                        *</font></td>  
                    </tr>                       
                    <tr>    
                      <td height="25"><div align="right">联系电话：</div></td>  
                      <td colspan="2"><input name="phone" type="text"></td>  
                    </tr>                       
                    <tr>    
                      <td height="25"><div align="right">手机：</div></td>  
                      <td colspan="2"><input name="mobile" type="text"></td>  
                    </tr>  
                    <tr>    
                      <td height="25"><div align="right">电子邮件</div></td>  
                      <td colspan="2"><input type="text" name="email"></td>  
                    </tr>  
                    <tr>    
                      <td height="25"><div align="right">邮政编码：</div></td>  
                      <td colspan="2"><input type="text" name="textfield5"></td>  
                    </tr>                       
                    <tr>    
                      <td height="25"><div align="right">留言内容：</div></td>  
                      <td colspan="2">  
                        <textarea name="msgContent" cols="40" rows="10"></textarea>  
                      </td>  
                    </tr>  
                    <tr>    
                      <td> </td>  
                      <td width="9%">  
                        <input type="submit" name="submit" value="提交" onclick="return isNumberInt(msgForm);">  
                      </td>  
                      <td width="66%"><input type="reset" name="reset" value="重置"></td>  
                    </tr>  
                </table>                     
</form>