</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. mac系统下安装Composer和laravel

    先手动下载Composer 地址:https://getcomposer.org/composer.phar 下载后mv composer.phar /usr/local/bin/composer 这 ...

  2. RabbitMQ 均衡调度(公平分发机制)

    均衡调度是针对Consumer来说的.现在有两个Consumer请求同一个队列的消息.RabbitMQ会将序号为奇数的消息发给第一个Consumer,会将序号为偶数的消息发送给第二个Consumer. ...

  3. [Linux]Linux下rsync服务器和客户端配置

    一.rsync简介 Rsync(remote sync)是UNIX及类UNIX平台下一款神奇的数据镜像备份软件,它不像FTP或其他文件传输服务那样需要进行全备份,Rsync可以根据数据的变化进行差异( ...

  4. delete请求

    Action(){ int HttpRetCode; //定义一个变量,用于接收HTTP返回的状态码 web_add_header("Session-Id", "2e25 ...

  5. Centos7搭建软路由

    Xenserver环境: 一:环境准备 内网:192.168.2.100 外网:x.x.x.x 1.1:登陆XenCenter 1.2:进入Xenserver中的Networking选项 1.3:点选 ...

  6. linux安装jdk、tomcat、maven、mysql

    安装SZ rz与Gcc 首先需要tomcat的jar包,打算rz上去,发现没有安装 ./configure的时候发现缺少gcc和cc 安装解决: 再次执行成功安装了sz和rz 创建软链接然后就可以使用 ...

  7. L323 英语有必要学语法吗

    The Agony and Ecstasy of Grammar “Underline a relative clause.” This challenge would give a lot of a ...

  8. ubantu 常用命令

    1.显示日期与时间的命令:date 2.显示日历的命令:cal 3.简单好用的计算器:bc 4.热键“命令补全或文件补齐”:Tab 5.热键“中断目前程序”:Ctrl+C 6.热键“键盘输入结束(En ...

  9. this -- apply或call调用

    apply 和 call 这两个方法可以切换函数执行的上下文环境,也就是改变this绑定的对象.apply和call比较类似,区别在于传入参数时一个要求是数组,一个要求是分开传入.所以我们以apply ...

  10. React-Native 上拉加载下拉刷新

    react-native 上下拉加载的控件效果都不好,找了半天没找到,正打算自已封装的时候,无意中找到了一个比较好的控件,大家看一下: react-native-refresh-list-view 这 ...