`
wangzi6hao
  • 浏览: 208505 次
  • 性别: Icon_minigender_1
  • 来自: sdf
社区版块
存档分类
最新评论

js数据验证、js email验证、js url验证、js长度验证、js数字验证等

JavaScriptJSP框架Blog 
阅读更多

前段时间写了一个 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 弹出对话框形式的
http://hi.baidu.com/%CD%F5%D7%D36%BA%C5/blog/item/423bd14a45c8542409f7efe9.html
但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式
共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了.

 

/**
* 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息.
*
* @author wangzi6hao
* @version 2.1
* @description 2009-05-16
*/
var checkData = new function() {
    var idExt="_wangzi6hao_Span";//生成span层的id后缀
    /**
    * 得到中英文字符长(中文为2个字符)
    *
    * @param {}
    *            str
    * @return 字符长
    */
    this.length = function(str) {
        var p1 = new RegExp('%u..', 'g')
        var p2 = new RegExp('%.', 'g')
        return escape(str).replace(p1, '').replace(p2, '').length
    }

    /**
    * 删除对应id元素
    */
    this.remove = function(id) {
        var idObject = document.getElementById(id);
        if (idObject != null)
            idObject.parentNode.removeChild(idObject);
    }

    /**
    * 在对应id后面错误信息
    *
    * @param id:需要显示错误信息的id元素
    *            str:显示错误信息
    */
    this.appendError = function(id, str) {
        this.remove(id + idExt);// 如果span元素存在，则先删除此元素
        var spanNew = document.createElement("span");// 创建span
        spanNew.id = id + idExt;// 生成spanid
        spanNew.style.color = "red";
        spanNew.appendChild(document.createTextNode(str));// 给span添加内容
        var inputId = document.getElementById(id);
        inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span
    }

    /**
    * @description 过滤所有空格字符。
    * @param str:需要去掉空间的原始字符串
    * @return 返回已经去掉空格的字符串
    */
    this.trimSpace = function(str) {
        str += "";
        while ((str.charAt(0) == ' ') || (str.charAt(0) == '???')
                || (escape(str.charAt(0)) == '%u3000'))
            str = str.substring(1, str.length);
        while ((str.charAt(str.length - 1) == ' ')
                || (str.charAt(str.length - 1) == '???')
                || (escape(str.charAt(str.length - 1)) == '%u3000'))
            str = str.substring(0, str.length - 1);
        return str;
    }

    /**
    * 过滤字符串开始部分的空格\字符串结束部分的空格\将文字中间多个相连的空格变为一个空格
    *
    * @param {Object}
    *            inputString
    */
    this.trim = function(inputString) {
        if (typeof inputString != "string") {
            return inputString;
        }
        var retValue = inputString;
        var ch = retValue.substring(0, 1);
        while (ch == " ") {
            // 检查字符串开始部分的空格
            retValue = retValue.substring(1, retValue.length);
            ch = retValue.substring(0, 1);
        }
        ch = retValue.substring(retValue.length - 1, retValue.length);
        while (ch == " ") {
            // 检查字符串结束部分的空格
            retValue = retValue.substring(0, retValue.length - 1);
            ch = retValue.substring(retValue.length - 1, retValue.length);
        }
        while (retValue.indexOf(" ") != -1) {
            // 将文字中间多个相连的空格变为一个空格
            retValue = retValue.substring(0, retValue.indexOf(" "))
                    + retValue.substring(retValue.indexOf(" ") + 1,
                            retValue.length);
        }
        return retValue;
    }

    /**
    * 过滤字符串,指定过滤内容，如果内容为空，则默认过滤 '~!@#$%^&*()-+."
    *
    * @param {Object}
    *            str
    * @param {Object}
    *            filterStr
    *
    * @return 包含过滤内容，返回True,否则返回false;
    */
    this.filterStr = function(str, filterString) {
        filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString
        var ch;
        var i;
        var temp;
        var error = false;// 当包含非法字符时，返回True
        for (i = 0; i <= (filterString.length - 1); i++) {
            ch = filterString.charAt(i);
            temp = str.indexOf(ch);
            if (temp != -1) {
                error = true;
                break;
            }
        }
        return error;
    }

    this.filterStrSpan = function(id, filterString) {
        filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString
        var val = document.getElementById(id);
        if (this.filterStr(val.value, filterString)) {
            val.select();
            var str = "不能包含非法字符" + filterString;
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查是否为网址
    *
    * @param {}
    *            str_url
    * @return {Boolean} true：是网址，false:<b>不是</b>网址;
    */
    this.isURL = function(str_url) {// 验证url
        var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
                + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@
                + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
                + "|" // 允许IP和DOMAIN（域名）
                + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
                + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
                + "[a-z]{2,6})" // first level domain- .com or .museum
                + "(:[0-9]{1,4})?" // 端口- :80
                + "((/?)|" // a slash isn't required if there is no file name
                + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
        var re = new RegExp(strRegex);
        return re.test(str_url);
    }

    this.isURLSpan = function(id) {
        var val = document.getElementById(id);
        if (!this.isURL(val.value)) {
            val.select();
            var str = "链接不符合格式;";
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查是否为电子邮件
    *
    * @param {}
    *            str
    * @return {Boolean} true：电子邮件，false:<b>不是</b>电子邮件;
    */
    this.isEmail = function(str) {
        var re = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        return re.test(str);
    }

    this.isEmailSpan = function(id) {
        var val = document.getElementById(id);
        if (!this.isEmail(val.value)) {
            val.select();
            var str = "邮件不符合格式;";
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查是否为数字
    *
    * @param {}
    *            str
    * @return {Boolean} true：数字，false:<b>不是</b>数字;
    */
    this.isNum = function(str) {
        var re = /^[\d]+$/
        return re.test(str);
    }

    this.isNumSpan = function(id) {
        var val = document.getElementById(id);
        if (!this.isNum(val.value)) {
            val.select();
            var str = "必须是数字;";
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查数值是否在给定范围以内,为空,不做检查<br>
    *
    * @param {}
    *            str_num
    * @param {}
    *            small 应该大于或者等于的数值（此值为空时，只检查不能大于最大值）
    * @param {}
    *            big 应该小于或者等于的数值（此值为空时，只检查不能小于最小值）
    *
    * @return {Boolean} <b>小于最小数值或者大于最大数值</b>数字返回false 否则返回true;
    */
    this.isRangeNum = function(str_num, small, big) {
        if (!this.isNum(str_num)) // 检查是否为数字
            return false

        if (small == "" && big == "")
            throw str_num + "没有定义最大，最小值数字！";

        if (small != "") {
            if (str_num < small)
                return false;
        }
        if (big != "") {
            if (str_num > big)
                return false;
        }
        return true;

    }

    this.isRangeNumSpan = function(id, small, big) {
        var val = document.getElementById(id);
        if (!this.isRangeNum(val.value, small, big)) {
            val.select();
            var str = "";
            if (small != "") {
                str = "应该大于或者等于 " + small;
            }

            if (big != "") {
                str += " 应该小于或者等于 " + big;
            }
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查是否为合格字符串(不区分大小写)<br>
    * 是由a-z0-9_组成的字符串
    *
    * @param {}
    *            str 检查的字符串
    * @param {}
    *            idStr 光标定位的字段ID<b>只能接收ID</b>
    * @return {Boolean} <b>不是</b>"a-z0-9_"组成返回false,否则返回true;
    */
    this.isLicit = function(str) {
        var re = /^[_0-9a-zA-Z]*$/
        return re.test(str);
    }

    this.isLicitSpan = function(id) {
        var val = document.getElementById(id);
        if (!this.isLicit(val.value)) {
            val.select();
            var str = "是由a-z0-9_组成的字符串(不区分大小写);";
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查二个字符串是否相等
    *
    * @param {}
    *            str1 第一个字符串
    * @param {}
    *            str2 第二个字符串
    * @return {Boolean} 字符串不相等返回false,否则返回true;
    */
    this.isEquals = function(str1, str2) {
        return str1 == str2;
    }

    this.isEqualsSpan = function(id, id1) {
        var val = document.getElementById(id);
        var val1 = document.getElementById(id1);
        if (!this.isEquals(val.value, val1.value)) {
            val.select();
            var str = "二次输入内容必须一样;";
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查字符串是否在给定长度范围以内(中文字符以2个字节计算),字符为空,不做检查<br>
    *
    * @param {}
    *            str 检查的字符
    * @param {}
    *            lessLen 应该大于或者等于的长度
    * @param {}
    *            moreLen 应该小于或者等于的长度
    *
    * @return {Boolean} <b>小于最小长度或者大于最大长度</b>数字返回false;
    */
    this.isRange = function(str, lessLen, moreLen) {
        var strLen = this.length(str);

        if (lessLen != "") {
            if (strLen < lessLen)
                return false;
        }

        if (moreLen != "") {
            if (strLen > moreLen)
                return false;
        }

        if (lessLen == "" && moreLen == "")
            throw "没有定义最大最小长度!";
        return true;
    }

    this.isRangeSpan = function(id, lessLen, moreLen) {
        var val = document.getElementById(id);
        if (!this.isRange(val.value, lessLen, moreLen)) {
            var str = "长度";

            if (lessLen != "")
                str += "大于或者等于 " + lessLen + ";";

            if (moreLen != "")
                str += " 应该小于或者等于 " + moreLen;

            val.select();
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查字符串是否小于给定长度范围(中文字符以2个字节计算)<br>
    *
    * @param {}
    *            str 字符串
    * @param {}
    *            lessLen 小于或等于长度
    *
    * @return {Boolean} <b>小于给定长度</b>数字返回false;
    */
    this.isLess = function(str, lessLen) {
        return this.isRange(str, lessLen, "");
    }

    this.isLessSpan = function(id, lessLen) {
        var val = document.getElementById(id);
        if (!this.isLess(val.value, lessLen)) {
            var str = "长度大于或者等于 " + lessLen;
            val.select();
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查字符串是否大于给定长度范围(中文字符以2个字节计算)<br>
    *
    * @param {}
    *            str 字符串
    * @param {}
    *            moreLen 小于或等于长度
    *
    * @return {Boolean} <b>大于给定长度</b>数字返回false;
    */
    this.isMore = function(str, moreLen) {
        return this.isRange(str, "", moreLen);
    }

    this.isMoreSpan = function(id, moreLen) {
        var val = document.getElementById(id);
        if (!this.isMore(val.value, moreLen)) {
            var str = "长度应该小于或者等于 " + moreLen;
            val.select();
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }

    /**
    * 检查字符不为空
    *
    * @param {}
    *            str
    * @return {Boolean} <b>字符为空</b>返回true,否则为false;
    */
    this.isEmpty = function(str) {
        return str == "";
    }

    this.isEmptySpan = function(id) {
        var val = document.getElementById(id);
        if (this.isEmpty(val.value)) {
            var str = "不允许为空;";
            val.select();
            this.appendError(id, str);
            return false;
        } else {
            this.remove(id + idExt);
            return true;
        }
    }
}
 

//*******************************************测试页面*************************************************/

<html>
<head>
<title>网页标题</title>
<script type="text/javascript" src="test.js"></script>

<script type="text/javascript">
function checkForm(){
    var isPass = true;
    //过滤字符串
    if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {
        isPass = false;
    }
   
    //检查url
    if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL')))
        isPass = false;
       
    //email
    if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail')))
        isPass = false;
  
   //数字
    if(!(checkData.isNumSpan('isNum')))
        isPass = false;
   
    //数字大小
    if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))
       isPass = false;
       
    //密码 (数字,字母,下划线)    
    if(!(checkData.isLicitSpan('isLicit')))
       isPass = false;
       
    //二个字段是否相等
    if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))
       isPass = false;
  
   //字符长度控制
    if(!(checkData.isRangeSpan('isRange',5,10)))
       isPass = false;
  
   //字符最短控制
    if(!(checkData.isLessSpan('isLess',10)))
       isPass = false;
   
    //字符最长控制
    if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30)))
       isPass = false;
   
    //为空控制  
    if(!(checkData.isEmptySpan("isEmpty")))
       isPass = false;
    return isPass;
}
</script>
</head>
<body>
<form action="index.jsp" method="post" onsubmit="return checkForm();">
<table>
    <tbody>
        <tr>
            <td>字符过滤：<input type="text" id="filterStr" name="filterStr"></td>
            <td>链接：<input type="text" id="isURL" name="isURL"></td>
        </tr>
        <tr>
            <td>邮件：<input type="text" id="isEmail" name="isEmail"></td>
            <td>数字：<input type="text" id="isNum" name="isNum"></td>
        </tr>
        <tr>
            <td>数字范围：<input type="text" id="isRangeNum" name="isRangeNum"></td>
            <td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td>
        </tr>
        <tr>
            <td>判断相等：<input type="text" id="isEquals" name="isEquals"></td>
            <td><input type="text" id="isEquals1" name="isEquals1"></td>
        </tr>
        <tr>
            <td>长度控制：<input type="text" id="isRange" name="isRange"></td>
            <td>长度大于控制：<input type="text" id="isLess" name="isLess"></td>
        </tr>
        <tr>
            <td>长度小于控制：<input type="text" id="isMore" name="isMore"></td>
            <td>是否为空：<input type="text" id="isEmpty" name="isEmpty"></td>
        </tr>
        <tr>
            <td><input type="submit" name="submit" value="提交数据"></td>
        </tr>
    </tbody>
</table>

</form>
</body>
</html>
 
分享到：
| js 删除id元素
评论
3 楼 landy8530 2012-10-10  
验证网址那个方法，我直接输入sjkdasj这样的字符串返回也是true，请楼主解释一下！
2 楼 465886163 2010-11-10  
haop a  顶啊
1 楼 zy88882008 2010-01-28  
好  ！ 顶一个
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript 数据验证、email验证等

    JavaScript email验证等数据验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 非弹出对话框形式

    js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

    前段时间写了一个 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用...

    JavaScript对象验证库js-validator.zip

    email验证域必须为电子邮件地址格式。in:foo,bar,...验证域的值必须在给定的允许值列表中。integer验证值必须为整数。ip验证值必须为IP地址形式（支持IPv4与IPv6）。max:value验证域的值必须小于等于max，验证域可以...

    jsp表单验证js文件

    原创，自己写的一套表单验证js文件。 /*使用说明 * 示例 &lt;input type="text" notnull="true" datatype="email" comments="邮箱"&gt; * 字段注释 comments="邮箱" * 非空 notnull="true" * 最大长度 maxlength="30" * 负...

    通用FormValid1.0-js验证框架

    简介：完全通过html不需要写JS验证程序就可以实现表单验证功能，可支持一个表单元件多条件验证， 同一页面多表单可同时使用，和服务端程序无关系，完全客户端方式。 Demo1 基本使用方法 Demo2 自定义错误信息显示...

    jQ表单万能验证插件 vf-validate.js

    func（函数调用），item（元素值比较，例如：item:#pwd 或 item:.pwd），length（长度验证，例 length:10 或 length:10-100）以及其他常用类型：mobile,tel,email,url,number,idcard,password,username,gbk 等 ...

    jquery+validate.js+验证规则文件

    3 email:true 必须输入正确格式的电子邮件。 4 url:true 必须输入正确格式的网址。 5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-...

    javascript form 验证函数 弹出对话框形式

    javascript合法验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等(弹出对话框形式)

    JS输入框邮箱地址验证代码

    评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） 匹配空白行的正则表达式：\n\s*\r 评注：可以用来删除空白行 匹配HTML标记的正则表达式：&lt;(\S*?)[^&gt;]*&gt;.*?|*? /&gt; 评注：网上流传的版本太...

    js form 验证函数 当前比较流行的错误提示

    js数据验证、js email验证、js url验证、js长度验证、js数字验证等

    数字的正则表达式写法参考书

    验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位...

    程序天下:JavaScript实例自学手册

    16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 16.11 表单验证样式（一） 16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度...

    《程序天下：JavaScript实例自学手册》光盘源码

    16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 16.11 表单验证样式（一） 16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度...

    lift-validate:提升输入验证模块

    提升验证模块 Web框架的输入验证模块。 该模块使用插件进行客户端验证。 服务器端验证也是可用的。 提供了以下验证器： ValidateRequired-值是必需的。 ValidateNumber-值是正数或负数。 您还可以定义最小值和最大值...

    表单验证Validator v1.0(CHM) 下载

    Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。...

    正则表达式

    我们已经发现了,在正则表达式中所有的字母字符和数字都是按照字面意思与自身相匹配的.JavaScript的正则表达式还通过以反斜杠(\)开头的转义序列支持某些非 字母字符.例如,序列 "\n" 在字符串中匹配的是一个直接量换...

    《javaScrip开发技术大全》源代码

    • sample03.htm 将函数的返回值作为数据在表达式中进行运算 • sample04.htm 直接将函数的返回值输出 • sample05.htm 通过事件调用函数 • sample06.htm 递归调用函数 • sample...

    html入门到放弃笔记

    URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式 共三种表现形式： 1、绝对路径 特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是...

Magicbox
Global site tag (gtag.js) - Google Analytics