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

 

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

JavaScript代码
  1. /**  
  2. * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息.  
  3. *  
  4. * @author wangzi6hao  
  5. * @version 2.1  
  6. * @description 2009-05-16  
  7. */  
  8. var checkData = new function() {   
  9.     var idExt="_wangzi6hao_Span";//生成span层的id后缀   
  10.     /**  
  11.     * 得到中英文字符长(中文为2个字符)  
  12.     *  
  13.     * @param {}  
  14.     *            str  
  15.     * @return 字符长  
  16.     */  
  17.     this.length = function(str) {   
  18.         var p1 = new RegExp('%u..''g')   
  19.         var p2 = new RegExp('%.''g')   
  20.         return escape(str).replace(p1, '').replace(p2, '').length   
  21.     }   
  22.   
  23.     /**  
  24.     * 删除对应id元素  
  25.     */  
  26.     this.remove = function(id) {   
  27.         var idObject = document.getElementById(id);   
  28.         if (idObject != null)   
  29.             idObject.parentNode.removeChild(idObject);   
  30.     }   
  31.   
  32.     /**  
  33.     * 在对应id后面错误信息  
  34.     *  
  35.     * @param id:需要显示错误信息的id元素  
  36.     *            str:显示错误信息  
  37.     */  
  38.     this.appendError = function(id, str) {   
  39.         this.remove(id + idExt);// 如果span元素存在,则先删除此元素   
  40.         var spanNew = document.createElement("span");// 创建span   
  41.         spanNew.id = id + idExt;// 生成spanid   
  42.         spanNew.style.color = "red";   
  43.         spanNew.appendChild(document.createTextNode(str));// 给span添加内容   
  44.         var inputId = document.getElementById(id);   
  45.         inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span   
  46.     }   
  47.   
  48.     /**  
  49.     * @description 过滤所有空格字符。  
  50.     * @param str:需要去掉空间的原始字符串  
  51.     * @return 返回已经去掉空格的字符串  
  52.     */  
  53.     this.trimSpace = function(str) {   
  54.         str += "";   
  55.         while ((str.charAt(0) == ' ') || (str.charAt(0) == '???')   
  56.                 || (escape(str.charAt(0)) == '%u3000'))   
  57.             str = str.substring(1, str.length);   
  58.         while ((str.charAt(str.length - 1) == ' ')   
  59.                 || (str.charAt(str.length - 1) == '???')   
  60.                 || (escape(str.charAt(str.length - 1)) == '%u3000'))   
  61.             str = str.substring(0, str.length - 1);   
  62.         return str;   
  63.     }   
  64.   
  65.     /**  
  66.     * 过滤字符串开始部分的空格\字符串结束部分的空格\将文字中间多个相连的空格变为一个空格  
  67.     *  
  68.     * @param {Object}  
  69.     *            inputString  
  70.     */  
  71.     this.trim = function(inputString) {   
  72.         if (typeof inputString != "string") {   
  73.             return inputString;   
  74.         }   
  75.         var retValue = inputString;   
  76.         var ch = retValue.substring(0, 1);   
  77.         while (ch == " ") {   
  78.             // 检查字符串开始部分的空格   
  79.             retValue = retValue.substring(1, retValue.length);   
  80.             ch = retValue.substring(0, 1);   
  81.         }   
  82.         ch = retValue.substring(retValue.length - 1, retValue.length);   
  83.         while (ch == " ") {   
  84.             // 检查字符串结束部分的空格   
  85.             retValue = retValue.substring(0, retValue.length - 1);   
  86.             ch = retValue.substring(retValue.length - 1, retValue.length);   
  87.         }   
  88.         while (retValue.indexOf(" ") != -1) {   
  89.             // 将文字中间多个相连的空格变为一个空格   
  90.             retValue = retValue.substring(0, retValue.indexOf(" "))   
  91.                     + retValue.substring(retValue.indexOf(" ") + 1,   
  92.                             retValue.length);   
  93.         }   
  94.         return retValue;   
  95.     }   
  96.   
  97.     /**  
  98.     * 过滤字符串,指定过滤内容,如果内容为空,则默认过滤 '~!@#$%^&*()-+."  
  99.     *  
  100.     * @param {Object}  
  101.     *            str  
  102.     * @param {Object}  
  103.     *            filterStr  
  104.     *  
  105.     * @return 包含过滤内容,返回True,否则返回false;  
  106.     */  
  107.     this.filterStr = function(str, filterString) {   
  108.         filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString   
  109.         var ch;   
  110.         var i;   
  111.         var temp;   
  112.         var error = false;// 当包含非法字符时,返回True   
  113.         for (i = 0; i <= (filterString.length - 1); i++) {   
  114.             ch = filterString.charAt(i);   
  115.             temp = str.indexOf(ch);   
  116.             if (temp != -1) {   
  117.                 error = true;   
  118.                 break;   
  119.             }   
  120.         }   
  121.         return error;   
  122.     }   
  123.   
  124.     this.filterStrSpan = function(id, filterString) {   
  125.         filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString   
  126.         var val = document.getElementById(id);   
  127.         if (this.filterStr(val.value, filterString)) {   
  128.             val.select();   
  129.             var str = "不能包含非法字符" + filterString;   
  130.             this.appendError(id, str);   
  131.             return false;   
  132.         } else {   
  133.             this.remove(id + idExt);   
  134.             return true;   
  135.         }   
  136.     }   
  137.   
  138.     /**  
  139.     * 检查是否为网址  
  140.     *  
  141.     * @param {}  
  142.     *            str_url  
  143.     * @return {Boolean} true:是网址,false:<b>不是</b>网址;  
  144.     */  
  145.     this.isURL = function(str_url) {// 验证url   
  146.         var strRegex = "^((https|http|ftp|rtsp|mms)?://)"  
  147.                 + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@   
  148.                 + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184   
  149.                 + "|" // 允许IP和DOMAIN(域名)   
  150.                 + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.   
  151.                 + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名   
  152.                 + "[a-z]{2,6})" // first level domain- .com or .museum   
  153.                 + "(:[0-9]{1,4})?" // 端口- :80   
  154.                 + "((/?)|" // a slash isn't required if there is no file name   
  155.                 + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";   
  156.         var re = new RegExp(strRegex);   
  157.         return re.test(str_url);   
  158.     }   
  159.   
  160.     this.isURLSpan = function(id) {   
  161.         var val = document.getElementById(id);   
  162.         if (!this.isURL(val.value)) {   
  163.             val.select();   
  164.             var str = "链接不符合格式;";   
  165.             this.appendError(id, str);   
  166.             return false;   
  167.         } else {   
  168.             this.remove(id + idExt);   
  169.             return true;   
  170.         }   
  171.     }   
  172.   
  173.     /**  
  174.     * 检查是否为电子邮件  
  175.     *  
  176.     * @param {}  
  177.     *            str  
  178.     * @return {Boolean} true:电子邮件,false:<b>不是</b>电子邮件;  
  179.     */  
  180.     this.isEmail = function(str) {   
  181.         var re = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;   
  182.         return re.test(str);   
  183.     }   
  184.   
  185.     this.isEmailSpan = function(id) {   
  186.         var val = document.getElementById(id);   
  187.         if (!this.isEmail(val.value)) {   
  188.             val.select();   
  189.             var str = "邮件不符合格式;";   
  190.             this.appendError(id, str);   
  191.             return false;   
  192.         } else {   
  193.             this.remove(id + idExt);   
  194.             return true;   
  195.         }   
  196.     }   
  197.   
  198.     /**  
  199.     * 检查是否为数字  
  200.     *  
  201.     * @param {}  
  202.     *            str  
  203.     * @return {Boolean} true:数字,false:<b>不是</b>数字;  
  204.     */  
  205.     this.isNum = function(str) {   
  206.         var re = /^[\d]+$/   
  207.         return re.test(str);   
  208.     }   
  209.   
  210.     this.isNumSpan = function(id) {   
  211.         var val = document.getElementById(id);   
  212.         if (!this.isNum(val.value)) {   
  213.             val.select();   
  214.             var str = "必须是数字;";   
  215.             this.appendError(id, str);   
  216.             return false;   
  217.         } else {   
  218.             this.remove(id + idExt);   
  219.             return true;   
  220.         }   
  221.     }   
  222.   
  223.     /**  
  224.     * 检查数值是否在给定范围以内,为空,不做检查<br>  
  225.     *  
  226.     * @param {}  
  227.     *            str_num  
  228.     * @param {}  
  229.     *            small 应该大于或者等于的数值(此值为空时,只检查不能大于最大值)  
  230.     * @param {}  
  231.     *            big 应该小于或者等于的数值(此值为空时,只检查不能小于最小值)  
  232.     *  
  233.     * @return {Boolean} <b>小于最小数值或者大于最大数值</b>数字返回false 否则返回true;  
  234.     */  
  235.     this.isRangeNum = function(str_num, small, big) {   
  236.         if (!this.isNum(str_num)) // 检查是否为数字   
  237.             return false  
  238.   
  239.         if (small == "" && big == "")   
  240.             throw str_num + "没有定义最大,最小值数字!";   
  241.   
  242.         if (small != "") {   
  243.             if (str_num < small)   
  244.                 return false;   
  245.         }   
  246.         if (big != "") {   
  247.             if (str_num > big)   
  248.                 return false;   
  249.         }   
  250.         return true;   
  251.   
  252.     }   
  253.   
  254.     this.isRangeNumSpan = function(id, small, big) {   
  255.         var val = document.getElementById(id);   
  256.         if (!this.isRangeNum(val.value, small, big)) {   
  257.             val.select();   
  258.             var str = "";   
  259.             if (small != "") {   
  260.                 str = "应该大于或者等于 " + small;   
  261.             }   
  262.   
  263.             if (big != "") {   
  264.                 str += " 应该小于或者等于 " + big;   
  265.             }   
  266.             this.appendError(id, str);   
  267.             return false;   
  268.         } else {   
  269.             this.remove(id + idExt);   
  270.             return true;   
  271.         }   
  272.     }   
  273.   
  274.     /**  
  275.     * 检查是否为合格字符串(不区分大小写)<br>  
  276.     * 是由a-z0-9_组成的字符串  
  277.     *  
  278.     * @param {}  
  279.     *            str 检查的字符串  
  280.     * @param {}  
  281.     *            idStr 光标定位的字段ID<b>只能接收ID</b>  
  282.     * @return {Boolean} <b>不是</b>"a-z0-9_"组成返回false,否则返回true;  
  283.     */  
  284.     this.isLicit = function(str) {   
  285.         var re = /^[_0-9a-zA-Z]*$/   
  286.         return re.test(str);   
  287.     }   
  288.   
  289.     this.isLicitSpan = function(id) {   
  290.         var val = document.getElementById(id);   
  291.         if (!this.isLicit(val.value)) {   
  292.             val.select();   
  293.             var str = "是由a-z0-9_组成的字符串(不区分大小写);";   
  294.             this.appendError(id, str);   
  295.             return false;   
  296.         } else {   
  297.             this.remove(id + idExt);   
  298.             return true;   
  299.         }   
  300.     }   
  301.   
  302.     /**  
  303.     * 检查二个字符串是否相等  
  304.     *  
  305.     * @param {}  
  306.     *            str1 第一个字符串  
  307.     * @param {}  
  308.     *            str2 第二个字符串  
  309.     * @return {Boolean} 字符串不相等返回false,否则返回true;  
  310.     */  
  311.     this.isEquals = function(str1, str2) {   
  312.         return str1 == str2;   
  313.     }   
  314.   
  315.     this.isEqualsSpan = function(id, id1) {   
  316.         var val = document.getElementById(id);   
  317.         var val1 = document.getElementById(id1);   
  318.         if (!this.isEquals(val.value, val1.value)) {   
  319.             val.select();   
  320.             var str = "二次输入内容必须一样;";   
  321.             this.appendError(id, str);   
  322.             return false;   
  323.         } else {   
  324.             this.remove(id + idExt);   
  325.             return true;   
  326.         }   
  327.     }   
  328.   
  329.     /**  
  330.     * 检查字符串是否在给定长度范围以内(中文字符以2个字节计算),字符为空,不做检查<br>  
  331.     *  
  332.     * @param {}  
  333.     *            str 检查的字符  
  334.     * @param {}  
  335.     *            lessLen 应该大于或者等于的长度  
  336.     * @param {}  
  337.     *            moreLen 应该小于或者等于的长度  
  338.     *  
  339.     * @return {Boolean} <b>小于最小长度或者大于最大长度</b>数字返回false;  
  340.     */  
  341.     this.isRange = function(str, lessLen, moreLen) {   
  342.         var strLen = this.length(str);   
  343.   
  344.         if (lessLen != "") {   
  345.             if (strLen < lessLen)   
  346.                 return false;   
  347.         }   
  348.   
  349.         if (moreLen != "") {   
  350.             if (strLen > moreLen)   
  351.                 return false;   
  352.         }   
  353.   
  354.         if (lessLen == "" && moreLen == "")   
  355.             throw "没有定义最大最小长度!";   
  356.         return true;   
  357.     }   
  358.   
  359.     this.isRangeSpan = function(id, lessLen, moreLen) {   
  360.         var val = document.getElementById(id);   
  361.         if (!this.isRange(val.value, lessLen, moreLen)) {   
  362.             var str = "长度";   
  363.   
  364.             if (lessLen != "")   
  365.                 str += "大于或者等于 " + lessLen + ";";   
  366.   
  367.             if (moreLen != "")   
  368.                 str += " 应该小于或者等于 " + moreLen;   
  369.   
  370.             val.select();   
  371.             this.appendError(id, str);   
  372.             return false;   
  373.         } else {   
  374.             this.remove(id + idExt);   
  375.             return true;   
  376.         }   
  377.     }   
  378.   
  379.     /**  
  380.     * 检查字符串是否小于给定长度范围(中文字符以2个字节计算)<br>  
  381.     *  
  382.     * @param {}  
  383.     *            str 字符串  
  384.     * @param {}  
  385.     *            lessLen 小于或等于长度  
  386.     *  
  387.     * @return {Boolean} <b>小于给定长度</b>数字返回false;  
  388.     */  
  389.     this.isLess = function(str, lessLen) {   
  390.         return this.isRange(str, lessLen, "");   
  391.     }   
  392.   
  393.     this.isLessSpan = function(id, lessLen) {   
  394.         var val = document.getElementById(id);   
  395.         if (!this.isLess(val.value, lessLen)) {   
  396.             var str = "长度大于或者等于 " + lessLen;   
  397.             val.select();   
  398.             this.appendError(id, str);   
  399.             return false;   
  400.         } else {   
  401.             this.remove(id + idExt);   
  402.             return true;   
  403.         }   
  404.     }   
  405.   
  406.     /**  
  407.     * 检查字符串是否大于给定长度范围(中文字符以2个字节计算)<br>  
  408.     *  
  409.     * @param {}  
  410.     *            str 字符串  
  411.     * @param {}  
  412.     *            moreLen 小于或等于长度  
  413.     *  
  414.     * @return {Boolean} <b>大于给定长度</b>数字返回false;  
  415.     */  
  416.     this.isMore = function(str, moreLen) {   
  417.         return this.isRange(str, "", moreLen);   
  418.     }   
  419.   
  420.     this.isMoreSpan = function(id, moreLen) {   
  421.         var val = document.getElementById(id);   
  422.         if (!this.isMore(val.value, moreLen)) {   
  423.             var str = "长度应该小于或者等于 " + moreLen;   
  424.             val.select();   
  425.             this.appendError(id, str);   
  426.             return false;   
  427.         } else {   
  428.             this.remove(id + idExt);   
  429.             return true;   
  430.         }   
  431.     }   
  432.   
  433.     /**  
  434.     * 检查字符不为空  
  435.     *  
  436.     * @param {}  
  437.     *            str  
  438.     * @return {Boolean} <b>字符为空</b>返回true,否则为false;  
  439.     */  
  440.     this.isEmpty = function(str) {   
  441.         return str == "";   
  442.     }   
  443.   
  444.     this.isEmptySpan = function(id) {   
  445.         var val = document.getElementById(id);   
  446.         if (this.isEmpty(val.value)) {   
  447.             var str = "不允许为空;";   
  448.             val.select();   
  449.             this.appendError(id, str);   
  450.             return false;   
  451.         } else {   
  452.             this.remove(id + idExt);   
  453.             return true;   
  454.         }   
  455.     }   
  456. }  

 ==============================测试页面========================================

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>网页标题</title>  
  4. <script type="text/javascript" src="test.js"></script>  
  5.   
  6. <script type="text/javascript">  
  7. function checkForm(){   
  8.     var isPass = true;   
  9.     //过滤字符串   
  10.     if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) {   
  11.         isPass = false;   
  12.     }   
  13.       
  14.     //检查url   
  15.     if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL')))   
  16.         isPass = false;   
  17.           
  18.     //email   
  19.     if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail')))   
  20.         isPass = false;   
  21.      
  22.    //数字   
  23.     if(!(checkData.isNumSpan('isNum')))   
  24.         isPass = false;   
  25.       
  26.     //数字大小   
  27.     if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100)))   
  28.        isPass = false;   
  29.           
  30.     //密码 (数字,字母,下划线)       
  31.     if(!(checkData.isLicitSpan('isLicit')))   
  32.        isPass = false;   
  33.           
  34.     //二个字段是否相等   
  35.     if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1')))   
  36.        isPass = false;   
  37.      
  38.    //字符长度控制   
  39.     if(!(checkData.isRangeSpan('isRange',5,10)))   
  40.        isPass = false;   
  41.      
  42.    //字符最短控制   
  43.     if(!(checkData.isLessSpan('isLess',10)))   
  44.        isPass = false;   
  45.       
  46.     //字符最长控制   
  47.     if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30)))   
  48.        isPass = false;   
  49.       
  50.     //为空控制     
  51.     if(!(checkData.isEmptySpan("isEmpty")))   
  52.        isPass = false;   
  53.     return isPass;   
  54. }   
  55. </script>  
  56. </head>  
  57. <body>  
  58. <form action="index.jsp" method="post" onsubmit="return checkForm();">  
  59. <table>  
  60.     <tbody>  
  61.         <tr>  
  62.             <td>字符过滤:<input type="text" id="filterStr" name="filterStr"></td>  
  63.             <td>链接:<input type="text" id="isURL" name="isURL"></td>  
  64.         </tr>  
  65.         <tr>  
  66.             <td>邮件:<input type="text" id="isEmail" name="isEmail"></td>  
  67.             <td>数字:<input type="text" id="isNum" name="isNum"></td>  
  68.         </tr>  
  69.         <tr>  
  70.             <td>数字范围:<input type="text" id="isRangeNum" name="isRangeNum"></td>  
  71.             <td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td>  
  72.         </tr>  
  73.         <tr>  
  74.             <td>判断相等:<input type="text" id="isEquals" name="isEquals"></td>  
  75.             <td><input type="text" id="isEquals1" name="isEquals1"></td>  
  76.         </tr>  
  77.         <tr>  
  78.             <td>长度控制:<input type="text" id="isRange" name="isRange"></td>  
  79.             <td>长度大于控制:<input type="text" id="isLess" name="isLess"></td>  
  80.         </tr>  
  81.         <tr>  
  82.             <td>长度小于控制:<input type="text" id="isMore" name="isMore"></td>  
  83.             <td>是否为空:<input type="text" id="isEmpty" name="isEmpty"></td>  
  84.         </tr>  
  85.         <tr>  
  86.             <td><input type="submit" name="submit" value="提交数据"></td>  
  87.         </tr>  
  88.     </tbody>  
  89. </table>  
  90.   
  91. </form>  
  92. </body>  
  93. </html>  

 



[本日志由 风一样的男孩 于 2010-09-04 11:39 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Js js验证
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.