js验证网址等Javascript常见验证代码合集

最新推荐文章于 2024-04-21 21:36:13 发布

weixin_30411239

最新推荐文章于 2024-04-21 21:36:13 发布

阅读量346

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lpw94/p/4864679.html

版权

发一个利用js验证网址是否正确，email格式是否正确，是否为数字及数字的范围，密码或字符长度及是否相等及要求的最小字符串长度，输入是否为空等Javascript常见验证代码合集，用的上的朋友可以拿去了自行添加整理。

关键的JavaScript代码函数：

 
    001/**
 
    002* 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息.
 
    003*
 
    004* @author www.phpernote.com
 
    005* @version 1.0
 
    006* @description 2012-05-16
 
    007*/
 
    008var checkData=new function(){
 
    009var idExt="_phpernote_Span";//生成span层的id后缀
 
    010/**
 
    011* 得到中英文字符长(中文为2个字符)
 
    012*
 
    013* @param {}
 
    014* str
 
    015* @return 字符长
 
    016*/
 
    017this.length=function(str){
 
    018    var p1=new RegExp('%u..', 'g');
 
    019    var p2=new RegExp('%.', 'g');
 
    020    return escape(str).replace(p1, '').replace(p2, '').length;
 
    021}
 
    022/**
 
    023* 删除对应id元素
 
    024*/
 
    025this.remove=function(id){
 
    026    var idObject=document.getElementById(id);
 
    027    if(idObject != null)
 
    028    idObject.parentNode.removeChild(idObject);
 
    029}
 
    030/**
 
    031* 在对应id后面错误信息
 
    032*
 
    033* @param id:需要显示错误信息的id元素
 
    034* str:显示错误信息
 
    035*/
 
    036this.appendError=function(id, str){
 
    037    this.remove(id + idExt);// 如果span元素存在，则先删除此元素
 
    038    var spanNew=document.createElement("span");// 创建span
 
    039    spanNew.id=id + idExt;// 生成spanid
 
    040    spanNew.style.color="red";
 
    041    spanNew.appendChild(document.createTextNode(str));// 给span添加内容
 
    042    var inputId=document.getElementById(id);
 
    043    inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span
 
    044}
 
    045/**
 
    046* @description 过滤所有空格字符。
 
    047* @param str:需要去掉空间的原始字符串
 
    048* @return 返回已经去掉空格的字符串
 
    049*/
 
    050this.trimSpace=function(str){
 
    051    str+='';
 
    052    while ((str.charAt(0) == ' ') || (str.charAt(0) == '???') || (escape(str.charAt(0)) == '%u3000'))
 
    053    str=str.substring(1, str.length);
 
    054    while ((str.charAt(str.length - 1) == ' ') || (str.charAt(str.length - 1) == '???') || (escape(str.charAt(str.length - 1)) == '%u3000'))
 
    055    str=str.substring(0, str.length - 1);
 
    056    return str;
 
    057}
 
    058/**
 
    059* 过滤字符串开始部分的空格\字符串结束部分的空格\将文字中间多个相连的空格变为一个空格
 
    060*
 
    061* @param {Object}
 
    062* inputString
 
    063*/
 
    064this.trim=function(inputString){
 
    065    if(typeof inputString != "string"){
 
    066        return inputString;
 
    067    }
 
    068    var retValue=inputString;
 
    069    var ch=retValue.substring(0, 1);
 
    070    while (ch == " "){
 
    071        // 检查字符串开始部分的空格
 
    072        retValue=retValue.substring(1, retValue.length);
 
    073        ch=retValue.substring(0, 1);
 
    074    }
 
    075    ch=retValue.substring(retValue.length - 1, retValue.length);
 
    076    while (ch == " "){
 
    077        // 检查字符串结束部分的空格
 
    078        retValue=retValue.substring(0, retValue.length - 1);
 
    079        ch=retValue.substring(retValue.length - 1, retValue.length);
 
    080    }
 
    081    while (retValue.indexOf(" ") != -1){
 
    082        // 将文字中间多个相连的空格变为一个空格
 
    083        retValue=retValue.substring(0, retValue.indexOf(" ")) + retValue.substring(retValue.indexOf(" ") + 1, retValue.length);
 
    084    }
 
    085    return retValue;
 
    086}
 
    087/**
 
    088* 过滤字符串,指定过滤内容，如果内容为空，则默认过滤 '~!@#$%^&*()-+."
 
    089*
 
    090* @param {Object}
 
    091* str
 
    092* @param {Object}
 
    093* filterStr
 
    094*
 
    095* @return 包含过滤内容，返回True,否则返回false;
 
    096*/
 
    097this.filterStr=function(str, filterString){
 
    098    filterString=filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString;
 
    099    var ch;
 
    100    var i;
 
    101    var temp;
 
    102    var error=false;// 当包含非法字符时，返回True
 
    103    for (i=0;i <= (filterString.length - 1);i++){
 
    104        ch=filterString.charAt(i);
 
    105        temp=str.indexOf(ch);
 
    106        if(temp != -1){
 
    107            error=true;
 
    108            break;
 
    109        }
 
    110    }
 
    111    return error;
 
    112}
 
    113this.filterStrSpan=function(id, filterString){
 
    114    filterString=filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString;
 
    115    var val=document.getElementById(id);
 
    116    if(this.filterStr(val.value, filterString)){
 
    117        val.select();
 
    118        var str="不能包含非法字符" + filterString;
 
    119        this.appendError(id, str);
 
    120        return false;
 
    121    }else{
 
    122        this.remove(id + idExt);
 
    123        return true;
 
    124    }
 
    125}
 
    126/**
 
    127* 检查是否为网址
 
    128*
 
    129* @param {}
 
    130* str_url
 
    131* @return {Boolean}true：是网址，false:<b>不是</b>网址;
 
    132*/
 
    133this.isURL=function(str_url) {// 验证url
 
    134    var strRegex="^((https|http|ftp|rtsp|mms)?://)"
 
    135    + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
 
    136    + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
 
    137    + "|" // 允许IP和DOMAIN（域名）
 
    138    + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
 
    139    + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
 
    140    + "[a-z]{2,6})" // first level domain- .com or .museum
 
    141    + "(:[0-9]{1,4})?" // 端口- :80
 
    142    + "((/?)|" // a slash isn't required if there is no file name
 
    143    + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
 
    144    var re=new RegExp(strRegex);
 
    145    return re.test(str_url);
 
    146}
 
    147this.isURLSpan=function(id){
 
    148    var val=document.getElementById(id);
 
    149    if(!this.isURL(val.value)){
 
    150        val.select();
 
    151        var str="链接不符合格式;";
 
    152        this.appendError(id, str);
 
    153        return false;
 
    154    }else{
 
    155        this.remove(id + idExt);
 
    156        return true;
 
    157    }
 
    158}
 
    159/**
 
    160* 检查是否为电子邮件
 
    161*
 
    162* @param {}
 
    163* str
 
    164* @return {Boolean}true：电子邮件，false:<b>不是</b>电子邮件;
 
    165*/
 
    166this.isEmail=function(str){
 
    167    var re=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
 
    168    return re.test(str);
 
    169}
 
    170this.isEmailSpan=function(id){
 
    171    var val=document.getElementById(id);
 
    172    if(!this.isEmail(val.value)){
 
    173        val.select();
 
    174        var str="邮件不符合格式;";
 
    175        this.appendError(id, str);
 
    176        return false;
 
    177    }else{
 
    178        this.remove(id + idExt);
 
    179        return true;
 
    180    }
 
    181}
 
    182/**
 
    183* 检查是否为数字
 
    184*
 
    185* @param {}
 
    186* str
 
    187* @return {Boolean}true：数字，false:<b>不是</b>数字;
 
    188*/
 
    189this.isNum=function(str){
 
    190    var re=/^[\d]+$/;
 
    191    return re.test(str);
 
    192}
 
    193this.isNumSpan=function(id){
 
    194    var val=document.getElementById(id);
 
    195    if(!this.isNum(val.value)){
 
    196        val.select();
 
    197        var str="必须是数字;";
 
    198        this.appendError(id, str);
 
    199        return false;
 
    200    }else{
 
    201        this.remove(id + idExt);
 
    202        return true;
 
    203    }
 
    204}
 
    205/**
 
    206* 检查数值是否在给定范围以内,为空,不做检查<br>
 
    207*
 
    208* @param {}
 
    209* str_num
 
    210* @param {}
 
    211* small 应该大于或者等于的数值（此值为空时，只检查不能大于最大值）
 
    212* @param {}
 
    213* big 应该小于或者等于的数值（此值为空时，只检查不能小于最小值）
 
    214*
 
    215* @return {Boolean}<b>小于最小数值或者大于最大数值</b>数字返回false 否则返回true;
 
    216*/
 
    217this.isRangeNum=function(str_num, small, big){
 
    218    if(!this.isNum(str_num)) // 检查是否为数字
 
    219    return false;
 
    220    if(small == "" && big == "")
 
    221    throw str_num + "没有定义最大，最小值数字！";
 
    222    if(small != ""){
 
    223        if(str_num < small)
 
    224        return false;
 
    225    }
 
    226    if(big != ""){
 
    227        if(str_num > big)
 
    228        return false;
 
    229    }
 
    230    return true;
 
    231}
 
    232this.isRangeNumSpan=function(id, small, big){
 
    233    var val=document.getElementById(id);
 
    234    if(!this.isRangeNum(val.value, small, big)){
 
    235        val.select();
 
    236        var str="";
 
    237        if(small != ""){
 
    238            str="应该大于或者等于 " + small;
 
    239        }
 
    240        if(big != ""){
 
    241            str+=" 应该小于或者等于 " + big;
 
    242        }
 
    243        this.appendError(id, str);
 
    244        return false;
 
    245    }else{
 
    246        this.remove(id + idExt);
 
    247        return true;
 
    248    }
 
    249}
 
    250/**
 
    251* 检查是否为合格字符串(不区分大小写)<br>
 
    252* 是由a-z0-9_组成的字符串
 
    253*
 
    254* @param {}
 
    255* str 检查的字符串
 
    256* @param {}
 
    257* idStr 光标定位的字段ID<b>只能接收ID</b>
 
    258* @return {Boolean}<b>不是</b>"a-z0-9_"组成返回false,否则返回true;
 
    259*/
 
    260this.isLicit=function(str){
 
    261    var re=/^[_0-9a-zA-Z]*$/;
 
    262    return re.test(str);
 
    263}
 
    264this.isLicitSpan=function(id){
 
    265    var val=document.getElementById(id);
 
    266    if(!this.isLicit(val.value)){
 
    267        val.select();
 
    268        var str="是由a-z0-9_组成的字符串(不区分大小写);";
 
    269        this.appendError(id, str);
 
    270        return false;
 
    271    }else{
 
    272        this.remove(id + idExt);
 
    273        return true;
 
    274    }
 
    275}
 
    276/**
 
    277* 检查二个字符串是否相等
 
    278*
 
    279* @param {}
 
    280* str1 第一个字符串
 
    281* @param {}
 
    282* str2 第二个字符串
 
    283* @return {Boolean}字符串不相等返回false,否则返回true;
 
    284*/
 
    285this.isEquals=function(str1, str2){
 
    286    return str1 == str2;
 
    287}
 
    288this.isEqualsSpan=function(id, id1){
 
    289    var val=document.getElementById(id);
 
    290    var val1=document.getElementById(id1);
 
    291    if(!this.isEquals(val.value, val1.value)){
 
    292        val.select();
 
    293        var str="二次输入内容必须一样;";
 
    294        this.appendError(id, str);
 
    295        return false;
 
    296    }else{
 
    297        this.remove(id + idExt);
 
    298        return true;
 
    299    }
 
    300}
 
    301/**
 
    302* 检查字符串是否在给定长度范围以内(中文字符以2个字节计算),字符为空,不做检查<br>
 
    303*
 
    304* @param {}
 
    305* str 检查的字符
 
    306* @param {}
 
    307* lessLen 应该大于或者等于的长度
 
    308* @param {}
 
    309* moreLen 应该小于或者等于的长度
 
    310*
 
    311* @return {Boolean}<b>小于最小长度或者大于最大长度</b>数字返回false;
 
    312*/
 
    313this.isRange=function(str, lessLen, moreLen){
 
    314    var strLen=this.length(str);
 
    315    if(lessLen != ""){
 
    316    if(strLen < lessLen)
 
    317        return false;
 
    318    }
 
    319    if(moreLen != ""){
 
    320        if(strLen > moreLen)
 
    321        return false;
 
    322    }
 
    323    if(lessLen == "" && moreLen == "")
 
    324    throw "没有定义最大最小长度!";
 
    325    return true;
 
    326}
 
    327this.isRangeSpan=function(id, lessLen, moreLen){
 
    328    var val=document.getElementById(id);
 
    329    if(!this.isRange(val.value, lessLen, moreLen)){
 
    330        var str="长度";
 
    331        if(lessLen != "")
 
    332            str+="大于或者等于 " + lessLen + ";";
 
    333        if(moreLen != "")
 
    334            str+=" 应该小于或者等于 " + moreLen;
 
    335        val.select();
 
    336        this.appendError(id, str);
 
    337        return false;
 
    338    }else{
 
    339        this.remove(id + idExt);
 
    340        return true;
 
    341    }
 
    342}
 
    343/**
 
    344* 检查字符串是否小于给定长度范围(中文字符以2个字节计算)<br>
 
    345*
 
    346* @param {}
 
    347* str 字符串
 
    348* @param {}
 
    349* lessLen 小于或等于长度
 
    350*
 
    351* @return {Boolean}<b>小于给定长度</b>数字返回false;
 
    352*/
 
    353this.isLess=function(str, lessLen){
 
    354    return this.isRange(str, lessLen, "");
 
    355}
 
    356this.isLessSpan=function(id, lessLen){
 
    357    var val=document.getElementById(id);
 
    358    if(!this.isLess(val.value, lessLen)){
 
    359        var str="长度大于或者等于 " + lessLen;
 
    360        val.select();
 
    361        this.appendError(id, str);
 
    362        return false;
 
    363    }else{
 
    364        this.remove(id + idExt);
 
    365        return true;
 
    366    }
 
    367}
 
    368/**
 
    369* 检查字符串是否大于给定长度范围(中文字符以2个字节计算)<br>
 
    370*
 
    371* @param {}
 
    372* str 字符串
 
    373* @param {}
 
    374* moreLen 小于或等于长度
 
    375*
 
    376* @return {Boolean}<b>大于给定长度</b>数字返回false;
 
    377*/
 
    378this.isMore=function(str, moreLen){
 
    379    return this.isRange(str, '', moreLen);
 
    380}
 
    381this.isMoreSpan=function(id, moreLen){
 
    382    var val=document.getElementById(id);
 
    383    if(!this.isMore(val.value, moreLen)){
 
    384        var str="长度应该小于或者等于 " + moreLen;
 
    385        val.select();
 
    386        this.appendError(id, str);
 
    387        return false;
 
    388    }else{
 
    389        this.remove(id + idExt);
 
    390        return true;
 
    391    }
 
    392}
 
    393/**
 
    394* 检查字符不为空
 
    395*
 
    396* @param {}
 
    397* str
 
    398* @return {Boolean}<b>字符为空</b>返回true,否则为false;
 
    399*/
 
    400this.isEmpty=function(str){
 
    401    return str == '';
 
    402}
 
    403this.isEmptySpan=function(id){
 
    404    var val=document.getElementById(id);
 
    405    if(this.isEmpty(val.value)){
 
    406        var str="不允许为空;";
 
    407        val.select();
 
    408        this.appendError(id, str);
 
    409        return false;
 
    410    }else{
 
    411        this.remove(id + idExt);
 
    412        return true;
 
    413    }
 
    414    }
 
    415}

