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

所属分类:输入-验证

 28318  283  查看评论 (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_-])+@([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代码,完全做到一劳永逸。

相关插件-验证

移动端拼图验证登录

移动端拼图验证登录界面(手机端,不兼容pc)
  验证
 31843  283

jQuery注册表单验证

jQuery常见注册表单 包括表单验证、生日选择、邮箱自动补全、密码可见性与重复密码的验证等
  验证
 54349  506

大气简洁的登录注册特效

大气简洁的登录注册特效带注册验证
  验证
 58826  563

jQueryCSS3分步骤注册表单切换动画在线演示

jQueryCSS3分步骤注册表单切换动画在线演示
  验证
 37295  419

讨论这个项目(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

    希望这个能用。。。。。

    回复
    zpch861212@163.com 0
    2017/5/19 16:13:07

    挺好用的 非常感谢

    回复
    无极快印网管 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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复