`
wangzi6hao
  • 浏览: 213782 次
  • 性别: 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）验证，以及其他的验证技术，如URL验证、长度验证和数字验证。 1. **JavaScript数据验证基础**： JavaScript数据验证允许我们在用户提交数据之前检查...

    js表单验证 全网最全的 表单验证

    总结来说，这个资源集合提供了一系列关于JavaScript表单验证的方法和实例，包括基础的输入验证、电子邮件和URL验证，以及登录验证的实践。无论你是初学者还是经验丰富的开发者，都可以从中获取有价值的参考和灵感，...

    js验证代码大全

    JS验证代码大全是汇集了多种JavaScript验证技术的资源集合，可以帮助开发者在创建网页表单、验证用户输入等方面提供有效的解决方案。 一、表单验证基础 在网页开发中，表单验证是非常重要的一环，它能够确保用户...

    JS验证包，有示例.rar......

    JavaScript（简称JS）是一种轻量级的编程语言，主要用于网页和网络应用的开发。它能够直接在客户端运行，无需...通过深入研究`pubcheck.js`的源代码，我们可以学习到更多关于JavaScript验证策略和实现方式的知识。

    JavaScript表单验证控制代码大全

    6. **长度验证** 限制输入的最小和最大长度，例如验证密码强度时，可能会要求密码至少8个字符。 7. **格式验证** 验证日期、时间、货币等格式，如`/^\d{4}-\d{2}-\d{2}$/`匹配ISO 8601日期格式。 8. **自定义...

    js表单验证

    JavaScript（简称JS）是网页开发中用于实现客户端交互和数据验证的重要工具，特别是在表单验证方面。表单验证是确保用户输入数据有效性和安全性的关键步骤，可以减少服务器端的压力，提升用户体验，防止无效或恶意的...

    各种js验证 实用javascript函数

    JavaScript函数可以检查输入的身份证号码是否符合中国公民身份证的格式，包括长度、校验码等。通常需要使用正则表达式来匹配身份证号的特定模式。 4. **验证网址是否合法**： 这个功能用于检查用户输入的网址是否...

    JavaScript对象验证库js-validator.zip

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

    完美表单验证js，几乎包括了所有的表单要提交的验证

    本资源提供的"完美表单验证js"就是一个全面的JavaScript解决方案，几乎涵盖了所有常见的表单验证需求，如电话、QQ、Email等。 JavaScript是一种客户端脚本语言，它可以直接在用户的浏览器上运行，无需服务器参与，...

    JavaScript客户端输入验证

    JavaScript客户端输入验证是Web开发中不可或缺的一环，它主要用于在用户提交数据到服务器之前检查数据的有效性和格式。这种验证可以防止无效数据的提交，减轻服务器的负担，提高用户体验，因为错误提示可以即时显示...

    JS验证（页面验证）

    5. **URL验证**：确保输入的是合法的URL。 - 规则：`/^ http:\/\/ [A-Za-z0-9]+ . [A-Za-z0-9]+ [/=\?%\-&_~`@[\]:+!] * ([^&lt;&gt;\""])* $/` 6. **身份证号验证**：支持15位和18位身份证号。 - 规则：`/^ \d{15} (\...

    Node.js-TimelineValidate是一个基于node.js数据验证器

    1. **丰富的验证规则**：TimelineValidate包含了各种常见的数据验证功能，如检查字符串长度、数值范围、日期格式、电子邮件地址、URL等。这使得开发者可以轻松地对输入的数据进行多维度的校验。 2. **简单易用的API...

    JavaScript最常用数据验证合集，程序员实战总结！

    1. **基本类型验证**：JavaScript有七种基本数据类型（字符串、数字、布尔值、null、undefined、Symbol、BigInt），可以根据需要验证输入是否为特定类型，如`typeof variable === 'string'`用于检查变量是否为字符串...

    javascript表单验证的源码.txt

    3. **URL验证（Url）** - **用途**：验证输入的字段是否为有效的URL格式。 - **应用场景**：个人主页、网站链接等。 - **实现原理**：利用URL格式的正则表达式来验证。 4. **安全字符串验证（SafeString）** - ...

    js验证讲解加例子 登录 电话号码 邮箱等验证

    JavaScript验证是前端开发中的重要环节，它能够实时检查用户输入，提高用户体验，减少无效或错误的数据提交到服务器。验证通常包括以下几类： 1. 非空验证：确保用户已填写必填字段。 2. 格式验证：检查输入数据的...

    jquery.validate.js表单验证.pdf

    文件列出了jquery.validate.js提供的多种表单验证规则，包括required（必填）、email（电子邮件格式）、url（URL格式）、date（日期格式）、dateISO（ISO日期格式）、number（数字）、digits（数字）、creditcard...

    JS表单脚本输入验证

    2. **验证类型**：常见的验证类型包括空值检查（`required`属性）、邮箱格式验证（`email`正则表达式）、手机号码验证（特定的数字模式）、URL验证、数字范围验证、长度限制等。 3. **事件处理**：表单验证通常与...

    parsley.js验证

    3. **min/max**：验证数字类型的最小值和最大值。 4. **pattern**：使用正则表达式进行复杂匹配。 5. **email**：验证邮箱地址格式。 6. **url**：验证URL格式。 7. **digits**：验证仅包含数字的输入。 8. **...

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