JQuery注册页面表单检验完善
</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">
<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>
<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> 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注册页面表单检验完善的更多相关文章
- 分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript学习——使用JS完成注册页面表单校验
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...
- JavaScript学习——完善注册页面表单校验
1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...
- angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）
在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...
- JS应用实例1：注册页面表单校验
这里是简单的前端校验,后边还会介绍后台的校验. 多重校验保证获取安全数据 步骤: 1.确定事件onsubmit,并绑定函数 2.编写函数,作用是获取输入数据 3.判断数据是否合法,合法则提交,否则表单 ...
- js正则表达式注册页面表单验证
可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- 【JavaScript】案例一：使用JS完成注册页面表单校验——事件(onsubmit&onfocus&onblur)
(一)初版:事件(onsubmit) 步骤分析: 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id> ...
- 使用JQuery.Validate插件来校验页面表单有效性
使用JQuery.Validate插件来校验页面表单有效性1. [代码] 常见的注册表单元素 <form action="#" method="post" ...
- 把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）
#把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...
随机推荐
- 一个表中多个字段对应另一个表的ID（SQL查询）
A数据表中多个字段对应B数据表的ID, 现在要把B表的其他字段一起查询出来 一.数据表: 1.SPEED_DETECTION_ROAD 它的 START_POINT_ID 和 END_POINT_ID ...
- selenium登录界面，创建表单并填写提交
#! python3 # -*- coding:utf8 -*- # https://selenium-python.readthedocs.io/api.html#selenium.webdrive ...
- Cracking The Coding Interview 3.5
//Implement a MyQueue class which implements a queue using two stacks. #include <iostream> #in ...
- MATLAB 地图工具箱 m_map 的安装和入门技巧(转）
reference: http://blog.sina.com.cn/s/blog_8fc890a20102v6pm.html 需要用一些地图工具,arcgis懒得装了,GMT(generic m ...
- <Using ZooKeeper><Deploy & Use>
安装与部署 配置过程相当简单.集群模式部署: wget http://www-us.apache.org/dist/zookeeper/stable/zookeeper-3.4.10.tar.gz t ...
- 20165214 实验一 Java开发环境的熟悉
20165214 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:朱文远 学号:20165214 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...
- background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别
1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...
- excel idea sql 操作
1.excel concatenate()函数中连接单元格中值拼接sql时,内容超长,把insert into.... values()前面的单独提出来,只在concatenate()中拼接valu ...
- 使用Intellij Idea创建简单Maven项目（转）
我是学Java Web的,基本靠自学,在网上收集了各种视频资料,逐一的看,代码逐一的敲.学习了这么久之前一直未成想过要把自己的学习路程记录下来,在网上也看到过很多人把自己的学习历程以及遇到的问题写在了 ...
- 区分IE版本的js代码
function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...