手把手教你自己写一个js表单验证框架的方法

在表单程序中，在页面上需要很多的Js代码来验证表单，每一个field是否必须填写，是否 只能是数字，是否需要ajax到远程验证,blablabla。 如果一个一个单独写势必非常的繁琐，所以我们的第一个目标就是构建一个类似DSL的东西， 用表述的语句而非控制语句来实现验证。 其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交，但是单独验证会因为 这个特征而增加很多额外的控制代码，且经常会验证不全面。所以第二个目标就是能够全面 的整合整个验证的过程。 最后不能是一个无法扩展的一切写死的实现，必要的扩展性还是要的。 首先，我们需要一个能够描述对字段验证的类 代码如下: function 【JavaScript表单验证框架构建详解】 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规范。传统的验证方式通常需要大量的JavaScript代码，这不仅繁琐，而且难以维护。为了提高效率和可扩展性，我们可以构建一个自定义的JS表单验证框架。本文将手把手教你如何一步步实现这样一个框架。 我们的目标是创建一个描述字段验证的类`Field`。`Field`类包含了与验证相关的属性和方法： ```javascript function Field(params) { this.field_id = params.fid; this.validators = params.val; this.on_suc = params.suc; this.on_error = params.err; this.checked = false; } ``` 这里的`Field`类包含了字段ID、验证器数组、验证成功和失败的回调事件以及一个标记验证状态的布尔值。 接着，我们为`Field`类添加`validate`方法，该方法遍历所有验证器并执行验证： ```javascript Field.prototype.validate = function() { for (var item in this.validators) { this.set_callback(this.validators[item]); if (!this.validators[item].validate(this.data())) { break; } } } ``` `validate`方法调用了`set_callback`，用于给每个验证器设置成功和失败的回调函数，以便在验证结果出来后执行相应操作： ```javascript Field.prototype.set_callback = function(val) { var self = this; val.on_suc = function() { self.checked = true; self.on_suc(val.tips); } val.on_error = function() { self.checked = false; self.on_error(val.tips); } } ``` 同时，`Field`类还包括了一个`data`方法，用于获取字段的值： ```javascript Field.prototype.data = function() { return document.getElementById(this.field_id).value; } ``` 验证器（Validator）是执行实际验证的核心组件。我们可以定义多种类型的验证器，如长度验证`Len_val`、正则表达式验证`Exp_val`等。例如： ```javascript // 长度验证 function Len_val(min_l, max_l, tip) { this.min_v = min_l; this.max_v = max_l; this.tips = tip; this.on_suc = null; this.on_error = null; } Len_val.prototype.validate = function(fd) { if (fd.length < this.min_v || fd.length > this.max_v) { this.on_error(); return false; } this.on_suc(); return true; } // 正则表达式验证 function Exp_val(expression, tip) { this.exps = expression; this.tips = tip; this.on_suc = null; this.on_error = null; } Exp_val.prototype.validate = function(fd) { if (!fd) { this.on_suc(); return true; } if (this.exps.test(fd)) { this.on_suc(); return true; } else { this.on_error(); return false; } } ``` 这些验证器类提供了灵活性，可以根据需求定制验证规则。例如，`Len_val`用于检查输入长度是否在指定范围内，而`Exp_val`则利用正则表达式进行更复杂的匹配。 对于更复杂的验证，如AJAX远程验证，可以创建一个`Ajax_val`类，利用jQuery或其他库发起异步请求进行验证： ```javascript function Ajax_val(url, tip) { this.url = url; this.tips = tip; this.on_suc = null; this.on_error = null; } Ajax_val.prototype.validate = function(fd) { $.ajax({ url: this.url, data: { value: fd }, type: 'POST', success: function(response) { if (response.success) { this.on_suc(); } else { this.on_error(); } }.bind(this), error: function() { this.on_error(); }.bind(this) }); } ``` 这样的设计使得框架具有良好的扩展性，可以方便地添加新的验证规则或修改现有规则，以适应不断变化的业务需求。 总结起来，创建一个JS表单验证框架的关键在于设计一个可配置、可扩展的验证模型，通过将验证逻辑封装在独立的验证器类中，并结合回调函数处理验证结果，可以极大地简化表单验证的实现和维护。同时，通过使用描述性语句而不是控制语句，可以使代码更加清晰，更易于理解和维护。