表单验证

    今天写一篇关于表单验证的文章

    在此之前可能大多数人的表单验证都是很直接的获取表单中输入框的值来进行正则验证，判断输入值是否正确，从而提交表单。

    这次我们打算换一个思路，我们判断条件和输入错误时提示的文字用自定义属性的方式添加到input内，例如这样

    我们用自定义属性的属性值来控制判断条件，例如在verdate=“req”时，不能为空，如果为空会显示“必填”二字。

    我们将表单的验证简单封装成了一个组件，可以随时调用，增强了复用性，当我们点击提交时触发的judge()方法会调用组件

只要获取到要提交的form表单即可

    而且也方便我们修改，如果我们打算修改判断条件只需要改变verdate中的属性值，修改提示文字只需要改变tit中的属性值。

    下面介绍js组件中的主要内容

这个就是组件中的主要方法

    将获取到form表单作为参数传到mores方法中，逐步讲解每个变量的作用

    首先声明了变量count，这个变量的作用是在出现输入验证失败的情况下自增，如果最后提交时，count有值说明还输入并未全部通过，反之亦然，为零时说明输入正确可以提交表单。

    下面的循环是为了获取到form表单中输入框的数量，从而获取到每个输入框

    接着就是获取到每个input内的自定义属性，我这里使用的是jq的方法，所以要在html页面中先引入jq.文件，如果是原生js可以改为getAttribute(获取属性；setAttribute是设置属性)，对获取到的字符串进行以逗号形式切割为数组。

    最后这个循环是针对多种情况进行判断，可以自由增添，我们表单验证的时候可能会需要到很多种稀奇古怪验证方式，这里就是针对这种情况，如果我们只是针对value值判断的话，就执行最下面的只将相应的节点和value传进去即可，如果还有其他判断，例如，需要定义电话号码的长度，这个也在自定义属性中添加了，isMinNum=“7”说明这个就是他需要的最小长度（当然了，电话号码肯定不会是七位数，举个列子），我们利用拼接的方式将isMin+Num来进行判断，当然如果有其他的判断条件会执行第一种方式，将节点，条件和value都传进去。

    这里其实最重要的就是call()，前端当中，call()和apply()的区别也是一处问题所在，在这里就不详述了，简单来说，call就是调用一个对象的一个方法，还可以接受多个参数

这是几个简单的正则判断，如果需要增加判断方式，按这个格式即可

    当我们需要进行判断时，会根据循环出来的自定义属性值来进行相应的方法判断，如果输入正确则返回true，否则返回false

大致的格式就是这样

    这是刚刚写好的，应用上没什么问题，扩展性也可以，编写代码时尽可能让人简单易懂，我可能哪里说得不对或者不清楚，或者认为哪里有可以改进的地方，可以直接说出来，我虚心接受。