jQuery应用实例5：表单验证
1.validation插件的使用：
入门案例：
<html>
<head>
<meta charset="UTF-8">
<title>validate入门案例</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$(function() {
$("#checkForm").validate({
rules: {
username: {
required: true,
minlength: 6
},
password: {
required: true,
digits: true,
minlength: 6
}
},
messages: {
username: {
required: "用户名不能为空!",
minlength: "用户名不得少于6位！"
},
password: {
required: "密码不能为空!",
digits: "密码必须是数字!",
minlength: "密码不得少于6位!"
}
}
});
});
</script>
</head>
<body>
<form action="#" id="checkForm">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="password" /><br />
<input type="submit" />
</form>
</body>
</html>
注意：这里需要导入三个js文件
效果：
接下来就是表单验证：
这里是用js实现的：http://www.cnblogs.com/xuyiqing/p/8372726.html
现在用jQuery实现：
效果：
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<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: 5
},
sex: {
required: true
}
},
messages: {
user: {
required: "用户名不能为空!",
minlength: "用户名不得少于3位!"
},
password: {
required: "密码不能为空!",
digits: "密码必须是整数!",
minlength: "密码不得少于6位!"
},
repassword: {
required: "确认密码不能为空!",
equalTo: "两次输入密码不一致!"
},
email: {
required: "邮箱不能为空!",
email: "邮箱格式不正确!"
},
username: {
required: "姓名不能为空!",
maxlength: "姓名不得多于5位!"
},
sex: {
required: "性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
<style>
label.error{
background:url(img/unchecked.gif) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
} label.success{
background:url(img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}
</style>
</head> <body>
<div>
<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>
Email
</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" 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" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 册" height="50px" />
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body> </html>
jQuery应用实例5：表单验证的更多相关文章
- 实例讲解表单验证插件Validation的应用
jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.现在 结合实际情况,我把项目中经常要用到的验证整理成一个实例 ...
- jQuery实现用户注册的表单验证
用户注册的表单往往是需要进行验证的,否则会有一些不否合规则的数据入库,后果会不堪设想,本文通过jquery来实现. <html> <head> <meta chars ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证
一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...
- React实例----一个表单验证比较复杂的页面
前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...
- 一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
- jQuery之简单的表单验证
html部分: <body> <form method="post" action=""> <div class="in ...
- 用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data"> 2 <di ...
- JQuery在一个简单的表单验证的例子
html代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
随机推荐
- Django REST framework的分页
DRF分页组件 为什么要使用分页 我们数据表中可能会有成千上万条数据,当我们访问某张表的所有数据时,我们不太可能需要一次把所有的数据都展示出来,因为数据量很大,对服务端的内存压力比较大还有就是网络传输 ...
- oracle 执行顺序 select查询优化
今天把这几天做的练习复习了一下,不知道自己写得代码执行的效率如何以及要如何提高,于是乎上网开始研究一些材料,现整理如下: 首先,要了解在Oracle中Sql语句运行的机制.以下是sql语句的执行步骤: ...
- weld
weld - 必应词典 美[weld]英[weld] v.焊接:熔接:锻接:使紧密结合 n.焊接点:焊接处 网络焊缝
- 651. 4 Keys Keyboard复制粘贴获得的最大长度
［抄题］: Imagine you have a special keyboard with the following keys: Key 1: (A): Print one 'A' on scre ...
- Django HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR
使用django来获取用户访问的IP地址,如果用户是正常情况下 request.META['REMOTE_ADDR'] 可以获得用户的IP地址.但是有些网站服务器会使用ngix等代理http,或者是该 ...
- javaweb开发1.环境配置（javaweb插件下载及tomact在eclips中配置）
一.下载javaweb插件 1.安装好jdk,下载eclips(Juno版本) 2.打开eclips,安装Web插件和JavaEE插件 3 在Eclipse中菜单help选项中选择install ne ...
- JVM 字节码（二）方法表详解
JVM 字节码(二)方法表和属性表 上一节中对 ClassFile 的整体进行了五个详细的说明, 本节围绕 ClassFile 最重要的一个内容 - 方法表的 Code 属性展开 ,更多 JVM Me ...
- centos7 mysql的安装与配置
用yum直接安装,不用更改配置 1. #yum install mysql #yum install mysql-server #yum install mysql-devel yum运行报错的化有可 ...
- mysql启动错误，提示crash 错误
:: mysqld_safe Starting mysqld daemon with databases from /data/mysql_data -- :: [Note] Plugin 'FEDE ...
- nginx图解
1.Http代理,反向代理:作为web服务器最常用的功能之一,尤其是反向代理. 这里我给来2张图,对正向代理与反响代理做个诠释,具体细节,大家可以翻阅下资料. Nginx在做反向代理时,提供性能稳定, ...