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:/ ...
随机推荐
- Android Spinner 设置setOnItemSelectedListener时，竟会默认触发一次事件！
当然是关闭这坑货了: //禁止OnItemSelectedListener默认自动调用一次 spinnerDutyPerson.setSelection(0, true); //放到TagContai ...
- Unity中的点击，长按，划动
public void GetClickType() { if(Input.GetMouseButtonDown(0)) { if(isGetBeginPos) { beginPosition = I ...
- django admin 模块添加 static
目前路径是在 /var/www/jastme/static 但是admin的静态文件不在这个位置,那么怎么办呢? 首先到项目下,就是有manage.py的这个目录 编辑项目下的setting.py 首 ...
- POJ-2253.Frogger.(求每条路径中最大值的最小值，最短路变形)
做到了这个题,感觉网上的博客是真的水,只有kuangbin大神一句话就点醒了我,所以我写这篇博客是为了让最短路的入门者尽快脱坑...... 本题思路:本题是最短路的变形,要求出最短路中的最大跳跃距离, ...
- spring 自定义标签的实现
在我们进行Spring 框架开发中,估计用到最多的就是bean 标签吧,其实在Spring中像<mvc/><context/>这类标签以及在dubbo配置的标签都是属于自定义的 ...
- js函数内未声明变量
<script> function test(){ testd = "Hello"; } test(); alert(testd); </script> 当 ...
- 探索未知种族之osg类生物---呼吸分解之渲染遍历二
那么今天我们就正式进入osg整个呼吸动作之中最复杂的一个动作,ViewerBase::renderingTraversals(),我们先介绍renderingTraversals的开头的简单的几步操作 ...
- RNA测序的质量控制
RNA测序的质量控制 发表评论 3,112 A+ 所属分类:Transcriptomics 收 藏 ENCODE项目向我们揭示,人类基因组中超过70%能得到转录,只不过不会发生在同一个细胞里.为 ...
- 201621123002《JAVA程序设计》第五周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 接口 interface关键字 implements关键字 Comparable abstract Comparator 1.2 ...
- Delphi 域名解析为IP地址
花生壳:1.LJSZForm-Lable1-Caption改成 “IP地址或域名:”2.LJSZForm-BitBtn1Click-注释掉--else if IsIP(Trim(IPEdit.Text ...