Javascript原型式继承实例

用Js写一个表单验证,主要是为更好的领悟刚刚熟悉的Javascript原型式继承。

优点:无论new多少对象,都是在共用同一对象的属性和方法,非常节省内存。

缺点:由于本例在执行check方法的时候需要做循环判断,所以new的对象多了,会存在执行效率问题。

先给自己留个脚印,三个月、半年、一年后再观回顾,鉴定Javascript发展程度。

您若感兴趣,可以继续读下去。

预览请点击

贴上源码,分为四部分:

第一部分 定义clone函数

/* 原型式继承构造函数 */
function clone(obj) {
  var F = function(){}
  F.prototype = validator;
  return new F();
}

第二部分 定义validator对象字面量

/* 定义公用方法,被用于继承,注意原型式继承读和写的不对等性 */
validator = {
  check : function(objId,objName,steps) {
    //代码较长,在此省略,完整源码见 预览 ..
  },
  // 必填验证
  required : function(tipsNode,value,objName) {
  
    if(value == '') {
      this.errorPlacement(tipsNode,objName+'不能为空');
      return false;
     }
  
  },
  // 字符验证
  stringCheck : function(tipsNode,value,objName){
  
    if(!/^\w+@?$/.test(value)){
      this.errorPlacement(tipsNode,objName + '以字母a~zA~Z、数字0~9、"_"、"@"组成');
      return false;
    }
  
  },
  // 密码验证
  passwdCheck : function(tipsNode,value,objName){
  
    if(!/^\w+$/.test(value)) {
      this.errorPlacement(tipsNode,objName + '以字母a~zA~Z、数字0~9或下划线组成');
      return false;
    }
  
  },
  // 字符长度验证
  byteRangeCheck : function(tipsNode,value,objName,range) {
  
    var regExp = new RegExp('.{' + range[0] + ',' + range[1] + '}');
    if(!regExp.test(value)) {
      this.errorPlacement(tipsNode,objName + '长度为6~18位');
      return false;
    }
  
  },
  // 错误信息提示  
  errorPlacement : function(tipsNode,error){
    tipsNode.innerHTML = '<span class="error">' + error + '</span>';
  },
  // 提示节点列表
  tipsList : {},
  // 输入框节点列表
  nodeList : {}
}

第三部分 通过原型式继承创建对象

/* 原型式继承 */
var userInput = clone(validator);
var smtpPasswdInput = clone(validator);
var smtpServerInput = clone(validator);

第四部分 校验

/* 按照check方法中第三个参数顺序依次进行检查 */
submitButton.onclick = function() {
  userInput.check('username','用户名',['required','stringCheck']);
  smtpPasswdInput.check('smtp-passwd','smtp密码',['required','passwdCheck',['byteRangeCheck',[6,18]]]);
  smtpServerInput.check('smtp-server','smtp服务器',['required']);
}
This entry was posted in Project and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>