jQuery学习(八)——使用JQ插件validation进行表单校验
1、官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
目录结构：
2、引入jquery库和validation插件
复制dist文件夹下的
和localization文件夹下的
放到WEB项目的js文件夹下提供使用
注意：validate是jQuery插件，必须在jQuery的基础上进行运行，导入顺序是jQuery库，validate库和国际化资源库（可选）
<!--依赖的JQuery库-->
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate校验库-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化库，中文提示（可选）-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
3、常用校验类型：（其他类型网上查找即可）
| 校验类型 | 取值 | 描述 |
| required | true|false | 必填字段 |
| 邮件地址 | ||
| url | 路径 | |
| date | 数字 | 日期 |
| dateISO | 字符串 | 日期（YYYY-MM-dd） |
| number | 数字（负数，小数） | |
| digits | 整数 | |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| rangelength | [minL,maxL] | 长度范围 |
| min | 最小值 | |
| max | 最大值 | |
| range | [min,max] | 值范围 |
| equalTo | jQuery表达式 | 两个值比较 |
| remote | url路径 | ajax校验 |
4、语法：
$(…).validate({
rules:{},
messages:{}
});
rules规则语法：
rules:{
字段名：校验器,
字段名：校验器
}
校验器语法：
语法：{校验器:值,校验器:值,…}
message提示语法：
message:{
字段名:{校验器:"提示",校验器:"提示",…}
}
5、案例：使用JQuery完成注册页面表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier{
border: 0px solid white;
width: 1300px;
margin: auto;
}
#form{
height: 500px;
padding-top: 70px;
margin-bottom: 10px;
}
label.error{
background:url(../img/unchecked.png) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
}
label.success{
background:url(../img/checked.png) no-repeat 10px 3px;
padding-left: 30px;
} #father{
border: 0px solid white;
padding-left: 307px;
} #form2{
border: 5px solid gray;
width: 660px;
height: 450px;
}
</style> <!--依赖的JQuery库-->
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate校验库-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化库，中文提示（可选）-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3,
},
password:{
required:true,
digits:true,
minlength:6,
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:4,
},
sex:{
required:true,
}
},
messages:{
user:{
required:"用户名不能为空",
minlength:"用户名不能少于3位！",
},
password:{
required:"密码不能为空！",
digits:"密码必须是整数！",
minlength:"密码不能少于6位！",
},
repassword:{
required:"确认密码不能为空！",
equalTo:"两次密码输入不一致！"
},
email:{
required:"邮箱不能为空！",
email:"邮箱格式不正确！"
},
username:{
required:"姓名不能为空！",
maxlength:"姓名不得多于4位！",
},
sex:{
required:"性别必须勾选！",
}
},
errorElement:"label", //用来创建错误提示信息标签,validate插件默认的就是label
success:function(label){ //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text("") //清空错误提示信息
.addClass("success"); // 加上自定义的success类
}
})
});
</script>
</head>
<body>
<div id="contanier">
<div id="form">
<form action="#" method="get" id="registForm">
<div id="father">
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2" >
<font size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label for="user" >用户名</label>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 册" height="50px"/>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
在谷歌浏览器内运行，效果如下：
jQuery学习(八)——使用JQ插件validation进行表单校验的更多相关文章
- day32(表单校验js和jquery表单校验)
校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- jQuery用面向对象的思想来编写验证表单的插件
本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...
- jQuery Validation Engine 表单验证，自定义规则验证方法
jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...
- JQuery中内容操作函数、validation表单校验
JQuery:内容体拼接(可以直接拼接元素节点和内容节点) JQuery实现: 方案1:A.append(B); == B.appendTo(A);A的后面拼接B 方案2: A.prepend(B); ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
随机推荐
- ffmpeg x264编译与使用介绍
问题1:我用的是最新版本的ffmpeg和x264,刚刚编译出来,编译没有问题,但是在linux 环境使用ffmpeg的库时发现报错error C3861: 'UINT64_C': identifier ...
- Eclipse插件Lambok,实现自动生成Java代码
1.下载Lombok.jar http://projectlombok.googlecode.com/files/lombok.jar 2.运行Lombok.jar: java -jar D:\00 ...
- 页面定制CSS代码初探（三）：设置正文最小高度
前言 没想到再次写这篇,已经过去1年半了. 现在审美也发生了改变,一开始做的样式全删了,只保留了h2的样式.原先认为界面要宽,两边留太多空很浪费,看惯了知乎和简书,觉得默认最大1000px的排版也不错 ...
- ZBrush 4R7中为笔刷设置快捷键
为了便于雕刻.提高雕刻速度,ZBrush®不仅很人性化地设计了自定义笔刷,用户还可以自行设置笔刷快捷键,步骤如下. ZBrush 4R8下载:http://wm.makeding.com/iclk/? ...
- Python多线程原理与实现
Date: 2019-06-04 Author: Sun Python多线程原理与实战 目的: (1)了解python线程执行原理 (2)掌握多线程编程与线程同步 (3)了解线程池的使用 1 线程基本 ...
- 前端框架easyui layout， Tabs，tree
一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部 ...
- Pyhton学习——Day29
#异常与错误# 什么是异常?# 异常就是程序运行时发生错误的信号,在程序出现错误时,则会产生异常,若没有程序处理,则会抛出异常# 导致程序在异常语句处崩溃终止# Traceback 追踪异常信号:** ...
- C learn questions list
\主 题: C语言面试题大汇总,个人觉得还是比较全地!!! 作 者: free131 (白日?做梦!) 信 誉 值: 100 最近因为找工作,收集了很多C语言方面方面的面试题以及答案.现在新工作搞定了 ...
- [置顶]
Elon Musk (伊隆·马斯克)：无限的创想与意志的胜利
Elon Musk (伊隆·马斯克):无限的创想与意志的胜利 很多人说 Steve Jobs 很伟大,这一点我认同.但是,单纯从创造出的产物而言,Elon Musk 的成就毫无疑问远远超越 Steve ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...