<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息注册页面</title>
</head>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#in{
width:350px;
height:100px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
</style>
<body>
<div align="center">
<form action="#">
<h1>个人信息注册页面</h1>
用户名：<input type="text" name="username" id="username" placeholder="*必填项"><span id="username_msg"></span><br>
密码：<input type="text" name="password" id="password"placeholder="*必填项"><span id="password_msg"></span><br>
确认密码：<input type="text" name="repasswprd" id="repassword"placeholder="*必填项"><span id="repassword_msg"></span><br>
<tr>
<td class="td_left"><label>个人说明:</label></td>
<td class="td_right">
<input type="text" id="in" placeholder="guochengdong">
</td>
</tr>
</div>
<!-- onclick="return checkForm() 如果checkForm返回值是true，就提交表单，否则不提交表单-->
<div align="center">
<tr>
<td class="td_left"><label>性别:</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<div align="center">
<tr>
<td class="td_left"><label>兴趣爱好:</label></td>
<td class="td_right">
<input type="radio" name="hobby" value="1" >篮球
<input type="radio" name="hobby" value="1" >旅游
<input type="radio" name="hobby" value="1" >足球
<input type="radio" name="hobby" value="1" >音乐
<input type="radio" name="hobby" value="1" >美术
</td>
</tr>
</div>
<div align="center">
<tr>
<td class="td_left"><label> </label></td>
<td class="td_right">
<input type="radio" name="hobby" value="1" >读书
<input type="radio" name="hobby" value="1" >健身
<input type="radio" name="hobby" value="1" >跑步
<input type="radio" name="hobby" value="1" >瑜伽
<input type="radio" name="hobby" value="1" >其他
</td>
</tr>
</div>
<div align="center">
<tr>
<td class="td_left"><label>职业:</label></td>
<td class="td_right" id="job">
<select>
<option value="job1">学生</option>
<option value="job1">公务员</option>
<option value="job1">教师</option>
<option value="job1">务农</option>
</select>
</td>
</tr>
</div>
</div>
<div align="center">
<input type="submit" name="submit" value="提交" onclick="return checkForm()"/>
<input type="reset" id="res" value="重置">
</form>
</div>
</div>
</body>
<script type="text/javascript">
//是否为空
function ifnull(txt){
if(txt.length==0){
return true;
}
var $reg=/\s+/;
return $reg.test(txt);
}
//在id为username的元素失去焦点时进行用户名的验证
$("#username").blur(function(){
if(ifnull($(this).val())){
$("#username_msg").html("用户名不能为空");
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#username").val())){
$("#username_msg").html("用户名至少要6位哦");
}else{
$("#username_msg").html("√");
}
}
});
//在id为password的元素失去焦点时进行密码的验证
$("#password").blur(function(){
if(ifnull($(this).val())){
$("#password_msg").html("用户名不能为空");
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#password").val())){
$("#password_msg").html("密码至少要6位哦");
}else{
$("#password_msg").html("√");
}
}
});
//在id为repassword的元素失去焦点时进行密码的验证
$("#repassword").blur(function(){
if(ifnull($(this).val())){
$("#repassword_msg").html("请确认密码");
}else{
if($("#password").val()!=$("#repassword").val()){
$("#repassword_msg").html("两次密码不一致");
}else{
$("#repassword_msg").html("√");
}
}
});
//验证表单
function checkForm(){
//验证用户名
if(ifnull($("#username").val())){
$("#username_msg").html("用户名不能为空！");
return false;
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#username").val())){
$("#username_msg").html("用户名至少6位");
return false;
}
}
//验证密码
if(ifnull($("#password").val())){
$("#password_msg").html("密码不能为空");
return false;
}else{
var $reg=/^\w{6,}$/;
if(!$reg.test($("#password").val())){
$("#password_msg").html("密码至少6位");
return false;
}
}
//确认密码是否为空
if(ifnull($("#repassword").val())){
$("#repassword_msg").html("请确认密码");
return false;
}
//验证两次密码是否一致
if($("#password").val()!=$("#repassword").val()){
$("#repassword_msg").html("两次密码不一致");
return false;
}
return true;
}
</script>
</html>
计应N1班3222401121郭成东.zip
需积分: 0 149 浏览量
2023-12-18
21:44:06
上传
评论
收藏 4.12MB ZIP 举报
计应N1班3222401121郭成东.zip （27个子文件） 
计应N1班3222401121郭成东 
jQuery.html 7KB Bootstrap 计应N1班3222401121郭成东 lian.html 3KB js 
posfixed.js 5KB jquery.SuperSlide.2.1.1.js 11KB detail.html 3KB gn.html 4KB list.html 6KB css main.css 5KB reset.css 2KB index.html 3KB images 
icon.gif 2KB
cp.png 153KB
b1.jpg 71KB b2.png 2.92MB ad_ctr.png 4KB b3.png 925KB news_pic.jpg 57KB bg4.gif 1KB logo.png 10KB bt_p2.jpg 3KB fot_phe.gif 6KB bt_p1.jpg 3KB bt_p4.jpg 3KB local_bg.gif 2KB bt_p3.jpg 4KB head_bg.png 1001B sj.html 3KB资源评论
