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 ...
随机推荐
- A10
今日内容: 完善界面.解决剩下的一些问题 明日计划: 无 困难: 无
- Python数据挖掘学习路程--起步
一.首先第一步我去了解了Python开发环境:Python(程序运行基础的解释器)+第三方类库(功能扩展)+编辑器(提高代码编辑效率) 编辑器有:Pycharm.Spyder.jupyter note ...
- Lucene 常用名词解析
索引的创建:IndexWriter: 用于创建索引Directory: 这个可以用来定义我们的索引是存放在内存中还是在硬盘上Analyzer: 分词器 有几种()这个地方需要好好解释下Document ...
- 把a文件删除b文件中的相同的行
grep -vxFf b.txt a.txt > newa.txt 更好的方法是 comm - - b.txt a.txt > newa.txt 来自Tool in unix to sub ...
- Splash广告界面
在软件开始启动时都是会使用一个splashActivity实现联网判断和相关资源的加载,在一款网络软件上开始时的缓存加载和网络判断可以为用户节省不必要的流量开销. 使用handler延时启动下一个ac ...
- 桥接,NAT,Host Only的区别
桥接,NAT,Host Only的区别 一.Brigde——桥接 :默认使用VMnet0fish批注:只要在虚拟机中将IP设对,即使宿主机的IP是错的,也可以通信.但是如此物理网卡被禁用了,则不能 ...
- elementUI使用本地变量进行验证，监测不到本地变量的变化 的问题
对于饿了么组件自定义验证规则,组件库文档已经非常详细了:http://element-cn.eleme.io/#/zh-CN/component/form 我这里将验证中固定的值提取出来使用变量进行保 ...
- PHP开发工具(CodeLobster PHP Edition)
参考:http://www.uzzf.com/soft/45948.html 产品名:ttrar.com 密 钥:dstp-187c-9cdd-9a60-e185-b280 CodeLobste ...
- python脚本批量生成50000条插入数据的sql语句
f = open("xx.txt",'w') for i in range(1,50001): str_i = str(i) realname = "lxs"+ ...
- 【Python】Python 猜年龄的游戏
游戏规则: 允许用户最多尝试3次 每尝试3次后,如果还没猜对,就问用户是否还想继续玩,如果回答Y或y, 就继续让其猜3次,以此往复,如果回答N或n,就退出程序 如何猜对了,就直接退出 age= cou ...