表单验证－xmsAllpass方法

概总

其实市面上或者说网络上，有很多的表单验证插件，但是为什么又专门自己实现一遍，主要是因为，我不喜欢在项目中，过多的使用插件，使用的插件越多，代表着，你的JS代码量就越大，而切越难以维护，对于现在移动端来说，一个插件可能意味着一秒钟的页面展示时间，这总归是不好的，所以就我们自己的项目，专门实现来一些简单的插件，这样在又可以学习到东西，在自己的项目中使用，又更容易，所以就有了这个简单的插件，完成一些简单的验证。

xmsAllpass方法使用说明

1. 基本介绍

   函数命名：xmsAllpass

   函数调用：xmsCore.xmsAllpass(obj,inputs);

   库方法调用：$(obj).xmsAllpass(inputs);

   参数：obj,inputs介绍，请继续向下看。

   返回值：所有的都合法则返回true，否则返回false。

2. 基本架构

   该插件是基于jQuery/Zepto实现的，所以在使用时，请确认已经引入了jQuery文件。

   方便起见，也可以在下面的DEMO中，直接查看使用方法。

3. 传入参数的介绍

   参数名	默认值	相关说明
   obj(必须)	jQuery/Zepto对象	需要验证的输入框的父元素，该插件会验证obj子元素中，所有需要验证的input，select，textarea元素是否合法。
   inputs	“”	如果有该值，那么只验证该值（单个或者数组）的合法性，inputs所代表的是需要被验证的input的一个jQuery/Zepto数组列表。

4. 使用注意事项
   1. 针对的元素包含input,select,textarea三种标签。
   2. 给需要验证的标签上，添加一个属性requir，不需要设置值
   3. 错误提示的信息，会和标签中”data-remind”的属性值有关。
   4. 验证正则时，是取自标签中的pattern属性中值。
   5. 如果需要验证数字，需要一些特殊的快捷设置，需要给标签设置data-valid="num"，如果需要给该标签设置最小值和最大值，那么设置data-min = "1"和data-max = "5"，那么该标签支持的值，是[1-5]区间的才合法。
   6. 具体情况，请参考后面的示例。

   该插件只验证显示的标签，不验证type = "hidden"，display:none等没有显示的标签。

5. 使用方法–非空验证

   如果一个input输入框，不能为空，那么可以在这个标签上，添加一个requir属性。

   
   
   	
   
   		不验证
   		
   	
   	
   
   		非空验证
   		
   	
   	Submit
   
   
   
   

   示例：非空验证示例

6. 使用方法–数字验证

   该输入框中，只支持数字，需要给标签设置三个属性：

   requir，表示该标签需要执行验证。

   data-valid = "num"表示，该标签需要执行数字验证。只支持数字，其他的任何输入都不支持。

   如果使用数字验证，必须设置data-valid = "num"否则在接下来的data-min,data-max的设置，都不会起作用。

   data-valid = "num"表示，该标签需要执行数字验证。只支持数字，其他的任何输入都不支持。

   data-remind = "有效数字验证"当验证不合法时，会根据该关键字，执行一些提示。

   					
   
   	
   
   		不验证
   		
   	
   	
   
   		有效数字验证
   		
   	
   	Submit
   
   					
   				

   示例：数字验证示例

7. 使用方法–数字最小值验证

   该输入框中，只支持数字，并且该数字不小于某一个固定的值。

   在设置了data-valid = "num" data-remind = "有效数字验证" requir属性的基础上，再添加一个data-min = "5"的设置。表示支持的最小数字是5。

   					
   
   	
   
   		不验证
   		
   	
   	
   
   		有效数字验证--输入值必须大于等于5
   		
   	
   	Submit
   
   					
   				

   示例：数字验证–最小值示例

8. 使用方法–数字最大值验证

   该输入框中，只支持数字，并且该数字不大于某一个固定的值。

   在设置了data-valid = "num" data-remind = "有效数字验证" requir属性的基础上，再添加一个data-max = "5"的设置。表示支持的最大数字是5。

   					
   
   	
   
   		不验证
   		
   	
   	
   
   		有效数字验证--输入值必须小于等于5
   		
   	
   	Submit
   
   					
   				

   示例：数字验证–最大值示例

9. 使用方法–数字区间验证

   该输入框中，只支持数字，并且该数字在某一个区间之内才合法。

   综合上面的示例，需要在设置了data-valid = "num" data-remind = "有效数字验证" requir属性的基础上，再添加两个data-min = "1" data-max = "5"的设置。表示支持的数字区间是[1-5]。

   					
   
   	
   
   		不验证
   		
   	
   	
   
   		有效数字验证--数字区间[1-5]合法。
   		
   	
   	Submit
   
   					
   				

   示例：数字验证–区间合法示例

10. 使用方法–正则验证

    上面的空验证和数字验证，在正式的使用中，用到的情况并不会很多，有更多复杂的验证，还需要特殊处理，所以这里，添加正则验证，最强大的验证方法。

    正则验证所需要设置的属性，并不多，只是在最基本的两个属性requir data-remind之外，再次设置一个pattern属性即可，该属性保存着验证该标签的正则的字符串格式，具体看下面的示例：

    					
    
    	
    
    		不验证
    		
    	
    	
    
    		正则验证(支持字符和数字)
    		
    	
    	
    
    		正则验证(手机验证)(+8613000000000和13000000000合法)
    		
    	
    	Submit
    
    					
    				

    示例：数字验证–正则验证示例

11. 全类别示例

    前面，把单个示例的，如何验证的方法，已经一一进行了说明，那么在本篇的最后，给一个全部示例的说明，在该示例中，包含了上述验证的所有的验证。

    示例：数字验证–全类别示例

    没有一个插件是万能的，本插件也不是，所以有很多情况是无法很好的验证的，对于一些特殊的验证，比如时间的合法性（时间的前后顺序）等，请在需要验证的时候，自行验证处理。

12. 使用方法–空验证合法验证

    该类型是后续补上的，为了兼容以前的allpass方法，先举个例子，手机号的输入，可以为空，但是不为空时，就必须符合手机号的规则，所以，源代码中，这里就额外的对该部分执行了一次处理

    使用该中情况，就是通过设置一些属性，设置方法为：不给标签设置requir属性，只给标签设置pattern属性。看下面的示例：

    					
    
    	
    
    		不验证
    		
    	
    	
    
    		空+正则验证
    		
    	
    	Submit
    
    					
    				

    示例：空+正则验证示例

致谢

这里没有总结，只有致谢，感谢您的查看，如果您发现文中有不当的地方，请指教，非常感谢。

本文地址：http://www.zhangyunling.com/?p=476