一个比较得意的JQuery验证页面
来源：互联网 发布：网络实体店 编辑：程序博客网 时间：2024/04/30 14:29
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎进入百度招聘系统</title>
<link href="css/all.css" type="text/css" rel="stylesheet"/>
<link href="css/jquery.datepick.css" type="text/css" rel="stylesheet"/>
<!-- 使用DWR -->
<script type='text/javascript' src='/HireWeb/dwr/interface/HireWebDWR.js'></script>
<script type='text/javascript' src='/HireWeb/dwr/engine.js'></script>
<script type='text/javascript' src='/HireWeb/dwr/util.js'></script>
<!-- 引入JQuery -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- 引入验证文件 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/messages_cn.js"></script>
<!-- UI插件 -->
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript" src="js/jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function(){
$("#frmV").validate(
{
rules:{
email:{required:true,email:true,maxlength:30},
passwrd:{required:true,minlength:6,maxlength:20},
repass:{required:true,equalTo:"#passwrd"},
username:{required:true,maxlength:10},
birthday:{required:true},
licence:{required:true,maxlength:18},
city:{required:true,maxlength:10},
mobilephone:{required:true,maxlength:11},
phone:{maxlength:12}
},
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
},
submitHandler:function(form)
{
regist();
}
}
);
$("#birthday").datepick({dateFormat:"yy-mm-dd"});
});
//选择性别的radio
function clickRadio(type)
{
for(var i=1;i<=2;i++)
{
document.getElementById("radio"+i).checked=false;
}
document.getElementById("radio"+type).checked=true;
}
//进行注册的动作
function regist()
{
var email=document.getElementById("email").value;
HireWebDWR.isExists(email,function(dat){
if(dat)
{
alert("注册用的邮箱已经存在");
return false;
}
else if(dat==false)
{
//alert("注册的邮箱不存在");
insertUser();
return true;
}
});
}
function insertUser()
{
//注册的邮箱不存在，开始拼接字符串
var str="";
str+=document.getElementById("email").value+",";
str+=document.getElementById("passwrd").value+",";
str+=document.getElementById("username").value+",";
//alert(str);
if(document.getElementById("radio1").checked)
{
str+="男"+",";
}
else if(document.getElementById("radio2").checked)
{
str+="女"+",";
}
str+=document.getElementById("birthday").value+",";
str+=document.getElementById("licence").value+",";
str+=document.getElementById("mobilephone").value+",";
str+=document.getElementById("city").value+",";
str+=document.getElementById("phone").value+",";
//alert(str);
HireWebDWR.insertUser(str,function(dat){
if(dat)
{
alert("注册成功");
window.location.href="login.html";
}
else
{
alert("信息填写有误，导致失败！");
}
});
}
</script>
</head>
<body>
<div id="all">
<div id="header">
<!-- 首部的log -->
<img src="img/logo.gif" style="width:137px;height:64px;margin-left:200px;"/>
<!-- 首部的菜单 -->
<div id="menu"><p id="pmenu" style="padding-left:150px;"><a href="#" style="color:orange;">首页</a><a href="#">社招职位</a><a href=""#>了解百度</a><a href="#">招聘帮助</a><a href="#">联系我们</a></p>
<p style="padding-left:150px;padding-top:20px;"><img src="img/topPic.jpg"/></p>
</div>
</div>
<div id="body">
<!-- 注册用户的页面 -->
<div id="big" style="width:957px;margin-top:30px;margin-left:150px;border:1px solid #DDDDDD">
<p style="padding-top:10px;padding-left:20px;font-weight:bold;font-size:14px;">新用户注册</p>
<div id="tip" style="margin-top:5px;width:900px;margin-left:auto;margin-right:auto;border:1px solid #DDDDDD">
<p style="padding-top:10px;font-size:14px;padding-left:20px;">温馨提示</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">1. 为了保证您的简历可以顺利进入简历库，请完整填写如下信息，*项目为必填项。</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">2. 账号注册成功且简历信息填写完整后，请进入您填写的邮箱中收取帐号激活邮件。</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">3. 身份证号和邮箱为您在本站进行一切操作的标识。身份证号还将作为您在百度笔试、面试时的身份验证标识，请务必如实填写。</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">4. 已经在系统注册了简历的同学，请不要重复注册。请使用已经注册的简历帐号申请新职位，并更新简历。</p>
<br>
</div>
<!-- 填写注册信息的页面 -->
<br><br>
<form id="frmV" method="post">
<table id="regist" style="margin-left:23px;font-size:14px;">
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>电子邮箱：</td>
<td><input type="text" id="email" name="email" style="width:200px;"/><font color="gray">邮箱将作为你从本平台接受邮件通知的渠道</font><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>密码：</td>
<td><input type="password" id="passwrd" name="passwrd" style="width:200px;"/><font color="gray">密码请使用数字、字母或者特殊字符，且不能小于6位</font><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>再次确认密码：</td>
<td><input type="password" id="repass" name="repass" style="width:200px;"/><font color="gray">请两次输入一致的密码</font><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>姓名：</td>
<td><input type="text" id="username" name="username" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>性别：</td>
<td><input type="radio" id="radio1" checked="true" onclick="clickRadio(1);"/>男 <input type="radio" id="radio2" onclick="clickRadio(2);"/>女</td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>出生年月：</td>
<td><input type="text" id="birthday" name="birthday" style="width:200px;" class="text" readonly="true"/><span style="color:red;"></span></td>
</tr>
<tr>
<td style="text-align:right;"><font color="red">*</font>身份证号码：</td>
<td><input type="text" id="licence" name="licence" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>现居住城市：</td>
<td><input type="text" id="city" name="city" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>移动电话：</td>
<td><input type="text" id="mobilephone" name="mobilephone" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:40px;">
<td style="text-align:right;">固定电话：</td>
<td><input type="text" id="phone" name="phone" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"></td>
<td><input type="submit" value="提交注册"/></td>
</tr>
</table>
</form>
<br><br>
</div>
</div>
<div id="footer">
<div style="width:420px;margin-left:auto;margin-right:auto;">
<p style="color:#99FFFF;text-algin:center;font-size:14px;"><a href="#" style="color:#99FFFF;">校园公益</a>|<a href="#" style="color:#99FFFF;">校园责任</a>|<a href="#" style="color:#99FFFF;">校园关系</a>|
<a href="#" style="color:#99FFFF;">合作伙伴</a>|<a href="#" style="color:#99FFFF;">关于百度</a></p>
<p style="text-align:center;font-size:14px;"><a href="#" style="color:#99FFFF;">2011 Baidu 使用百度前必读</a></p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎进入百度招聘系统</title>
<link href="css/all.css" type="text/css" rel="stylesheet"/>
<link href="css/jquery.datepick.css" type="text/css" rel="stylesheet"/>
<!-- 使用DWR -->
<script type='text/javascript' src='/HireWeb/dwr/interface/HireWebDWR.js'></script>
<script type='text/javascript' src='/HireWeb/dwr/engine.js'></script>
<script type='text/javascript' src='/HireWeb/dwr/util.js'></script>
<!-- 引入JQuery -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<!-- 引入验证文件 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/messages_cn.js"></script>
<!-- UI插件 -->
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<script type="text/javascript" src="js/jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function(){
$("#frmV").validate(
{
rules:{
email:{required:true,email:true,maxlength:30},
passwrd:{required:true,minlength:6,maxlength:20},
repass:{required:true,equalTo:"#passwrd"},
username:{required:true,maxlength:10},
birthday:{required:true},
licence:{required:true,maxlength:18},
city:{required:true,maxlength:10},
mobilephone:{required:true,maxlength:11},
phone:{maxlength:12}
},
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
},
submitHandler:function(form)
{
regist();
}
}
);
$("#birthday").datepick({dateFormat:"yy-mm-dd"});
});
//选择性别的radio
function clickRadio(type)
{
for(var i=1;i<=2;i++)
{
document.getElementById("radio"+i).checked=false;
}
document.getElementById("radio"+type).checked=true;
}
//进行注册的动作
function regist()
{
var email=document.getElementById("email").value;
HireWebDWR.isExists(email,function(dat){
if(dat)
{
alert("注册用的邮箱已经存在");
return false;
}
else if(dat==false)
{
//alert("注册的邮箱不存在");
insertUser();
return true;
}
});
}
function insertUser()
{
//注册的邮箱不存在，开始拼接字符串
var str="";
str+=document.getElementById("email").value+",";
str+=document.getElementById("passwrd").value+",";
str+=document.getElementById("username").value+",";
//alert(str);
if(document.getElementById("radio1").checked)
{
str+="男"+",";
}
else if(document.getElementById("radio2").checked)
{
str+="女"+",";
}
str+=document.getElementById("birthday").value+",";
str+=document.getElementById("licence").value+",";
str+=document.getElementById("mobilephone").value+",";
str+=document.getElementById("city").value+",";
str+=document.getElementById("phone").value+",";
//alert(str);
HireWebDWR.insertUser(str,function(dat){
if(dat)
{
alert("注册成功");
window.location.href="login.html";
}
else
{
alert("信息填写有误，导致失败！");
}
});
}
</script>
</head>
<body>
<div id="all">
<div id="header">
<!-- 首部的log -->
<img src="img/logo.gif" style="width:137px;height:64px;margin-left:200px;"/>
<!-- 首部的菜单 -->
<div id="menu"><p id="pmenu" style="padding-left:150px;"><a href="#" style="color:orange;">首页</a><a href="#">社招职位</a><a href=""#>了解百度</a><a href="#">招聘帮助</a><a href="#">联系我们</a></p>
<p style="padding-left:150px;padding-top:20px;"><img src="img/topPic.jpg"/></p>
</div>
</div>
<div id="body">
<!-- 注册用户的页面 -->
<div id="big" style="width:957px;margin-top:30px;margin-left:150px;border:1px solid #DDDDDD">
<p style="padding-top:10px;padding-left:20px;font-weight:bold;font-size:14px;">新用户注册</p>
<div id="tip" style="margin-top:5px;width:900px;margin-left:auto;margin-right:auto;border:1px solid #DDDDDD">
<p style="padding-top:10px;font-size:14px;padding-left:20px;">温馨提示</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">1. 为了保证您的简历可以顺利进入简历库，请完整填写如下信息，*项目为必填项。</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">2. 账号注册成功且简历信息填写完整后，请进入您填写的邮箱中收取帐号激活邮件。</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">3. 身份证号和邮箱为您在本站进行一切操作的标识。身份证号还将作为您在百度笔试、面试时的身份验证标识，请务必如实填写。</p>
<p style="padding-top:10px;font-size:14px;padding-left:16px;">4. 已经在系统注册了简历的同学，请不要重复注册。请使用已经注册的简历帐号申请新职位，并更新简历。</p>
<br>
</div>
<!-- 填写注册信息的页面 -->
<br><br>
<form id="frmV" method="post">
<table id="regist" style="margin-left:23px;font-size:14px;">
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>电子邮箱：</td>
<td><input type="text" id="email" name="email" style="width:200px;"/><font color="gray">邮箱将作为你从本平台接受邮件通知的渠道</font><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>密码：</td>
<td><input type="password" id="passwrd" name="passwrd" style="width:200px;"/><font color="gray">密码请使用数字、字母或者特殊字符，且不能小于6位</font><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>再次确认密码：</td>
<td><input type="password" id="repass" name="repass" style="width:200px;"/><font color="gray">请两次输入一致的密码</font><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>姓名：</td>
<td><input type="text" id="username" name="username" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>性别：</td>
<td><input type="radio" id="radio1" checked="true" onclick="clickRadio(1);"/>男 <input type="radio" id="radio2" onclick="clickRadio(2);"/>女</td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>出生年月：</td>
<td><input type="text" id="birthday" name="birthday" style="width:200px;" class="text" readonly="true"/><span style="color:red;"></span></td>
</tr>
<tr>
<td style="text-align:right;"><font color="red">*</font>身份证号码：</td>
<td><input type="text" id="licence" name="licence" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>现居住城市：</td>
<td><input type="text" id="city" name="city" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"><font color="red">*</font>移动电话：</td>
<td><input type="text" id="mobilephone" name="mobilephone" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:40px;">
<td style="text-align:right;">固定电话：</td>
<td><input type="text" id="phone" name="phone" style="width:200px;"/><span style="color:red;"></span></td>
</tr>
<tr style="height:30px;">
<td style="text-align:right;"></td>
<td><input type="submit" value="提交注册"/></td>
</tr>
</table>
</form>
<br><br>
</div>
</div>
<div id="footer">
<div style="width:420px;margin-left:auto;margin-right:auto;">
<p style="color:#99FFFF;text-algin:center;font-size:14px;"><a href="#" style="color:#99FFFF;">校园公益</a>|<a href="#" style="color:#99FFFF;">校园责任</a>|<a href="#" style="color:#99FFFF;">校园关系</a>|
<a href="#" style="color:#99FFFF;">合作伙伴</a>|<a href="#" style="color:#99FFFF;">关于百度</a></p>
<p style="text-align:center;font-size:14px;"><a href="#" style="color:#99FFFF;">2011 Baidu 使用百度前必读</a></p>
</div>
</div>
</div>
</body>
</html>
- 一个比较得意的JQuery验证页面
- 一个比较简单的JQUERY密码安全性验证实例【补充】
- 分享一个验证页面文本框输入长度的jquery方法
- 学习JQuery后的一个实际应用--页面表单验证（适合大规模应用）
- 一个比较好的验证码
- 一个比较全面的网址验证JS
- 写了一个比较简单的会员注册页面，带会员已经存在验证，发上来大家给点建议
- JavaScript一个简单的验证页面
- 一个非常棒的Jquery验证Plugin
- Jquery一个简单的注册验证
- 一个比较实用的jQuery例子
- 一个jquery比较好的网址
- jquery数字验证大小比较
- jquery validate验证比较日期
- 一个简单的jquery页面内跳转
- 一款比较实用齐全的jQuery 表单验证插件
- 比较全的jQuery网页验证码插件
- jquery.validate.js是jquery旗下的一个验证框架
- Html5 之 Canvas
- No 91 · asp.net中页面继承类
- clearcase推荐资源
- 网站Cache全分析
- 标准化的目的
- 一个比较得意的JQuery验证页面
- 主题：谷歌的一道面试题,请大家集思广益
- 长时间停留在calculating requirements and dependencies
- 博主在哈佛评论网上的博客
- Android makefile Product_target
- 欧拉回路
- 登录webqq得金山快盘空间5G
- qt程序自启动
- shell循环，判断介绍，以及实例
