`
hhcysn
  • 浏览: 15831 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

传统js验证

javascriptjs 
阅读更多
js验证 
/** 
* 数据验证框架.增加了对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 获取窗口大小
评论
发表评论

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

相关推荐

    自定义基于jQuery的客户端表单验证工具

    传统的使用Javascript进行表单域验证编程量很大，过程处理繁琐，对每一个需要验证的表单项都要重复大量的验证代码，这种方式开发效率极低且容易出错。因此，为了提高开发的效率，有必要针对这种验证方法进行改进。...

    基于自定义属性的客户端统一验证JavaScript函数库(ChkInputs)

    ChkInputs是一个支持多浏览器，方便，高效率，超轻巧的Web客户端统一验证JavaScript函数库组件。所支持的浏览器包括IE、Firefox、Opera、傲游、腾讯、KylinBrowser、世界之窗等各种浏览器。 更新地址： ...

    一个Ajax无刷新表单输入验证特效插件.rar

    一个Ajax无刷新表单输入验证特效插件，主要是可以适时弹出提示信息，点确认后，仍使用传统的弹出框弹出信息，各参数设置说明： 　chk.config:待验证项目信息,对应项目说明： 　id:待验证项目的id.(类型:字符串,必填)...

    jQuery Validation Engine （ jQuery 表单验证插件）

    Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具，其优点是自定义验证内容更广泛以及与AJAX的方便整合。

    hapi-validation-question:Hapi.js验证与Joi + failAction问题

    验证问题使用Joi + failAction问题进行Hapi.js验证。情况我们想要使用Hapi构建一个“传统的”仅在服务器端呈现的应用程序。 在尝试了解如何避免在Joi验证失败时向客户端返回“原始” 400错误： 我们要拦截“不允许为...

    Node.js-node-express|实现登录验证和授权

    账号登录验证和权限设置，可以说是任何一个系统都必须具备的基本功能，而方式是从最传统的账号密码登录，到社交账号绑定不等。

    JavaScript详解(第2版)

    第1章　JavaScript简介　1 1.1　JavaScript是什么　1 1.2　JavaScript不是什么　2 1.3　JavaScript的用处　3 1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　...

    js进行表单验证实例分析

    本文实例讲述了js进行表单验证的方法。分享给大家供大家参考。具体实现方法如下： 1. 传统的表单验证代码 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...

    JS 有趣的eval优化输入验证实例代码

    代码如下://eval就是计算字符串【可以放任何js代码】里的值//1、 var str1=’12+3′; eval&#40;str1&#41;;//15 //2、var str2='[1,2,3]...1、如果对如上用户名，邮箱验证输入验空，传统的做法 代码如下:var flag = tr

    企业动态网站应用程序开发——输入数据实时校验函数及使用方法（Javascript篇）

    对实时表单数据验证方法——Javascript实时校验函数的编写及使用方法进行了详细综述。与传统表单验证相比，Javascript实时校验函数突出了数据实时验证理念，使用更安全、更高效

    php+js实现极验拖动验证码-tncode

    相信在淘宝，斗鱼这些大网站都见到过这样的验证码了，拖动验证码比传统在移动端有更好的化验，减少用户的输入。 极验验证码：第三方收费拖动验证码，斗鱼，熊猫直播等很多网站都使用了这家的验证码。 这种通过第三...

    jquery无刷新验证邮箱地址实现实例

    但是使用了传统的js无刷新需要清空浏览器缓存后才能正常的验证所以自己就去用jquery 去写一个了无刷新验证 看看 代码如下:[removed]var ee;function mailbox(strEmail){var name=document.blooger[0].email.value;...

    一种基于FPGA的新型元器件自动验证方法

    应用于宇航领域的新型元器件必须经过严格的性能功能的验证，传统的验证平台是针对特定的待验证器件设计的，不同的器件需要设计不同的验证平台，使得验证工作周期长、成本高、可移植性差。本文介绍基于FPGA控制器设计...

    【JavaScript源代码】Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法.docx

    验证码的具体验证不需要服务端去验证，服务端只需要核验验证结果即可。 验证码的实现不需要我们去了解，也不需要我们去具体实现。 滑块验证码的安全程度相比于传统验证码高不少。 ... 　由于网络上和腾讯api文档...

    php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

    本文实例讲述了php+js实现的拖动滑块验证码验证表单操作。分享给大家供大家参考，具体如下： 现在很多网站，比如淘宝，京东等都改用使用极验拖动验证码实现登录，这种方式比传统的验证码方式有更好的体验，减少用户...

    angular-jwt-authentication:使用 JWT 进行 AngularJS 身份验证

    随着 Web 转向客户端和服务器之间更大的分离，JWT 为传统的基于 cookie 的身份验证模型提供了一个极好的替代方案。 有关 JWT 的更多信息，请访问 在本系列中，我们将构建一个简单的应用程序，以从带有 Angular ...

    magic-js:魔术浏览器React Native JavaScript SDK是您在应用程序中集成无密码身份验证的切入点

    Magic使开发人员能够通过创新的无密码身份验证流程保护用户，而不会因UX折衷而给传统OAuth实现带来负担。 ·· :open_book: 文献资料 请参阅以了解如何在短短几分钟内掌握Magic SDK。 :high_voltage: 快速开始 ...

    vue_js_sample:具有Auth0身份验证的Vue Js示例项目

    通过更传统的添加身份验证。 添加对与同一用户支持。 支持生成签名的以调用您的API并安全地传递用户身份。 分析用户登录方式，时间和地点的方式。 通过从其他来源提取数据并将其添加到用户个人资料中。

    大名鼎鼎SWFUpload- Flash+JS 上传

    　SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 　* 可以...

    精通JS脚本之ExtJS框架.part1.rar

    15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 调试代码运行速度 15.6.3 查看对象属性 第16章 ExtJS案例...

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