您的位置：首页 > 其它

非空验证注册用户信息

2017-10-10 20:39 477 查看

题意：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

非空验证 注册用户信息

非空验证注册用户信息