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

所属分类:输入-验证

 27721  273  查看评论 (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代码,完全做到一劳永逸。

相关插件-验证

基于ajax的登录效果

这是一个机遇ajax的登录效果,登陆过程无跳转。
  验证
 44256  363

修改绑定手机号Tab切换样式时间线样式

时间线形式切换修改绑定手机号,第一步第二步第三步
  验证
 25362  367

js正则表达式(原创)

js正则表达式表单验证,多种常用验证方式
  验证
 19884  286

Modern Fms 表单验证插件

Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 8162  119

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复