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 ...
随机推荐
- linux 命令cp拷贝
linux复制指定目录下的全部文件到另一个目录中复制指定目录下的全部文件到另一个目录中文件及目录的复制是经常要用到的.linux下进行复制的命令为cp.假设复制源目录 为 dir1 ,目标目录为dir ...
- 远程桌面连接Windows Azure中的Ubuntu虚拟机
默认情况下,通过Windows Azure创建的ubuntu虚拟机是不能直接连接远程桌面的,只能通过SSH终端连接. 在Windows Azure Portal中创建Ubuntu虚拟机,创建完成后添加 ...
- User_Login_Register_Shopping 1.0
#!/usr/bin/env python# -*- coding: utf-8 -*-# @File : user_login_register_shopping.py# @Author: Anth ...
- Android 给WebView设置Cookie
最近项目中用到WebView访问新浪支付页面,有个要求是必须是登录状态,否则会报Token过期,然后我简单的将我从cookie中取得的ticket,即一串数字可以代表用户登录的唯一标识作为参数拼接到u ...
- LeetCode224. Basic Calculator (用栈计算表达式)
解题思路 用两个栈分别存字符和数字. 顺序读入字符,处理方式分为字符和数字两种. 处理字符分为')'和非')'两种. 处理数字需要读取字符栈栈顶,分为'+'.'-'和非'+'.'-'. 代码 clas ...
- Android ListView getView()方法重复调用导致position错位
问题现状:Android ListView getView()方法重复调用导致position错位 解决办法:把ListView布局文件的layout_height属性改为fill_parent或者m ...
- JavaScript中必记英语单词及含义
reflow[ri'flo]:回流,重构(通过css改变页面的结构,比如一行元素,其中一个元素的高改变了,那么其他元素的位置也都会改变) repaint['ripent]:重绘(只改变页面的样式,比如 ...
- 算法21----重塑矩阵 LeetCode566
1.题目 在MATLAB中,有一个非常有用的函数 reshape,它可以将一个矩阵重塑为另一个大小不同的新矩阵,但保留其原始数据. 给出一个由二维数组表示的矩阵,以及两个正整数r和c,分别表示想要的重 ...
- 推荐几款常用的Eclipse插件
Eclipse 应该说是老牌也是最常用的Java开发工具,尽管这几年 InstelliJ IDEA 的发展势头很强劲,身边使用和推崇的人也大有人在,但个人而言还是觉有些不太习惯.这里也介绍几款自己常用 ...
- GitHub上搭建私人hexo博客操作教程
GitHub上搭建hexo博客 安装GitGit:主要用于上传博客页面到github和命令操作安装NodeNode.js:Hexo的运行环境安装HexoHexo:博客程序打开安装Git后的生成的右键菜 ...