JQuery之validate入门
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier{
border: 0px solid white;
width: 1300px;
margin: auto;
} #top{
border: 0px solid white;
width: 100%;
height: 50px;
}
#menu{
border: 0px solid white;
height: 40px;
background-color: black;
padding-top: 10px;
margin-bottom: 15px;
margin-top: 10px;
}
.top{
border: 0px solid white;
width: 405px;
height: 100%;
float: left;
padding-left: 25px;
}
#top1{
padding-top: 15px;
}
#bottom{
margin-top: 13px;
text-align: center;
} #form{
height: 500px;
padding-top: 70px;
background-image: url(../img/regist_bg.jpg);
margin-bottom: 10px;
}
a{
text-decoration: none;
} 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;
} #father{
border: 0px solid white;
padding-left: 307px;
} #form2{
border: 5px solid gray;
width: 660px;
height: 450px;
} </style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/messages_zh.js" charset="UTF-8"></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,
minlength:3,
maxlength:5
},
sex: {
required: true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits: "密码必须是数字",
minlength:"密码不能少于6位"
},
repassword:{
required:"确认密码不能为空!",
equalTo: "两次输入密码不一致!"
},
email:{
required:"邮箱不能为空",
email: "邮箱格式不支持"
},
username:{
required:"姓名不能为空!",
minlength:"姓名不得少于3位!",
maxlength:"姓名不超过5位!"
},
sex: {
required: "性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息
label.text(" ") //清空错误提示信息
.addClass("success"); //加上自定义success类
}
});
});
</script>
</head>
<body>
<div id="contanier">
<div id="top">
<div class="top">
<img src="../img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="../img/header.png" height="45px" />
</div>
<div class="top" id="top1">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="menu">
<a href="#"><font size="5" color="white">首页</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
</div>
<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>
</span>
<label for="sex" class="error" style="display: none;"></label>
</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之validate入门的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- jquery插件开发基础入门
jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...
- 简单地使用jquery的validate
简单地使用jquery的validate ——@梁WP 摘要:本文通过一个很简单的例子,讲解了jquery validate的最基础使用方式. 一.源代码 注意事项都写在代码的注释里了,哈哈. < ...
- jquery插件-validate
1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下验证属性 3.设置不符合规则的提示信息:添加da ...
- 使用jquery插件validate制作的表单验证案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery validate入门
<html> <head> <meta charset="utf8"></meta> </head> <body& ...
- jQuery校验validate详解（转）
jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...
- jquery的validate.js 和 form.js 的使用方法
在使用 Jquery 的方法的验证并且修改 原Form 表单的提交方式的时候,需要引用的文件有 <script type="text/javascript" src=&quo ...
- JQuery插件validate的Remote使用
JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. 1. 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery ...
随机推荐
- dtd文件本地配置
在struts包解压出来以后的地方找
- ARP 攻击
场景 A攻击者 192.168.1.3 00:00:00:00:00:01 B受害者 192.168.1.2 00:00:00:00:00:02 C路由器 192.168.1.1 00:00:00:0 ...
- 电梯V2.0
电梯V2.0 GitHub仓库地址 Problem 一栋10层的大楼(楼层编号1-10),设3台无限载重的电梯,初始时电梯停在1层.其中:1号电梯只能停留在奇数层,2号电梯可以各层都停留,3号电梯只停 ...
- winform 弹出窗体指定位置
在启动一个程序时,我们希望窗口显示的位置处于屏幕的正中心,可以如下设置: MainForm mainForm = new MainForm(); mainForm.StartPosition = Fo ...
- 【第二周】scrum站立会议
1.站立会议:敏捷软件开发方法论Scrum的相关技术之一,是scrum的最佳实践 2.具体形式:每天的同一时间让团队成员面对面站立交流工作进展 3.功能: (1)让团队所有人都相互知道彼此的进展,了解 ...
- 【Leetcode】771. Jewels and Stones
(找了leetcode上最简单的一个题来找一下存在感) You're given strings J representing the types of stones that are jewels, ...
- sublime text there are no packages available for installation 解决办法
hosts 增加一行 : #50.116.33.29 sublime.wbond.net.
- (转)设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)
Sysctl是一个允许您改变正在运行中的Linux系统的接口.它包含一些 TCP/IP 堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性能.用sysctl可以读取设置超过五百 ...
- 出现脚本错误或者未正确调用 Page()
pages/xxxx/xxxx.js 出现脚本错误或者未正确调用 Page() 自己创建的小程序出现上面报错,可能是因为 xxxx.js是一个空文件,所以才会出现未正确调用: 如果是空文件的话,解决办 ...
- Day21-Cookie
1. Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密).例如在某个网站上保存了用户名和密码,3个月内 ...