前端表單在提交前總是要進行校驗的，而這些工作是繁瑣的，所以這兒寫了一個簡單的校驗框架，代碼實現如下：
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中添加校驗的類型；
2. 在rulesCallback的message中添加校驗錯誤時的提示文本，其中%s是占位符，會使用表單元素的name值來替換。提示文本的名字要和校驗類型相同；
3. 在rulesCallback中添加一個和校驗類型相同的方法，並在方法中完成對某一控件的校驗實現；
通過以上步驟就添加好了校驗規則，然后看一下使用，代碼如下：
<!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來獲得提示語句。
其他規則的校驗會在后面添加。