Validin是一个轻量级、易于使用的jQuery插件，用于使用正则表达式验证各种类型的表单字段。

内置验证规则：

• 阿尔法：仅限字母
• 字母数字：字母和数字
• 字母空间：字母
• 字母_日期：字母、下划线和连字符
• 字母数字日期：字母、数字、下划线和连字符
• 数字：有效整数
• 十进制的：有效编号
• 名称：有效名称
• 电子邮件：有效的电子邮件地址
• url：有效URL
• 电话：有效电话号码
• 拉链：有效的邮政编码
• 信用卡：有效信用卡号
• 最小值：至少%i
• ma：不超过%i
• 最小长度：至少有%i个字符长
• 最大长度：长度不超过%i个字符
• 火柴：这些值必须匹配

如何使用它:

1.要使用此插件，您首先需要在加载jQuery库后加载JavaScript文件“validin.js”：

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="validin.js"></script>

2.调用目标表单元素上的函数，jQuery Validatin就可以使用了。

$('form').validin();

3.添加validate=“规则名称”属性到表单字段，如下所示：

<form>
  <input required>
  <input validate="alpha">
  <input validate="alpha_num">
  <input validate="alpha_space">
  <input validate="alpha_dash">
  <input validate="alpha_num_dash">
  <input validate="number">
  <input validate="decimal">
  <input validate="name">
  <input validate="email">
  <input validate="url">
  <input validate="phone">
  <input validate="zip">
  <input validate="creditcard">
  <input validate="min:5">
  <input validate="max:5">
  <input validate="min_length:5">
  <input validate="max_length:5">
  <input class="must_match">
  <input validate="match:.must_match">
  <input type="submit">
</form>

3.您也可以使用regex定义自己的验证规则。

<input validate="regex:/[0-9a-z]{1,3}-\d*/i">

4.在无效时设置错误消息和表单字段的样式。

input.invalid { border-color: #ff7a7a; }
 
.validation_error {
  margin: .4em 0 1em;
  color: #ff7a7a;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .15em;
}

5.自定义默认验证规则和错误消息。

$('form').validin({
  validation_tests: {
    'alpha': {
      'regex': /[a-zA-Z]*/,
      'error_message': "This can only contain only letters"
    },
    'alpha_num': {
      'regex':  /[A-Z0-9]*/i,
      'error_message': "This can only contain letters and numbers"
    },
    'alpha_space': {
      'regex': /[A-Z ]*/i,
      'error_message': "This can only contain letters"
    },
    'alpha_dash': {
      'regex': /[A-Z\.\-_]*/i,
      'error_message': "This can only contain letters, underscores and hyphens"
    },
    'alpha_num_dash': {
      'regex': /[A-Z0-9\.\-_]*/i,
      'error_message': "This can only contain letters, numbers, underscores and hyphens"
    },
    'number': {
      'regex': /[\d]*/,
      'error_message': "This needs to be a valid whole number"
    },
    'decimal': {
      'regex': /(\d*\.?\d*)/,
      'error_message': "This needs to be a valid number"
    },
    'name': {
      'regex': /[A-Z\.\-'\s]*/i,
      'error_message': "This needs to be a valid name"
    },
    'email': {
      'regex': /[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}/i,
      'error_message': "This needs to be a valid email address"
    },
    'url': {
      'regex': /(https?|ftp):\/\/[^\s\/$.?#].[^\s]*/i,
      'error_message': "This needs to be a valid URL"
    },
    'phone': {
      'regex': /(?=.*?\d{3}( |-|.)?\d{4})((?:\+?(?:1)(?:\1|\s*?))?(?:(?:\d{3}\s*?)|(?:\((?:\d{3})\)\s*?))\1?(?:\d{3})\1?(?:\d{4})(?:\s*?(?:#|(?:ext\.?))(?:\d{1,5}))?)\b/i,
      'error_message': "This needs to be a valid phone number"
    },
    'zip': {
      'regex': /\d{5}(?:-?\d{4})?/i,
      'error_message': "This needs to be a valid zip code"
    },
    'creditcard': {
      'regex': /(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})/i,
      'error_message': "This needs to be a valid credit card number"
    },
    'regex': {
      'regex': /.*/i,
      'error_message': "This is not a valid value"
    },
    'min': {
      'regex': /.*/i,
      'error_message': "This number needs to be at least %i"
    },
    'max': {
      'regex': /.*/i,
      'error_message': "This number needs to no more than %i"
    },
    'min_length': {
      'regex': /.*/i,
      'error_message': "This needs to be at least %i characters long"
    },
    'max_length': {
      'regex': /.*/i,
      'error_message': "This needs to be no more than %i characters long"
    },
    'match': {
      'regex': /.*/i,
      'error_message': "These values have to match"
    }
  },
});

6.更多具有默认值的配置选项。

$('form').validin({
 
  // delay time in milliseconds
  feedback_delay: 700,
 
  // default CSS classes
  invalid_input_class: 'invalid',
  error_message_class: "validation_error",
 
  // default error messages
  form_error_message: "Please fix any errors in the form",
  required_fields_initial_error_message: "Please fill in all required fields",
  required_field_error_message: "This field is required",
 
  // adjust margins on the validation error messages
  override_input_margins: true,
 
  // additional validate rules
  tests: {},
 
  // callback
  onValidateInput: function() {}
  
});

更新日志：

2022-03-01

• 改进了文本区域处理（允许回车），限定了更多变量的范围，取代了$jQuery引用

2022-02-28

• 对不太常见的输入进行了一些可靠性改进和小更新

2021-03-28

• 修复了用户在输入字段中按Enter键时强制提交的错误

2019-01-01

• 分离默认选项，更改函数名称以对名称空间进行排序，修复代码中的错误，添加徽标svg

2017-12-14

• 添加了对复选框和单选类型输入的支持（使用新的getValue（）函数），添加了错误消息语言作为可配置选项，更新了自述文件和演示页面内容

2017-09-16

• 修复了用户可以使用“回车”键提交无效表单的问题，更好地处理一个页面上的多个表单，“匹配”元素现在在值不相同时检查并标记两个字段，如果存在所需字段，提交键会给出不启用的理由，显着更新了演示页面

预览截图

jQuery 最小表单字段验证插件 Validin