使用jQuery validate 验证注册表单实例演示

 更新时间:2013年03月25日 11:13:36   作者:  
Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,接下来为大家详细介绍下使用方法,感兴趣的各位可以参考下哈

Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了。rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单。

首先确定验证的目标是:
1. 必填项不能为空
2. 注册用户名必须为6-12个字符内
3. 合格的email格式
4. 密码必须为6-18个字符
5. 确认密码必须跟密码一致

ok,目标很明确了。正片开始

复制代码 代码如下:

<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$( "#regForm" ).validate({
rules: {
// 注册用户名
username: {
required: true,
minlength: 5,
maxlength: 12
},
// email
email: {
required: true,
email: true
},
// 密码
password: {
required: true,
minlength: 6,
maxlength: 18
},
// 确认密码
confirm_password: {
equalTo:"#password"
},
// 检验验证码
captcha: {
required: true,
remote: "checkCaptcha.php"
}
},
messages: {
// 注册用户名
username: {
required: "此项不能为空",
minlength: "不能少于5个字符",
maxlength: "不能多于12个字符"
},
// email
email: {
required: "此项不能为空",
email: "email格式不正确"
},
// 密码
password: {
required: "此项不能为空",
minlength: "不能少于6个字符",
maxlength: "不能多于18个字符"
},
// 确认密码
confirm_password: "两次输入密码不一致",
// 检验验证码
captcha: {
required: "请输入验证码",
remote: "验证码输入错误"
}
}
});
});
</script>

运行后,得到下面的结果


更多用法参考 https://www.jb51.net/article/24405.htm

相关文章

  • 基于jQuery实现表单提交验证

    基于jQuery实现表单提交验证

    本文给大家分享的是一段基于jQuery的实现简单的表单提交验证的代码,非常简单实用,推荐给有相同需求的小伙伴们参考下。
    2014-11-11
  • jQuery的Each比JS原生for循环性能慢很多的原因

    jQuery的Each比JS原生for循环性能慢很多的原因

    这篇文章主要介绍了jQuery的Each比JS原生for循环性能慢很多的原因的相关资料,需要的朋友可以参考下
    2016-07-07
  • jquery无刷新验证邮箱地址实现实例

    jquery无刷新验证邮箱地址实现实例

    原理非常的简单在用户输入邮箱离开之后我们通用jquery ajax发送数据给mail.php文件,然后由它实现查找此邮箱是不是在数据库中然后反馈对应信息即可
    2014-02-02
  • jQuery仿京东商城楼梯式导航定位菜单

    jQuery仿京东商城楼梯式导航定位菜单

    这篇文章主要介绍了jQuery仿京东商城楼梯式导航定位菜单的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    图片等比例缩放在某些情况下还是比较事用的,不过max-width和max-height在ie6中不兼容问题很是郁闷,接下来使用jQuery解决这个问题,感兴趣的各位可以参考下哈
    2013-03-03
  • jQuery产品间断向下滚动效果核心代码

    jQuery产品间断向下滚动效果核心代码

    这篇文章主要为大家分享了jQuery产品间断向下滚动的核心代码,需要的朋友可以参考下
    2014-05-05
  • jQuery检查事件是否触发的方法

    jQuery检查事件是否触发的方法

    这篇文章主要介绍了jQuery检查事件是否触发的方法,涉及jQuery中trigger方法的使用技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery中delegate()方法的用法详解

    jQuery中delegate()方法的用法详解

    delegate()方法是为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数。下面就是详细介绍,有需要的朋友可以来介绍一下。
    2016-10-10
  • jQuery如何解决IE输入框不能输入的问题

    jQuery如何解决IE输入框不能输入的问题

    在IE10以上版本,微软为了提高IE输入框的便利性,增加了文本内容全部删除和密码眼睛功能,但是有些时候打开新的页面里,输入框却被锁定无法编辑,需要刷新一下页面,或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入,怎么解决呢,下面小编给大家解答下
    2016-10-10
  • jQuery内容选择器与表单选择器实例分析

    jQuery内容选择器与表单选择器实例分析

    这篇文章主要介绍了jQuery内容选择器与表单选择器,结合实例形式分析了jQuery内容选择器与表单选择器的功能、用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06

最新评论