具体使用方法见下面案例：

 
    01<html>
 
    02<head>
 
    03<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    04<title>js验证网址，js验证email，js验证数字，js验证密码，js验证字符长度及是否相等，js验证数字范围，js验证是否为空等Javascript验证代码合集（www.phpernote.com）</title>
 
    05<script type="text/javascript" src="function.js"></script>
 
    06<script type="text/javascript">
 
    07function checkForm(){
 
    08var isPass = true;
 
    09//过滤字符串
 
    10if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {
 
    11isPass = false;
 
    12}
 
    13//检查url
 
    14if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL')))
 
    15isPass = false;
 
    16//email
 
    17if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail')))
 
    18isPass = false;
 
    19//数字
 
    20if(!(checkData.isNumSpan('isNum')))
 
    21isPass = false;
 
    22//数字大小
 
    23if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))
 
    24isPass = false;
 
    25//密码 (数字,字母,下划线)
 
    26if(!(checkData.isLicitSpan('isLicit')))
 
    27isPass = false;
 
    28//二个字段是否相等
 
    29if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))
 
    30isPass = false;
 
    31//字符长度控制
 
    32if(!(checkData.isRangeSpan('isRange',5,10)))
 
    33isPass = false;
 
    34//字符最短控制
 
    35if(!(checkData.isLessSpan('isLess',10)))
 
    36isPass = false;
 
    37//字符最长控制
 
    38if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30)))
 
    39isPass = false;
 
    40//为空控制
 
    41if(!(checkData.isEmptySpan("isEmpty")))
 
    42isPass = false;
 
    43return isPass;
 
    44}
 
    45</script>
 
    46</head>
 
    47<body>
 
    48<form action="index.jsp" method="post" onsubmit="return checkForm();">
 
    49<table>
 
    50<tbody>
 
    51<tr>
 
    52<td>字符过滤：<input type="text" id="filterStr" name="filterStr"></td>
 
    53<td>链接：<input type="text" id="isURL" name="isURL"></td>
 
    54</tr>
 
    55<tr>
 
    56<td>邮件：<input type="text" id="isEmail" name="isEmail"></td>
 
    57<td>数字：<input type="text" id="isNum" name="isNum"></td>
 
    58</tr>
 
    59<tr>
 
    60<td>数字范围：<input type="text" id="isRangeNum" name="isRangeNum"></td>
 
    61<td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td>
 
    62</tr>
 
    63<tr>
 
    64<td>判断相等：<input type="text" id="isEquals" name="isEquals"></td>
 
    65<td><input type="text" id="isEquals1" name="isEquals1"></td>
 
    66</tr>
 
    67<tr>
 
    68<td>长度控制：<input type="text" id="isRange" name="isRange"></td>
 
    69<td>长度大于控制：<input type="text" id="isLess" name="isLess"></td>
 
    70</tr>
 
    71<tr>
 
    72<td>长度小于控制：<input type="text" id="isMore" name="isMore"></td>
 
    73<td>是否为空：<input type="text" id="isEmpty" name="isEmpty"></td>
 
    74</tr>
 
    75<tr>
 
    76<td><input type="submit" name="submit" value="提交数据"></td>
 
    77</tr>
 
    78</tbody>
 
    79</table>
 
    80</form>
 
    81</body>
 
    82</html>