前端表单验证逻辑实现-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoya_syt/article/details/101073729

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">

	//var rules = [{ required: 10, message: '请填写数据' }, { minLength: 100, message: '数据不能超过多少' }]
    function isEmpty(obj) {
        if (typeof obj === 'undefined' || obj === null || obj === '' || JSON.stringify(obj) === '{}' || JSON.stringify(obj) === '[]') {
            return true
        }
        return false
    }
    function isNumber(data) {
        return typeof data === 'number' && !isNaN(data)
    }
    function isString(data) {
        return typeof data === 'string'
    }
    function _validateMethod() {
        const me = this
        return {
            required(data) {
                return !me.isEmpty(data)
            },
            minLength(data, min, isClose = false) {
                if (me.isNumber(data) || me.isString(data)) {
                    return isClose ? String(data).length >= min : String(data).length > min
                }
                return null
            }
        }
    }
    var methods = this._validateMethod();


    var rules = {
        region: [
            { required: true, message: '请输入数据' },
            { minLength: 3, message: '值不得大于10小于3' }
        ],
        date1: [
            { required: true, message: '请选择日期' }
        ]
    }

    function tests() {
        var strs = ['', '']
        bbq:
        for (var r = 0; r < Object.keys(rules).length; r++) {
            var name = Object.keys(rules)[r]
            objectName = rules[name]
            ccc:
            for (var j = 0; j < objectName.length; j++) {
                var ruleNameList = objectName[j]
                ddd:
                for (var n = 0; n < Object.keys(ruleNameList).length; n++) {
                    var ruleName = Object.keys(ruleNameList)[n]
                    if (ruleName != 'message') {

                        if (!methods[ruleName](strs[r], ruleNameList[ruleName])) {
                            console.log(ruleNameList['message'])
                            break ccc;
                        } else {

                        }

                    }

                }
            }
        }
    }
    tests()

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

打印出来样式：