概总
其实市面上或者说网络上,有很多的表单验证插件,但是为什么又专门自己实现一遍,主要是因为,我不喜欢在项目中,过多的使用插件,使用的插件越多,代表着,你的JS代码量就越大,而切越难以维护,对于现在移动端来说,一个插件可能意味着一秒钟的页面展示时间,这总归是不好的,所以就我们自己的项目,专门实现来一些简单的插件,这样在又可以学习到东西,在自己的项目中使用,又更容易,所以就有了这个简单的插件,完成一些简单的验证。
xmsAllpass方法使用说明
-
基本介绍
函数命名:xmsAllpass
函数调用:xmsCore.xmsAllpass(obj,inputs);
库方法调用:$(obj).xmsAllpass(inputs);
参数:obj,inputs介绍,请继续向下看。
返回值:所有的都合法则返回true,否则返回false。
-
基本架构
该插件是基于jQuery/Zepto实现的,所以在使用时,请确认已经引入了jQuery文件。
方便起见,也可以在下面的DEMO中,直接查看使用方法。
-
传入参数的介绍
参数名 默认值 相关说明 obj(必须) jQuery/Zepto对象 需要验证的输入框的父元素,该插件会验证obj子元素中,所有需要验证的input,select,textarea元素是否合法。 inputs “” 如果有该值,那么只验证该值(单个或者数组)的合法性,inputs所代表的是需要被验证的input的一个jQuery/Zepto数组列表。 -
使用注意事项
- 针对的元素包含input,select,textarea三种标签。
- 给需要验证的标签上,添加一个属性requir,不需要设置值
- 错误提示的信息,会和标签中”data-remind”的属性值有关。
- 验证正则时,是取自标签中的pattern属性中值。
- 如果需要验证数字,需要一些特殊的快捷设置,需要给标签设置
data-valid="num"
,如果需要给该标签设置最小值和最大值,那么设置data-min = "1"
和data-max = "5"
,那么该标签支持的值,是[1-5]区间的才合法。 - 具体情况,请参考后面的示例。
该插件只验证显示的标签,不验证
type = "hidden"
,display:none
等没有显示的标签。 -
使用方法–非空验证
如果一个
input
输入框,不能为空,那么可以在这个标签上,添加一个requir
属性。示例:非空验证示例
-
使用方法–数字验证
该输入框中,只支持数字,需要给标签设置三个属性:
requir
,表示该标签需要执行验证。data-valid = "num"
表示,该标签需要执行数字验证。只支持数字,其他的任何输入都不支持。如果使用数字验证,必须设置
data-valid = "num"
否则在接下来的data-min,data-max
的设置,都不会起作用。data-valid = "num"
表示,该标签需要执行数字验证。只支持数字,其他的任何输入都不支持。data-remind = "有效数字验证"
当验证不合法时,会根据该关键字,执行一些提示。示例:数字验证示例
-
使用方法–数字最小值验证
该输入框中,只支持数字,并且该数字不小于某一个固定的值。
在设置了
data-valid = "num" data-remind = "有效数字验证" requir
属性的基础上,再添加一个data-min = "5"
的设置。表示支持的最小数字是5。示例:数字验证–最小值示例
-
使用方法–数字最大值验证
该输入框中,只支持数字,并且该数字不大于某一个固定的值。
在设置了
data-valid = "num" data-remind = "有效数字验证" requir
属性的基础上,再添加一个data-max = "5"
的设置。表示支持的最大数字是5。示例:数字验证–最大值示例
-
使用方法–数字区间验证
该输入框中,只支持数字,并且该数字在某一个区间之内才合法。
综合上面的示例,需要在设置了
data-valid = "num" data-remind = "有效数字验证" requir
属性的基础上,再添加两个data-min = "1" data-max = "5"
的设置。表示支持的数字区间是[1-5]。示例:数字验证–区间合法示例
-
使用方法–正则验证
上面的空验证和数字验证,在正式的使用中,用到的情况并不会很多,有更多复杂的验证,还需要特殊处理,所以这里,添加正则验证,最强大的验证方法。
正则验证所需要设置的属性,并不多,只是在最基本的两个属性
requir data-remind
之外,再次设置一个pattern
属性即可,该属性保存着验证该标签的正则的字符串格式,具体看下面的示例:示例:数字验证–正则验证示例
-
全类别示例
前面,把单个示例的,如何验证的方法,已经一一进行了说明,那么在本篇的最后,给一个全部示例的说明,在该示例中,包含了上述验证的所有的验证。
示例:数字验证–全类别示例
没有一个插件是万能的,本插件也不是,所以有很多情况是无法很好的验证的,对于一些特殊的验证,比如时间的合法性(时间的前后顺序)等,请在需要验证的时候,自行验证处理。
-
使用方法–空验证合法验证
该类型是后续补上的,为了兼容以前的allpass方法,先举个例子,手机号的输入,可以为空,但是不为空时,就必须符合手机号的规则,所以,源代码中,这里就额外的对该部分执行了一次处理
使用该中情况,就是通过设置一些属性,设置方法为:不给标签设置
requir
属性,只给标签设置pattern
属性。看下面的示例:示例:空+正则验证示例
致谢
这里没有总结,只有致谢,感谢您的查看,如果您发现文中有不当的地方,请指教,非常感谢。