非空验证注册用户信息

来源：互联网发布：淘宝红搜是什么意思编辑：程序博客网时间：2024/05/19 22:51

题意：

1. 创建登录界面，包含用户名，密码、确认密码、邮箱、手机号、身份证。使用jQuery判断一下内容

a) 用户名非空（失去焦点）如果用户输入为空，在后面用红色字体提示用户名不能为空，如果用户名不为空，则提示“√”，光标直接移到下一个密码输入框。

b) 点击“密码”另个字，光标自动移入到密码输入框中。两次密码一致（长度在6-12之间，并且至少包含两种字符。）。如果输入不合法，则提示用户密码不合法，如果输入合法，则提示“√”，光标直接移到下一个确认密码输入框。

c) 邮箱中包含@

d) 手机号的长度在7-11之间，手机号只有数字

e) 身份证位数必须是16位或18位。

f) 只有以上所有条件都满足，才可以提交成功。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证注册用户信息</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">

$(function(){
var flag1 =false; //定义默认为false的全局变量flag1
var flag2 =false; //定义默认为false的全局变量flag2
var flag3 =false; //定义默认为false的全局变量flag3
var flag4 =false; //定义默认为false的全局变量flag4
var flag5 =false; //定义默认为false的全局变量flag5
var flag6 =false; //定义默认为false的全局变量flag6

//1.验证用户名非空的情况
$("input:eq(0)").blur(function(){
var name = $(this).val();
//根据用户是否填写数据来判断用户名
if(name == null || name ==""){
$("span:eq(0)").show();
$("span:eq(1)").hide();
flag1 = false;
}else{
//用户名非空（失去焦点）如果用户输入为空，在后面用红色字体提示用户名不能为空，如果用户名不为空，则提示“√”，光标直接移到下一个密码输入框。
$("span:eq(0)").hide();
$("span:eq(1)").show();
flag1 = true;
$("input:eq(1)").focus();
}
});

//2.验证密码长度不能小于6位的情况
var word1; //定义密码全局变量
$("input:eq(1)").blur(function(){
word1 = $(this).val();
//根据用户是否填写数据来判断密码
if(word1.length<6){
$("span:eq(2)").show();
$("span:eq(3)").hide();
flag2 = false;
}else{
//b) 点击“密码”，光标自动移入到密码输入框中。两次密码一致（长度在6-12之间，并且至少包含两种字符。）。如果输入不合法，则提示用户密码不合法，如果输入合法，则提示“√”，光标直接移到下一个确认密码输入框。
$("span:eq(2)").hide();
$("span:eq(3)").show();
flag2 = true;
$("input:eq(2)").focus();
}
});

//3.验证需要再次确认密码的情况
$("input:eq(2)").blur(function(){
var word2 = $(this).val();
//根据用户是否填写数据来判断密码
if(word1 != word2){
$("span:eq(4)").show();
flag3 = false;
}else{
$("span:eq(4)").hide();
flag3 = true;
}
});

//4.验证邮箱格式要正确的情况
$("input:eq(3)").blur(function(){
var email = $(this).val();
//使用正则表达式查找用户填写的邮箱格式中是否含有@
var v ="@";
var s = email.search(v);
//根据用户是否填写数据来判断邮箱格式
if(s<0){
$("span:eq(5)").show();
flag4 = false;
}else{
$("span:eq(5)").hide();
flag4 = true;
}
});

//5.验证手机号必须是7-11位的数字，不能含字母的情况
$("input:eq(4)").blur(function(){
var tel = $(this).val();

//定义变量为手机号的长度
var size = tel.length;

//根据用户是否填写数据来判断手机号的长度
if(size >= 7 && size <= 11){
$("span:eq(6)").hide();
flag5 = true;
}else{
$("span:eq(6)").show();
flag5 = false;
}
//判断手机号是否包含字母
if(flag){
//定义正则表达式
var reg = /\D/;
if(reg.test(tel)){
$("span:eq(6)").show();
flag5 = false;
}else{
$("span:eq(6)").hide();
flag5 = true;
}
}
});

//6.验证身份证位数必须是16位或18位的情况
$("input:eq(5)").blur(function(){
var shen = $(this).val();

//定义变量为身份证位数的长度
var size = shen.length;

//根据用户是否填写数据来判断身份证位数的长度
if(size == 16 || size == 18){
$("span:eq(7)").hide();
flag6 = true;
}else{
$("span:eq(7)").show();
flag6 = false;
}
//判断身份证位数是否包含字母
if(flag6){
//定义正则表达式
var reg = /\D/;
if(reg.test(tel)){
$("span:eq(7)").show();
flag6 = false;
}else{
$("span:eq(7)").hide();
flag6 = true;
}
}
});

//7. 只有以上所有条件都满足，标志位变量都是true时,才可以提交成功。
$("input:eq(6)").click(function(){
if(flag1 == true && flag2 == true && flag3 == true && flag4 == true && flag5 == true && flag6 == true ){
alert("注册成功！");
$("#sub").submit();

//清空信息后再跳转
var inputs = document.getElementsByTagName("input");
for(i=0;i<inputs.length;i++){
inputs.item(i).value = "";
}

$("span:eq(1)").hide();
$("span:eq(3)").hide();
window.open("http://www.badui.com");
}else{
alert("注册失败，信息无效,请重新填写！");
return false;
}

});

});

