简单易懂的jQuery表单验证插件

所属分类:输入-验证

 24701  211  查看评论 (9)
分享到微信朋友圈
X
简单易懂的jQuery表单验证插件 ie兼容6

使用方法

如以下代码:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

jquery.validate.js中是验证表单数据的核心代码,提供有3中验证方式

  1. 分别为是否为空(见函数notNull(obj,validate));

  2. 与某一表单数据是否相等(见函数equalTo(obj,validate));

  3. 正则表达式判断(见函数regex(obj,validate))。

在表单input标签中,只需添加validate属性,在validate属性中添加对该表单数据的验证。

如以下代码:

<div> 用户名:
    <input type="text" name="userName" validate='[{"type":"notNull","msg":"用户名不能为空!"},{"type":"regex","reg":"^[a-zA-Z]{1}[a-zA-Z0-9]{2,9}$","msg":"用户名必须是字母开头并且不能少于3位不能多余10位"}]'/>
  </div>
  <div> 密码:
    <input type="password" name="password" validate = '[{"type":"notNull","msg":"密码不能为空!"}]' id="password"/>
  </div>
  <div> 确认密码:
    <input type="password" validate='[{"type":"notNull","msg":"确认密码不能为空!"},{"type":"equalTo","target":"#password","msg":"确认密码不一致"}]' name="confirmPassword" />
  </div>
  <div> 邮箱:
    <input type="text" name="email" validate='[{"type":"regex","reg":"^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$","msg":"邮箱不符合规范!"}]' />
  </div>
  <div> 手机号码:
    <input type="text" name="phone" validate='[{"type":"regex","reg":"^(1+[34578][0-9]{9})$","msg":"手机号码不符合规范!"}]' />
  </div>

其他类型表单数据,用户可参考以上案列结合正则表达式完成验证。无需更改jquery.validate.js代码,完全做到一劳永逸。

相关插件-验证

jQuery验证插件check.js

不提供任何提示,仅提供配置的接口,通过回调的方式来进行
  验证
 17885  167

jQuery图片滑块验证(附注释)

jQuery拖拽拼图滑块验证
  验证
 7587  81

jQuery表单提交验证verify

一整套注册验证,可直接用于实际项目中
  验证
 86791  1228

原生js表单验证(原创)

轻量级,原生js打造表单验证,易上手
  验证
 4726  69

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    无人城i 0
    2019/1/11 16:21:37
    Only丶 0
    2018/4/3 16:10:36
    直接复制是不行的,还得下载源码 回复
    偏偏 0
    2017/12/19 15:32:12

    希望这个能用。。。。。

    回复

    挺好用的 非常感谢

    回复
    无极快印网管 0
    2017/4/25 14:57:13
    Rainman 0
    2017/3/9 13:37:49
    放到本地服务器 就没用了  回复
    ?一场″ 0
    2017/3/6 16:33:46
    佰爵工艺-ben 0
    2017/1/25 11:16:02

    希望这个能用。。。。。

    回复
    温莎伟 0
    2017/1/25 10:17:21
取消回复