</html><!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. 分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JavaScript学习——使用JS完成注册页面表单校验

    1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...

  3. JavaScript学习——完善注册页面表单校验

    1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...

  4. angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）

    在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...

  5. JS应用实例1：注册页面表单校验

    这里是简单的前端校验,后边还会介绍后台的校验. 多重校验保证获取安全数据 步骤: 1.确定事件onsubmit,并绑定函数 2.编写函数,作用是获取输入数据 3.判断数据是否合法,合法则提交,否则表单 ...

  6. js正则表达式注册页面表单验证

    可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  7. 【JavaScript】案例一：使用JS完成注册页面表单校验——事件(onsubmit&onfocus&onblur)

    (一)初版:事件(onsubmit) 步骤分析: 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id> ...

  8. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  9. 把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）

    #把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...

随机推荐

  1. js 动态绑定鼠标事件

    <script> function getElementsByClassName(n) { var classElements = [],allElements = document.ge ...

  2. python nltk 安装及配置说明

    本教程采用pip安装方式,前期需要在本机安装setuptools 及pip 网上铺天盖地的说了很多关于nltk的说明,特别是后期nltk_data 手动下载操作,多数都不好使,这里整理 用pip安装n ...

  3. ６.2 C++ string类型字符串的连接

    参考:http://www.weixueyuan.net/view/6391.html 总结: 对于string类型变量,我们可以直接用“+”或者“+=”进行字符串的连接,操作符非常方便. 用“+”风 ...

  4. 2.7 C++构造函数

    参考:http://www.weixueyuan.net/view/6339.html 总结: 如果在类中声明了任何一个构造函数,则系统不会自动生成默认构造函数.构造函数同样能够使用类中的成员变量. ...

  5. springmvc添加定时任务

    springmvc.xml文件中添加如下配置 <bean id="ClearTempRoomLogTask" class="com.test.listener.St ...

  6. 谈谈你对Java面向对象的理解

    面向对象,其实是一种思考的思想,是一种思想,而这种思想它早期的思想是面向过程,通过不断的演化变成了现在的面向对象,思想有一个演变形式,早期是面向过程,现在是面向对象. 故事:把大象放进冰箱里,分几步? ...

  7. Grid Layout 注释

    .wrapper {  display: grid;/*定义一个块级的网格容器*/  grid-template-columns: repeat(3, 1fr); /*表示平均分为3列*/  grid ...

  8. 6.Python爬虫入门六之Cookie的使用

    大家好哈,上一节我们研究了一下爬虫的异常处理问题,那么接下来我们一起来看一下Cookie的使用. 为什么要使用Cookie呢? Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在 ...

  9. 20165326 java第二周学习笔记

    学习笔记 一.理论学习 基本数据类型与数组 标识符的第一个字符不能是数字:标识符不能为关键字. 基本数据类型多数与c语言相同.重点如下: 1.逻辑类型boolean赋值true/false 2.浮点数 ...

  10. 关于 global nonlocal 用法

    # 1 关于 globals() locals() nolocl 还有内置函数的引用## 概念的解释# 命名空间# 1 局部命名空间:每一个函数都有自己的命名空间# 2 全局命名空间:写在函数外的变量 ...