簡單的前端校驗框架實現

時間 2019-11-24

標籤簡單前端校驗框架實現简体版

原文原文鏈接

前端表單在提交前老是要進行校驗的，而這些工做是繁瑣的，因此這兒寫了一個簡單的校驗框架，代碼實現以下：html

function Validate(id) {
    if (arguments.length != 1) {
        throw new Error("Argument is required");
    }
    this.errors = [];
    this.id = id;
    this.container = $("#" + id);
}

Validate.prototype = {
    constructor: Validate,
    rules: [
        "required"
    ],
    rulesCallback: {
        messages: {
            required: 'The %s field is required.'
        },
        required: function (control) {
            var value = control.value;
            if ((control.type === "checkbox") || (control.type === "radio")) {
                var controls = $("input[name='" + control.name + "']");
                for (var i = 0; i < controls.length; i++) {
                    if (controls[i].checked === true) {
                        return "";
                    }
                }
            }
            else if (value && value.length > 0) {
                return "";
            }
            return this.messages.required.replace("%s", control.name);
        }
    },
    validate: function () {
        this.errors = [];
        var controls = this.container.find(".validate");
        if (controls != null) {
            for (var i = 0; i < controls.length; i++) {
                for (var j = 0; j < this.rules.length; j++) {
                    if (controls.hasClass(this.rules[j])) {
                        var error = this.rulesCallback[this.rules[j]](controls[i]);
                        if (error.length > 0) {
                            this.errors.push(error);
                        }
                    }
                }
            }
        }
        return this.errors.length == 0 ? true : false;
    }
}

如今這兒只是實現了required的校驗，若是要添加其餘校驗能夠按照以下步驟前端

rules : [
    "required"
],
rulesCallback : {
    messages : {
        required: 'The %s field is required.'
    },
    required : function(control){
        var value = control.value;
        if ((control.type === "checkbox") || (control.type === "radio")) {
            var controls = $("input[name='" + control.name + "']");
            for(var i=0; i<controls.length; i++){
                if(controls[i].checked === true){
                    return "";
                }
            }
        }
        else if(value && value.length > 0){
            return "";
        }
        return this.messages.required.replace("%s", control.name);
    }
},

1. 首先在rules中添加校驗的類型；jquery

2. 在rulesCallback的message中添加校驗錯誤時的提示文本，其中%s是佔位符，會使用表單元素的name值來替換。提示文本的名字要和校驗類型相同；框架

3. 在rulesCallback中添加一個和校驗類型相同的方法，並在方法中完成對某一控件的校驗實現；ui

經過以上步驟就添加好了校驗規則，而後看一下使用，代碼以下：this

<!DOCTYPE>
<html>
<head>
    <title>demo</title>
</head>
<body>
<div id="form">
    alias<input class="validate required" name="alias"  type="text"/><br/>
    Content<input class="validate required" name="content" type="text" /><br/>
    public<input class="validate required" name="publiz" type="radio" />Private
    <input class="validate required" name="publiz" type="radio" />Public<br/>
    <button id="btnOK">OK</button>
</div>
<script src="jquery-3.2.1.js"></script>
<script src="validate.js"></script>
<script>
$(function(){
    var val = new Validate("form");
    $("#btnOK").click(function(){
        val.validate();
        alert(val.errors);
    });
});
</script>
</body>
</html>

由於該框架實在jquery下工做的，因此先要導入jquery庫，而後根據包含表單控件的元素的id屬性來建立一個校驗對象，這樣就能夠在後面使用，如上在點擊ok按鈕後開始進行校驗，經過val.valdate()方法返回是不是false，就能夠知道是否有表單元素的值不合法，若是有不合法的能夠經過val.errors來得到提示語句。spa

其餘規則的校驗會在後面添加。prototype

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。