jquery validate demo 基础
更新时间：2015年10月29日 11:36:12 作者：小禾点点
本文通过一段jquery代码给大家详解jquery validate基础，本文代码简单，非常具有参考借鉴价值，感兴趣的朋友一起参考下
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
下面通过一段代码demo给大家讲解jquery validate ，具体代码如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
<script type="text/javascript">
$().ready(function() {
var validate= $("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: "密码不能小于{0}个字 符"
},
confirm_password: {
required: "确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
},
//把错误信息放到一处处理与 errorPlacement 函数连用
groups:{
login:"firstname email password confirm_password"
},
errorPlacement:function(error,element){
error.insertBefore("#error_info");
},
//提交表单后焦点在第一个错误表单内
focusInvalid:true,
//指定错误提示的css类名
errorClass:"error_info",
//指定验证通过的css类名
validClass:"success_info",
//验证通过提交表单
submitHandler:function(form){
console.info("提交表单"+$(form).serialize());
},
invalidHandler:function(event,validator){
console.info("表单错误"+validate.numberOfInvalids());
},
// 取消某个元素的校验
ignore:"#firstname",
onfocusout:function(){
return false;
}
});
$("#check").click(function(){
var flag1=$("#signupForm").valid();//检查表单是否有效
var flag2=$("#firstname").rules();//查询元素的校验规则
var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则
var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则
var flag5=validate.form();//验证表单是否有效
var flag6=validate.element("#firstname");//验证表单某个元素是否有效
validate.resetForm();//恢复表单原来的状态
var flag7=validate.numberOfInvalids();//获得错误元素个数
console.info(flag7);
});
//针对某个元素显示特定的提示信息
validate.showErrors({
firstname:"ERROR"
});
});
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
<p id="error_info">
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
<p>
<input class="c" type="button" value="检查表单是否有效" id="check"/>
</p>
</form>
</body>
</html>
以上就是本文的全部内容，代码简单明了，非常具有参考借鉴价值，希望大家喜欢。
您可能感兴趣的文章:
- jquery.validate使用攻略 第一部
- jquery.validate使用攻略 第二部
- jquery.validate使用攻略 第三部
- jquery validate使用攻略 第四步
- jQuery validate 中文API 附validate.js中文api手册
- JQuery扩展插件Validate 5添加自定义验证方法
- JQuery扩展插件Validate—6 radio、checkbox、select的验证
- jQuery EasyUI API 中文文档 - ValidateBox验证框
- jQuery.validate 常用方法及需要注意的问题
- 使用jQuery validate 验证注册表单实例演示
- jquery插件validate验证的小例子
- Jquery Validate 正则表达式实用验证代码大全
- jquery.validate的使用说明介绍
- jquery validate在ie8下的bug解决方法
- jquery内置验证(validate)使用方法示例(表单验证)
- jquery validate添加自定义验证规则(验证邮箱 邮政编码)
- 基于jquery的simpleValidate简易验证插件
- jquery validate 自定义验证方法介绍 日期验证
- 使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
- jQuery验证插件 Validate详解
- jquery.validate使用时遇到的问题
相关文章
这篇文章主要介绍了jQuery平滑旋转幻灯片特效，一个具有自己特色的幻灯片会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的幻灯片，感兴趣的小伙伴可以参考下。2015-09-09
jQuery.ajax实现根据不同的Content-Type做出不同的响应
使用H5+ASP.NET General Handler开发项目，使用ajax进行前后端的通讯。有一个场景需求是根据服务器返回的不同数据类型，前端进行不同的响应，这里记录下如何使用$.ajax实现该需求,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了jQuery ztree实现动态树形多选菜单，ztree动态树形菜单，初始化加载和延迟加载，感兴趣的小伙伴们可以参考一下2016-08-08
在本篇文章里小编给大家整理的是一篇关于jquery向后台提交数组的相关知识点内容，需要的朋友们可以参考学习下。2020-02-02
这篇文章主要为大家详细介绍了jQuery插件formValidator实现表单验证的相关资料,需要的朋友可以参考下2016-05-05
通过JQuery，JQueryUI和Jsplumb实现拖拽模块
这篇文章主要介绍了通过JQuery，JQueryUI和Jsplumb实现拖拽模块，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
jquery是等待页面加载完数据，以及页面部分元素；js是页面全部加载完成才执行初始化加载，具体示例祥看本文2014-04-04
jQuery中ajax的load()与post()方法实例详解
这篇文章主要介绍了jQuery中ajax的load()与post()方法,结合实例详细分析了jQuery中load()与post()方法实现ajax交互的相关技巧与注意事项,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇jquery通过name属性取值的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本篇文章主要介绍了jQuery实用密码强度检测，这是一个非常常见的功能，可以验证密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2017-03-03
最新评论