jquery validate 插件:(2)简单示例
最简单的例子,比如我们有一个表单:
<form action="" method="get" id="frm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" /><em>*</em></td>
<tr>
<tr>
<td>电子邮件</td>
<td><input type="text" name="email" id="email" /><em>*</em></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Go!" /></td>
</tr>
</table>
</form>
这个表单中,有用户名和电子邮件两个字段。他们都为非空, 并且电子邮件需要是格式正确的地址。使用validation最简单的方式,是引入jquery和jquery validation的js文件。然后分别给两个input加入class:
<input type="text" name="username" id="username" class="required"/>
和
<input type="text" name="email" id="email" class="required email" />
然后,在document的read事件中,加入如下方法:
<script>
$(document).ready(function(){
$("#frm").validate();
}
</script>
邮箱Email,如上:class="required email"
字符chars,默认3-18个字符,如上:class="required chars"
电话号码,默认数字8-11位,如上:class="required phone"
文本区域textarea,如上:class="required"
这样, 当form被提交的时候,就会根据input指定的class来进行验证了。如果失败,form的提交就会被阻止。并且,将提示信息显示在input的后面。
不过,这样感觉不太爽,因为验证规则侵入了我们的html代码。还有一个方式,便是使用“rules”。我们将input的那些验证用class删除掉。然后修改document的ready事件响应代码:
$(document).ready(function(){
$("#frm").validate({
rules:{
username:"required",
email:{
required:true,
email:true
}
}
});
});
这样以来,也能达到相同的效果。
那么,接下的问题,就是显示的错误提示是默认的。我们需要使用自定义的提示:
$(document).ready(function(){
$("#frm").validate({
rules:{
username:"required",
email:{
required:true,
email:true
}
},
messages:{
username:"请输入您的用户名",
email:{
required:"请输入您的电子邮件地址",
email:"清输入一个格式正确的电子邮件地址"
}
}
});
});
如果,我们希望将错误信息装入input后面的em标签中呢?我们只需要在validate的options参数中加入errorPlacement项:
$(document).ready(function(){
$("#frm").validate({
rules:{
username:"required",
email:{
required:true,
email:true
}
},
messages:{
username:function(){},
email:{
required:"请输入您的电子邮件地址",
email:"清输入一个格式正确的电子邮件地址"
}
},
errorPlacement:function(error, element){
error.appendTo(element.next("em"));
}
});
});
现在,我们给username加上一个最短和最长的限制:
$(document).ready(function(){
$("#frm").validate({
rules:{
username:{
required:true,
minlength:3,
maxlength:15
},
email:{
required:true,
email:true
}
},
messages:{
username:{
required:"请输入您的用户名",
minlength:jQuery.format("用户名不能少于 {0} 个字符"),
maxlength:jQuery.format("用户名长度不能超过 {0} 个字符")
},
email:{
required:"请输入您的电子邮件地址",
email:"清输入一个格式正确的电子邮件地址"
}
},
errorPlacement:function(error, element){
error.appendTo(element.next("em"));
}
});
});
另外还有一种简单的验证方式
1.除引用jquery.js、jquery.validate.js外,再添加引用jquery.metadata.js
<script language="javascript" type="text/javascript" src="js/jquery.metadata.js"></script>
2.在控件上通过class{}添加验证规则
<input type="text" name="username" id="username" class="{required:true,messages:{required:'请输入用户名'}}" />
<input type="text" name="email" id="email" class="{required:true,email:true,messages:{required:'请输入电子邮件',email:'电子邮件格式有误!'}}" />
3.同样在document的read事件中,加入如下方法:
<script>
$(document).ready(function(){
$("#frm").validate();
}
</script>
转载于:https://www.cnblogs.com/linyechengwei/archive/2009/12/09/1620052.html
jquery validate 插件:(2)简单示例相关推荐
- jQuery validate插件submitHandler提交导致死循环解决方法
作者:海底苍鹰 地址:http://blog.51yip.com/jsjquery/1511.html dom对像的提交form.submit();和jquery对像的提交$('').submit() ...
- Jquery插件入门之Validate插件的简单使用
目录 一.jQuery插件 1.jQuery插件概述 2.Validate插件 一.jQuery插件 1.jQuery插件概述 jQuery插件机制概述 jQuery插件的机制很简单,就是利用jQue ...
- (转)jquery.validate插件的使用
JQuery Validate使用总结: 一.导入js库 <script src="../js/jquery.js" type="text/javascript&q ...
- Bootstrap 与 Jquery validate 结合使用——简单实现
首先必须引入的JS和CSS <script type="text/javascript" src="${ctx}/static/js/jquery-1.9.1.mi ...
- 使用JQuery Validate插件的报Cannot read property 'settings' of undefined错误的解决方法
一.问题描述: 因为最近在做动态表单,很多字段需要动态添加验证,而我在动态添加删除校验规则时,浏览器经常报Cannot read property 'settings' of undefined,每次 ...
- jquery validate插件onfocosout/onkeyup出错的解决方法
今天在改一个bug的时候遇到这样一个问题,需要在文本框输入的时候同时进行校验,查看文档发现有一个参数onkeyup(类型 Boolean,默认 true,指定是否在敲击键盘时验证.),如果不进行校验设 ...
- Jquery中使用Validate插件使表单验证更加简单
场景 效果 介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 UR ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
最新文章
- leetcode算法题--UTF-8 编码验证
- python3.9出了吗_Python 3.9 正式版要来了,会有哪些新特性?
- XAML 编码规范 (思考)
- 【SpringBoot 2】(六)配置文件 web开发相关
- Spring DI注入规则
- Python treelib库创建多叉树的用法介绍
- 【华为云技术分享】Nginx应用调优案例
- 【Gamma】 Phylab 发布说明
- android应用开发(24)---理解任务和返回堆栈
- java ee ssh三大框架知识点_详解JAVAEE——SSH三大框架整合(spring+struts2+hibernate)...
- CodeSmith 基础教程
- 选择符/选择器 深入了解 全面的选择器学习
- 中兴ZXR10_5952E交换机配置SNMP
- 开心网kaixin001状告kaixin,停用“开心网”名称,赔偿1000万元并公开道歉
- Python3,选择Python自动安装第三方库,从此跟pip说拜拜!!
- android为什么会用流量,手机流量为什么会偷跑?
- 鼠标按住后拖动StringGrid
- arduino旋转编码器控制步进电机
- H5 Vue 视频 video 支持预览图 poster
- python批量修改列名_pandas修改DataFrame列名的实现方法