表单验证-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属性。

    
    

    示例:非空验证示例

  6. 使用方法–数字验证

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

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

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

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

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

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

    					
    

    示例:数字验证示例

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

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

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

    					
    

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

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

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

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

    					
    

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

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

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

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

    					
    

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

  10. 使用方法–正则验证

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

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

    					
    

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

  11. 全类别示例

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

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

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

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

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

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

    					
    

    示例:空+正则验证示例

致谢

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>