继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript检测之basevalidate.js

劼哥stone
关注TA
已关注
手记 6
粉丝 8
获赞 531

上篇文章「JavaScript检测原始值、引用值、属性」中涉及了大量有用的代码范例,为了让大家更方便的使用这些代码,博主特意把这些代码重新整理并托管到 GitHub,项目地址是:https://github.com/stone0090/base-validate,如果 basevalidate.js 对您有帮助,请帮忙在 GitHubStar 该项目,谢谢大家。

basevalidate.js 包含 14个独立检测方法1个综合检测方法,示例代码如下:(如果大家还有其他需要,请在评论区留言,我尽量为大家实现。)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>basevalidate test</title>
  <script type="text/javascript" src="basevalidate.js"></script>
  <script>

    var Person = function(){
      this.name = 'stone';
      this.age = 30;
    }

    var person = new Person();
    var nums = [123, 456, 789];

    // 14个独立检测方法
    console.log(baseValidate.isString(null));
    console.log(baseValidate.isNumber(null));
    console.log(baseValidate.isBoolean(null));
    console.log(baseValidate.isUndefined(null));
    console.log(baseValidate.isNull(null));
    console.log(baseValidate.isObject(null));
    console.log(baseValidate.instanceOf(null));
    console.log(baseValidate.isFunction(null));
    console.log(baseValidate.isArray(null));
    console.log(baseValidate.isProperty(null));
    console.log(baseValidate.isOwnProperty(null));
    console.log(baseValidate.isDomProperty(null));
    console.log(baseValidate.isBomProperty(null));
    console.log(baseValidate.isEmpty(null));

    // 1个综合检测方法 baseValidate(value, object),等价于 baseValidate.validateAll(value ,object)
    console.log(baseValidate('123'));
    console.log(baseValidate(123));
    console.log(baseValidate(true));
    console.log(baseValidate(person, Person));
    console.log(baseValidate(nums));
    console.log(baseValidate('age', person));
    console.log(baseValidate('name', person));
    console.log(baseValidate(alert));
    console.log(baseValidate(document.getElementById));

    // 以下皆为 isEmpty() 方法为 false 的情况
    console.log(baseValidate()); // 不传参数,参数默认为 undefined
    console.log(baseValidate(null));
    console.log(baseValidate(''));
    console.log(baseValidate(0));
    console.log(baseValidate(false));
    console.log(baseValidate({}));
    console.log(baseValidate([]));
    console.log(baseValidate(NaN));

  </script>
</head>
<body></body>
</html>

测试结果如下:

不知道大家有没有发现,其中一个结果好像不太正确,console.log(baseValidate('name', person)) 为什么会输出 isBomProperty: true,这是因为window 对象中也有 name 属性,所以 name 也被认为是 BOM 的属性。

basevalidate.js 源码如下,由于博客不会实时更新,还请大家以 GitHub 源码为准。

/*
 * Validate JavaScript data type.
 *
 * github: https://github.com/stone0090/base-validate
 * author: stone, http://shijiajie.com/about
 */

(function(window) {

    var getFuncName = function(func) {
        var funcName = String(func);
        if (funcName.indexOf('function') > -1)
            return funcName.replace(/^\s*function\s+(.+)\((\s\S)+$/, '$1');
        return func;
    };

    var validate = {

        // 检测「字符串」
        isString: function(value) {
            return typeof value === 'string';
        },

        // 检测「数字」
        isNumber: function(value) {
            return typeof value === 'number';
        },

        // 检测「布尔值」
        isBoolean: function(value) {
            return typeof value === 'boolean';
        },

        // 检测「undefined」
        isUndefined: function(value) {
            return typeof value === 'undefined';
        },

        // 检测「null」
        isNull: function(value) {
            return value === null;
        },

        // 检测「对象」
        isObject: function(value) {
            return typeof value === 'object'  value instanceof Object;
        },

        // 检测「实例和对象的关系」
        instanceOf: function(value, object) {
            return typeof value === 'object' && typeof object === 'function' && value instanceof object;
        },

        // 检测「函数」
        isFunction: function(value) {
            return typeof value === 'function';
        },

        // 检测「数组」
        isArray: function(value) {
            if (typeof Array.isArray === 'function')
                return Array.isArray(value);
            else
                return Object.prototype.toString.call(value) === '[object Array]';
        },

        // 检测「属性,包含原型链中的属性」
        isProperty: function(value, object) {
            return typeof object === 'object' && getFuncName(value) in object;
        },

        // 检测「实例属性,不包含原型链中的属性」
        isOwnProperty: function(value, object) {
            return typeof object === 'object' && 'hasOwnProperty' in object && object.hasOwnProperty(getFuncName(value));
        },

        // 检测「DOM 属性」
        isDomProperty: function(value) {
            return getFuncName(value) in window.document;
        },

        // 检测「BOM 属性」
        isBomProperty: function(value) {
            return getFuncName(value) in window;
        },

        // 检测「假值」
        isEmpty: function(value) {
            if (this.isFunction(value))
                return false;

            if (this.isUndefined(value))
                return true;

            if (this.isString(value) && value.replace(/(^\s*)(\s*$)/g, '').length === 0)
                return true;

            if (this.isBoolean(value) && !value)
                return true;

            if (this.isNumber(value) && (value === 0  isNaN(value)))
                return true;

            if (this.isObject(value)) {
                if (value === null  value.length === 0)
                    return true;

                for (var i in value) {
                    if (value.hasOwnProperty(i))
                        return false;
                }
                return true;
            }

            return false;
        },

        // 检测全部
        validateAll: function(value, object) {
            var result = {};
            if (this.isString(value, object)) result.isString = true;
            if (this.isNumber(value, object)) result.isNumber = true;
            if (this.isBoolean(value, object)) result.isBoolean = true;
            if (this.isUndefined(value, object)) result.isUndefined = true;
            if (this.isNull(value, object)) result.isNull = true;
            if (this.isObject(value, object)) result.isObject = true;
            if (this.instanceOf(value, object)) result.instanceOf = true;
            if (this.isFunction(value, object)) result.isFunction = true;
            if (this.isArray(value, object)) result.isArray = true;
            if (this.isProperty(value, object)) result.isProperty = true;
            if (this.isOwnProperty(value, object)) result.isOwnProperty = true;
            if (this.isDomProperty(value, object)) result.isDomProperty = true;
            if (this.isBomProperty(value, object)) result.isBomProperty = true;
            if (this.isEmpty(value, object)) result.isEmpty = true;
            return result;
        }

    };

    var baseValidate = function(value, object) {
        return validate.validateAll(value, object)
    };

    for (var v in validate) {
        if (validate.isOwnProperty(v, validate))
            baseValidate[v] = validate[v];
    }

    window.baseValidate = window.baseValidate  baseValidate;

}(window));
打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP