jquery注册验证插件Ideal Forms

jquery注册验证插件Ideal Forms
 点击预览  点击下载

特点

当场验证

完全自适应(适应的容器,没有CSS媒体查询需要)

键盘支持

自定义复选框,文件输入

自定义无缝jQuery UI的日期选择器

支持第三方扩展

本土化

设置

加载最新的jQuery库

加载CSS / jquery.idealforms.css样式表

加载JS /输出/ jquery.idealforms.min.js插件

要本地化的理想形式加载从相应的文件js/i18n。

将图像加入文件夹中,并确保路径是正确的

为了更好的IE浏览器的支持,取代打开HTML标签带:

  1. <!--[if IE 9]> <html> <![endif]--> 
  2. <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> 

选项

  1. defaults  =  {  
  2.   field :  '.field' ,  
  3.   error :  '.error' ,  
  4.   iconHtml :  '<i/>' ,  
  5.   iconClass :  'icon' ,  
  6.   invalidClass :  'invalid' ,  
  7.   validClass :  'valid' ,  
  8.   silentLoad :  true ,  
  9.   onValidate :  $ . noop ,  
  10.   onSubmit :  $ . noop ,  
  11.   rules :  {},  
  12.   errors :  {}  

field

现场容器的自定义标记。

error

自定义标记错误的容器。

iconHtml

作为图标使用该元素。设置为false 禁用图标。

iconClass

该图标类的元素。

invalidClass

将添加到无效字段的类。

validClass

这个类将被添加到有效的领域。

silentLoad

初始化的形式默默,否则焦点的第一个无效的输入。

onValidate(input, rule, valid)

回调是一个输入的尝试来验证之后运行。

input:输入被验证

rule:对输入进行验证的规则。

valid:布尔值。它是否验证?

例如:

  1. $('form').idealforms({ 
  2.   onSubmit: function(invalid, e) { 
  3.     e.preventDefault(); 
  4.     if (invalid) { 
  5.       alert(invalid +' fields!'); 
  6.     } else { 
  7.       $.post('save.php'this.$form.serialize(), function(response) {   
  8.         // do something with response 
  9.       }, 'json'); 
  10.     }     
  11.   } 
  12. }); 

标记

您可以快速使用的理想形式“默认标记开始:

  1. <form novalidate autocomplete="off" action="/" method="post"> 
  2.   <!-- Text --> 
  3.   <div> 
  4.     <label>Username:</label> 
  5.     <input name="username" type="text"> 
  6.     <span></span> 
  7.   </div> 
  8.   <!-- File --> 
  9.   <div> 
  10.     <label>Picture:</label> 
  11.     <input id="picture" name="picture" type="file" multiple> 
  12.     <span></span> 
  13.   </div> 
  14.   <!-- Radio --> 
  15.   <div> 
  16.     <label>Sex:</label> 
  17.     <p> 
  18.       <label><input name="sex" type="radio" value="male">Male</label> 
  19.       <label><input name="sex" type="radio" value="female">Female</label> 
  20.     </p> 
  21.     <span></span> 
  22.   </div> 
  23.   <!-- Checkbox --> 
  24.   <div> 
  25.     <label>Hobbies:</label> 
  26.     <p> 
  27.       <label><input name="hobbies[]" type="checkbox" value="football">Football</label> 
  28.       <label><input name="hobbies[]" type="checkbox" value="basketball">Basketball</label> 
  29.       <label><input name="hobbies[]" type="checkbox" value="dancing">Dancing</label> 
  30.     </p> 
  31.     <span></span> 
  32.   </div> 
  33.   <!-- Select --> 
  34.   <div> 
  35.     <label>Options:</label> 
  36.     <select name="options"> 
  37.       <option value="default">&ndash; Select an option &ndash;</option> 
  38.       <option value="1">One</option> 
  39.       <option value="2">Two</option> 
  40.     </select> 
  41.     <span></span> 
  42.   </div> 
  43.   <!-- Textarea --> 
  44.   <div> 
  45.     <label>Comments:</label> 
  46.     <textarea name="comments" cols="30" rows="10"></textarea> 
  47.     <span></span> 
  48.   </div> 
  49.   <!-- Button --> 
  50.   <button type="submit">Submit</button> 
  51. </form> 

标记与规则

您可以通过添加规则来标记,使用构建简单形式的数据idealforms -规则属性:

  1. <form novalidate autocomplete="off" action="/" method="post"> 
  2.   <!-- Single --> 
  3.   <div> 
  4.     <label>Username:</label> 
  5.     <input name="username" type="text" data-idealforms-rules="required username"> 
  6.     <span></span> 
  7.   </div> 
  8.   <!-- Group 
  9.   On inputs that share the same name, 
  10.   you only need to add the rules on the first one --> 
  11.   <div> 
  12.     <label>Hobbies:</label> 
  13.     <p> 
  14.       <label><input name="group[]" type="checkbox" value="A" data-idealforms-rules="minoption:1 maxoption:2">A</label> 
  15.       <label><input name="group[]" type="checkbox" value="B">B</label> 
  16.       <label><input name="group[]" type="checkbox" value="C">C</label> 
  17.     </p> 
  18.     <span></span> 
  19.   </div> 
  20. </form> 

转载请注明:代码家园 » jquery注册验证插件Ideal Forms

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)