jQuery Form Validator表单验证

滕祯

2023-12-01

原文地址 http://www.formvalidator.net/index.html#default-validators

jQuery形式验证器是一个功能丰富的jQuery插件,便于验证用户输入,同时保持你的HTML标记干净从javascript代码。尽管这个插件有一个广泛的验证函数的设计要求尽可能少的带宽。这是通过分组验证功能在“模块”,使程序员只加载

这些功能需要验证一个特定的表单。

这个插件可以通过cdnjs以及bower和github下载

基本示例

    <form action="/registration" method="POST">
    <p>
    Name (4 characters minimum):
    <input name="user" data-validation="length" data-validation-length="min4">
    </p>
    <p>
    Year (yyyy-mm-dd):
    <input name="birth" data-validation="date" data-validation-format="yyyy-mm-dd">
    </p>
    <p>
    Website:
    <input name="website" data-validation="url">
    </p>
    <p>
    <input type="submit">
    </p>
    </form>
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
    <script> $.validate(); </script>
    ...

长度(必填)

<!-- An answer has to be given -->
<input data-validation="required" type="text">

<!-- Max 100 characters -->
<input data-validation="length" data-validation-length="max100" type="text">

<!-- Minimum 20 characters -->
<input data-validation="length" data-validation-length="min20" type="text">

<!-- No less than 50 characters and no more than 200 characters -->
<input data-validation="length" data-validation-length="50-200" type="text">

数字

<!-- Any numerical value -->
<input data-validation="number" type="text">

<!-- Only allowing float values -->
<input data-validation="number" data-validation-allowing="float" type="text">

<!-- Allowing float values and negative values -->
<input data-validation="number" data-validation-allowing="float,negative" type="text">

<!-- Validate float number with comma separated decimals -->
<input data-validation="number" data-validation-allowing="float" 
		 data-validation-decimal-separator="," type="text">

<!-- Only allowing numbers from 1 to 100 -->
<input data-validation="number" data-validation-allowing="range[1;100]" type="text">

<!-- Only allowing numbers from -50 to 30 -->
<input data-validation="number" data-validation-allowing="range[-50;30],negative" type="text">

<!-- Only allowing numbers from 0.05 to 0.5 -->
<input data-validation="number" data-validation-allowing="range[0.05;0.5],float" type="text"><input data-validation="email" type="text">

URL:s

<input data-validation="url" type="text">

Date

<!-- Validate date formatted yyyy-mm-dd -->
<input data-validation="date" type="text">

<!-- Validate date formatted dd/mm/yyyy -->
<input data-validation="date" data-validation-format="dd/mm/yyyy" type="text">







字母数字的

<!-- This input requires an answer that contains only letters a-z and numbers -->
<input data-validation="alphanumeric" type="text">

<!-- This input requires the same as the one above but it also allows hyphen and underscore -->
<input data-validation="alphanumeric" data-validation-allowing="-_" type="text">


复选框组　　　　

验证数量的复选框组(同名)检查,使用min,范围。只有第一个复选框元素组需要验证的属性。



<!-- Require checkboxes in this group, min1 -->
<input name="newsletters[]" data-validation="checkbox_group" data-validation-qty="min1" type="checkbox">

<!-- Require checkboxes in this group, max3 -->
<input name="newsletters[]" data-validation="checkbox_group" data-validation-qty="max3" type="checkbox">

<!-- Require checkboxes in this group, min1, max4 -->
<input name="newsletters[]" data-validation="checkbox_group" data-validation-qty="1-4" type="checkbox">


如果你的复选框组是由一个服务器端脚本和你不想验证属性添加到每个输入元素,您可以使用此javascript代码片段在调用validatorLoad之前()函数




<script>
$("[name='newsletters[]']:eq(0)")
  .valAttr('','validate_checkbox_group')
  .valAttr('qty','1-2')
  .valAttr('error-msg','chose 1, max 2');
</script>


正则表达式


<!-- This input would only allow lowercase letters a-z -->
<input data-validation="custom" data-validation-regexp="^([a-z]+)$" type="text">


字符计数


<p>
  History (<span id="maxlength">50</span> characters left)
  <textarea rows="3" id="area"></textarea>
</p>
<script>
  $('#area').restrictLength($('#maxlength'));
</script>




可选验证

<!-- This input will only be validated if a value is given -->
<input data-validation="url" data-validation-optional="true" type="text">

<!-- This input will only be validated if the checkbox is checked -->
<input data-validation="url" data-validation-if-checked="some-checkbox" type="text">
<input name="some-checkbox" value="1" type="checkbox">显示帮助文本

可能每个输入旁边显示帮助信息。当输入的文本将褪色关注并输入失去焦点时淡出。帮助文本的容器类form-help。如果你不想要这个功能你可以阅读安装指南如何禁用它。

<form action="" id="some-form">
  <p>
    <strong>Why not?</strong>
    <input name="why" data-validation-help="Please give us some more information">
  </p>
  ...
</form>


验证时输入模糊

默认情况下每个输入将立即成为验证时输入失去焦点。如果你不想要这个功能你可以阅读安装指南如何禁用它。

信息输入建议 


有两种方法你可以给建议用户,用户类型。
1)data-suggestions使用属性



<p>
  What's your favorite color?
  <input name="color" data-suggestions="White, Green, Blue, Black, Brown">
</p>
...
</form>


2)使用$ .formUtils.suggest()




<script>
  var largeArray = [];
  largeArray.push('Something');
  largeArray.push('Something else');
  ...

  $.formUtils.suggest( $('#the-input'), largeArray );
</script>


示例表单


<form action="" id="the-form">
<p>
E-mail
<input name="..." data-validation="email" data-validation-help="Som help info...">
</p>
<p>
URL
<input name="..." data-validation="url">
</p>
<p>
Only allows alphanumeric characters and hyphen and underscore
<input name="..." data-validation="alphanumeric" data-validation-allowing="-_">
</p>
<p>
Only lowercase letters a-z (regexp)
<input name="..." data-validation="custom" data-validation-regexp="^([a-z]+)$">
</p>
<p>
Minimum 5 chars
<input name="..." data-validation="length" data-validation-length="min5">
</p>
<p>
Maximum 5 chars
<input name="..." data-validation="length" data-validation-length="max5">
</p>
<p>
Between 3-5 chars
<input name="..." data-validation="length" data-validation-length="3-5">
</p>
<p>
What's your favorite color?
<input name="..." data-suggestions="White, Green, Blue, Black, Brown">
</p>
<p>
Validate e-mail but only if an answer is given
<input name="..." data-validation="email" data-validation-optional="true">
</p>
<p>
Validate e-mail but only if checkbox is checked
<input name="checkit" type="checkbox">
<input name="..." data-validation="email" data-validation-if-checked="checkit">
</p>
<p>
Restrict length
<span id="max-length-element">100</span> chars left
<textarea id="the-textarea" name="text"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$.validate();
$('#my-textarea').restrictLength( $('#max-length-element') );
</script>

jQuery Form Validator表单验证

相关阅读

相关文章

相关问答

相关文档