zoukankan      html  css  js  c++  java
  • JS共通Check页面元素方法

        之前写过浅解读JS中的call和apply这个随笔,一直没有给出好的例子,表示很抱歉。

        今天正好要和别人分享技术点。一时间也不知道要说点什么。正好看到这个博客,就继这个博客和部门里面的人分享下。

        以前在写C#的时候,做过一个csv文件中数据的Check这样的功能,当时为了简单,可复用性,就写了一个委托数组,利用委托数组来实现的数据Check。想想那个玩意还是很好用的,于是把那个思想用到JS这边来。

        关于知识点方面的东西,我这里就不重复了,大家可以去看看之前的博文。这里就直接看看如何在JS中实现可服用性的页面元素的Check了啊。

        如果明白了前文中的Call方法,相信这里没有什么难度的。只是把多个知识点整合起来就好了。

        好了,不废话了。

        请见如下代码片段:

        

     1     <script language="javascript" type="text/javascript">
     2         var len = function (s) { return s.length; }
     3         /**
     4          * 长度的Check
     5         */
     6         var chkLen = function () {
     7             this.check = function () {
     8                 var chkStr = arguments[0][0];
     9                 var maxLen = arguments[0][1];
    10                 if (len(chkStr) > maxLen) {
    11                     return "长度不能超过" + maxLen;
    12                 }
    13                 return "";
    14             }
    15         }
    16 
    17         /**
    18          * 数值类型Check
    19         */
    20         var chkNum = function () {
    21             this.check = function () {
    22                 var chkStr = arguments[0];
    23                 var reg = /\d/;
    24                 if (!reg.test(chkStr)) {
    25                     return "只能入力数字";
    26                 }
    27                 return "";
    28             }
    29         }
    30 
    31         /**
    32         * 函数工厂
    33         */
    34         var chkFactory = function () {
    35             return this.check(arguments[0]);
    36         }
    37 
    38         /**
    39         * 执行Check操作
    40         */
    41         var chkExec = function (chkM, params, chkAll) {
    42             var i = 0;
    43             var errArr = new Array();
    44             for (var index = 0; index < chkM.length; index++) {
    45                 var result = chkFactory.call(chkM[index], params[index]);
    46                 if (len(result) != 0) {
    47                     errArr[i] = result;
    48                     i++;
    49                     if (!chkAll) {
    50                         return errArr;
    51                     }
    52                 }
    53             }
    54             return errArr;
    55         }
    56 
    57         /**
    58         * 按钮事件
    59         */
    60         function btnCheckValue_Click() {
    61             var chkStr = window.document.getElementById("txtUserName").value;
    62             var chkM = [new chkLen(), new chkNum()];
    63             var params = new Array();
    64             params[0] = [chkStr, 10];
    65             params[1] = chkStr;
    66 
    67             var errMsg = chkExec(chkM, params, true);
    68             for (var index in errMsg) {
    69                 alert(errMsg[index]);
    70             }
    71         }
    72     </script>
    View Code

         代码也不是很复杂,不过大奖要搞明白里面的this,JS中的this这个玩意,有时候真的很害死人。还有就是要清楚arguments这个东东。这个东东说白点没啥,不过要清楚一点的是,我们在对一个函数传递参数的时候,参数是通过数组的方式被传递过去的。无论看JAVA,C#的Main函数都是有个String[]玩意。所以这就要理清楚自己的思路。在上面的代码中为什么在chkLen这个函数利用用arguments[0][0]来取得值的。
         JS有时候还真是让人头疼,我觉得理解好JS,首先要好好理解function。这个东东它既是一个代码块,也是一种数据类型。他非常的有用哦啊。

         好了,各位,我要闪人了,蛋疼的要去开会了。欢迎大家拍砖。拜拜。

  • 相关阅读:
    第三次课堂总结--付胤
    作业二总结
    java数据结构——单链表、双端链表、双向链表(Linked List)
    java数据结构——队列、循环队列(Queue)
    java数据结构——栈(Stack)
    java数据结构——数组(Array)
    JSON Web Token的使用
    RSA加密、解密、公钥私钥生成
    数据库优化策略
    Socket和ServerSocket学习笔记
  • 原文地址:https://www.cnblogs.com/heardawn/p/LookForCall.html
Copyright © 2011-2022 走看看