简单地使用jquery的validate

——IT唐伯虎

摘要：本文通过一个很简单的例子，讲解了jquery validate的最基础使用方式。

一、源代码

　　注意事项都写在代码的注释里了，哈哈。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lwp</title><!-- jquery，必须 -->
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<!-- jquery的校验，必须 -->
<script type="text/javascript" src="jquery.validate.js"></script><!-- 额外下载的校验规则大全，可选 -->
<script type="text/javascript" src="additional-methods.js"></script><script>$(function() {/* 让表单使用jquery-validate的校验，必须 */$("form").validate();/* 用中文覆盖jquery-validate原有的英文提示，可选 */jQuery.extend(jQuery.validator.messages, {required : "不能为空",email : "请输入正式的邮箱"});/* 自定义校验规则，可选 */jQuery.validator.addMethod("lwp", function(value, element) {if (value == "" || value == "liang") {return true;}else {return false;}}, "只能输入liang");});function check(){/* 检查表单 */if($("form").valid()) {alert("提交成功");}else {return false;}}
</script><style>
/* 自定义的错误提示样式，覆盖jquery-validate自带的错误提示样式，可选 */
label.error {color: #F00;font-size: 12px;
}
</style>
</head><body><form><div><label for="email">邮箱</label><!-- required和email是jquery-validate自带的校验规则 --><input type="text" autocomplete="off" name="email" required="true" email="true"></div><div><label for="author">作者</label><!-- lwp是自己定义的校验规则 --><input type="text" autocomplete="off" name="author" required="true" lwp="true"></div><div><input type="button" onclick="check();" value="提交"></div></form>
</body></html>

二、结果截图

　　1、required的校验，截图如下：

　　2、email和lwp的校验，截图如下：

　　3、校验通过之后的提交，截图如下：

转载于:https://www.cnblogs.com/liangweiping/p/4510774.html

简单地使用jquery的validate相关推荐

jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的以前我们都是用js手动验证现在可以通过这个插件直接调 ...
经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
html广告20s倒计时,简单时尚的jQuery倒计时插件
SyoTimer是一款简单时尚的jQuery倒计时插件.该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全.它的特点还有: 在计时器计时结束之后的回调函数中可以修改计时器的结构. 可以周期的 ...
简单实用的jQuery分页插件twbs-pagination
在Web开发中,表格是一个很好展示数据的组件.当数据量大了,分页就不可避免了.分页不仅可以提高读取数据的性能,而且也会让用户体验更好.在前面PHP程序员雷雪松给大家介绍了Bootstrap Table ...
tips显示位置下面 html,简单实用的jQuery Tooltips工具提示插件
minimalTips.js是一款简单实用的jQuery Tooltips工具提示插件.该jquery工具提示插件压缩后的版本仅3kb,它不仅支持超链接元素,而且支持段落和span等元素显示toolt ...
html简单图片放大镜,jQuery轻量级简单实用的图片放大镜特效
zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过骨牌的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果.该图片放大镜插 ...
jQuery的Validate插件
Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供了一个 ...
（转）jquery插件Validate的使用
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...

简单地使用jquery的validate

简单地使用jquery的validate相关推荐

最新文章

热门文章