<!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>
<style>
label.error{
color:red;
}
label.sucess{
padding-left:20px;
/*background: url(../img/register.gif) no-repeat 10px 2px;*/
}
</style>
<script>
$(function(){
$("#formCheck").validate({
rules:{
user:{
required:true,
minlength:6
},
password:{
required:true,
digits:true,
minlength:6
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空",
minlength:"用户名不能少于6"
},
password:{
required:"密码不能为空",
digits:"密码必须为数字",
minlength:"密码不能少于六位"
},
email:{
required:"邮箱必填",
email:"邮箱格式不正确"
},
username:{
required:"姓名必填",
maxlength:"不能多于5位"
},
sex:{
required:"性别必须勾选"
}
}
// errorElement:"label",
// success:function(label){
// label.text(" ").addClass("success");
// }
});
});
</script>
<script>
$(function(){
//1 创建数组保存对应的城市
var city = new Array(3);
city[0]=new Array("武汉","黄冈","襄阳");

});
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.jpg" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font size="5" color="white">首页</font>
</a> &nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">手机数码</font>
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">电脑办公</font>
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">鞋靴箱包</font>
</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">
<font color="white">家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" id="formCheck" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER
</td>
</tr>
<tr>
<td width="80px">
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填')"<span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Emaile
</td>
<td>
<input type="text" name="email" size="34px" id="eamil"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px"/>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province">
<option>===请选择===</option>
<option value="">湖北</option>
<option value="">湖南</option>
<option value="">河北</option>
<option value="">河南</option>
</select>
<select id="city">

</select>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2016-2018 xx商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>

使用jQuery完成表单验证的更多相关文章

  1. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  2. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  3. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  5. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  6. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  7. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. Jquery 实现表单验证，所有验证通过方可提交

    1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

  9. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

  10. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

随机推荐

  1. 十八、python沉淀之路--生成器

    一.生成器 生成器总结:语法上和函数类似:生成器函数和常规函数几乎是一样的.他们都是使用def语句进行定义,差别在于生成器使用yield语句返回一个值,而常规函数使用return语句返回一个值.自动实 ...

  2. Android Studio----- 无法打印---log----问题总结----华为坑深（转）

    问题描述:安卓真机调试时 System.out.println 无法输出, err则可以:Log.e,w可以,但其他不行. 解决方法,按如下方式查看酷派手机默认设置日志未warn方式. 酷派手机: * ...

  3. JMeter使用经历

    JMeter是Apache大树下的又一个果实,是一个压力测试工具,因为使用方便又开源免费,也被用来做功能测试.项目里也是拿JMeter来做功能性的接口自动化测试.这里大概说明下怎么用. 首先还是先下载 ...

  4. 微软系统工具包Sysinternals Suite官方下载地址

    Sysinternals Suite是微软官方发布的系统工具包,其中包含数十款实用的绿色系统工具软件,个个身怀绝技,是你维护Windows系统不可或缺的好帮手. 最新版Sysinternals Sui ...

  5. C语言回调函数详解

    1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢?恕我读得书少,没有在那本书上看到关于回调函数的定义.我在百度上搜了一下,发现众说纷纭,有很大一部分都是使用类 ...

  6. 分表分库之二：唯一ID的生成方法

    一.为什么要全局唯一? 我们在对数据库集群作扩容时,为了保证负载的平衡,需要在不同的Shard之间进行数据的移动, 如果主键不唯一,我们就没办法这样随意的移动数据.起初,我们考虑采用组合主键来解决这个 ...

  7. Java中计算对象的大小

    一.计算对象大小的方法 Java中如何计算对象的大小呢,找到了4种方法: 1.java.lang.instrument.Instrumentation的getObjectSize方法: 2.BTrac ...

  8. Java中的intern变量的讲解

    一般我们变成很少使用到 intern这个方法,今天我就来解释一下这个方法是干什么的,做什么用的 首先请大家看一个例子: public static void main(String[] args) t ...

  9. C#通用模块专题

    开源 程序设计 常用组件 加载图片,播放音乐.视频,摄像头拍照 文件读写(txt.xml.自定义文件格式(后缀名)) 串口通信 稳定的串口读写:http://blog.csdn.net/kolvin2 ...

  10. javascript中的垃圾回收

    1引用计数垃圾回收 核心:跟踪记录对象被引用的次数.思路是如果一个对象A被赋值给了一个变量v,则该对象A的引用计数值加1,如果变量v又被赋予其他值了,比如a="str",则该对象A ...