Prototype-表单管理

介绍

Prototype-表单管理是一个基于JavaScript框架Prototype的表单管理插件，它提供了一系列方便的表单验证和处理方法，使得表单处理变得更加简单和高效。该插件兼容各种常见浏览器，使用简单方便。

特点

1. 支持多种常用表单验证，包括邮箱、手机号码、用户名等。
2. 支持自定义表单验证规则，方便根据项目需求进行定制。
3. 支持简单的表单处理操作，例如获取表单值、清除表单、禁用表单等。
4. 支持通过Ajax提交表单，避免页面刷新。
5. 支持快速生成验证错误提示信息，并可以自定义展示形式。

安装

直接下载或引入prototype-form.js即可使用。

<script type="text/javascript" src="prototype-form.js"></script>

使用

表单验证

// 创建表单验证器
var validator = new FormValidator('myForm', [
  { name: 'username', rules: 'required' },
  { name: 'email', rules: 'valid_email' },
  { name: 'phone', rules: 'valid_phone' }
]);

// 执行表单验证
if (validator.validate()) {
  // 验证通过
} else {
  // 验证未通过，获取错误信息
  var errors = validator.getErrors();
  // 显示错误提示信息
  alert(errors.join('; '));
}

表单验证器的创建需要传入两个参数，分别为表单ID和验证规则，验证规则是一个数组，每个元素都是一个对象，包含两个属性，name是表单元素名称，rules是验证规则，规则之间用|分隔。

基于这些内置规则，可以验证邮箱、手机号码、用户名、密码、日期等常见表单。

如果需要添加自定义规则，可以使用Validator.addRule方法添加。

表单操作

表单操作方法都封装在Form对象中，使用前需要先创建表单对象。

// 创建表单对象
var form = new Form('myForm');

// 获取表单值
var values = form.getValues();

// 清空表单
form.clear();

// 禁用或启用表单
form.toggleDisable(true);

// 提交表单
form.submit({
  url: 'submit.php',
  onSuccess: function(response) {
    alert('表单提交成功！');
  },
  onFailure: function(response) {
    alert('表单提交失败！');
  }
});

这些方法可以方便地处理表单操作，避免重复的页面刷新。

错误提示信息

验证器默认使用AlertHandler进行错误提示，可以通过Validator.setErrorHandler方法更改错误提示处理函数，或通过Validator.setAlertMessage方法设置全局的错误提示信息。

// 自定义错误提示信息
Validator.setAlertMessage({
  required: '不能为空',
  valid_phone: '请输入正确的手机号码'
});

// 自定义错误提示处理函数
Validator.setErrorHandler(function(errors) {
  alert(errors.join('\n'));
});

// 创建验证器
var validator = new FormValidator('myForm', [
  { name: 'username', rules: 'required' },
  { name: 'phone', rules: 'valid_phone' }
]);

// 验证
if (validator.validate()) {
  // 验证通过
} else {
  // 验证未通过，使用自定义错误提示处理函数
  validator.handleError();
}

总结

Prototype-表单管理插件提供了方便的表单验证和操作方法，可以大大提高表单处理的效率。它不仅支持常见的表单验证规则，而且可以自定义验证规则和错误提示信息，是一个非常实用的表单处理工具。