</script>

</head>

<body>
<caption><h3 align="center">用户信息表</h3></caption>
<table align="center" border="1px" width="666px" height="456px" bordercolor="grey" cellpadding="1px" cellspacing="0px">
<tr>
<td align="right" bgcolor="#00FA9A">

姓名：
</td>
<td align="left">   
<input type="text" id="name" placeholder="用户姓名不能为空" style="background-color:#90EE90"/>
<span style="color:red;display: none; font-size:13px">*用户姓名不能为空*</span>
<span style="display:none; color:#6F0; font-size:36px;">√</span>
</td>
</tr>
<tr>
<td align="right" bgcolor="#00FA9A">
密码：
</td>
<td align="left">   
<input type="password" placeholder="密码长度不能小于6位" style="background-color:#90EE90"/>
<span style="color:red;display: none; font-size:13px">*密码长度不能小于6位*</span>
<span style="display:none; color:#6F0; font-size:36px;">√</span>
</td>
</tr>
<tr>
<td align="right" bgcolor="#00FA9A">
确认密码：
</td>
<td align="left">   
<input type="password" placeholder="需要再次确认密码" style="background-color:#90EE90"/>
<span style="color:red;display: none; font-size:13px">*两次输入密码不一致*</span>
</td>
</tr>
<tr>
<td align="right" bgcolor="#00FA9A">
邮箱：
</td>
<td align="left">   
<input type="email" placeholder="邮箱格式要正确" style="background-color:#90EE90"/>
<span style="color:red;display: none; font-size:13px">*邮箱格式要正确*</span>
</td>
</tr>
<tr>
<td align="right" bgcolor="#00FA9A">
手机号：
</td>
<td align="left">   
<input type="number" placeholder="手机号必须是7-11位的数字，不能含字母" style="background-color:#90EE90"/>
<span style="color:red;display: none; font-size:13px">*手机号必须是7-11位的数字，不能含字母*</span>
</td>
</tr>
<tr>
<td align="right" bgcolor="#00FA9A">
身份证号：
</td>
<td align="left">   
<input type="number" placeholder="身份证位数必须是16位或18位" style="background-color:#90EE90"/>
<span style="color:red;display:none; font-size:13px">*身份证位数必须是16位或18位*</span>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" id="sub" value="注册" style=" width:166px; height:40px;"/>
</td>
</tr>
</table>

</body>
</html>

阅读全文

0 0

非空验证 注册用户信息

非空验证注册用户信息