用户名密码判断验证
2017-09-10 18:40
148 查看
我们都知道有的时候我们在登录或者注册一个账户的时候,有的会提示我们用户名格式不正确,或者密码不能为空或者低于多少位
高于多少位,不能包含汉字什么的一些条件,在这里我们是可以对输入的信息进行判断的,我们也可以自己通过JQuery自己来进行
一些条件的判断,自己就能可以做一个登录或者注册的东西.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户名密码判断</title>
//首先我们要导入jQuery的工具包
<script
4000
src="jquery-2.1.0.js"></script>
<style>
//设置两个样式,一个是正确时显示的颜色,一个是错误的时候提示的颜色,可以让我们能区分一下,调节键是不是成立,
//要不要再次重新输入什么的
.right{
color:red;
}
.error{
color:green;
}
</style>
<script>
$(function(){
//用户名
//设置失焦状态,在失焦的时候对设置的条件进行判断,看条件是否成立,判断看用户名是否为空,如果用户名为空的话,就提示用户名为空
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(0)").blur(function(){
var name=$(this).val();
if(name=="")
{
$("span:eq(0)").removeClass("right error");
$("span:eq(0)").html("用户名为空").addClass("right").show();
return false;
}
else
{
$("span:eq(0)").html("√").addClass("error").show();
}
});
//第一次密码
//在设置密码的时候要对密码的样式进行判断,如果与设置的条件不一样,就提示密码错误,调用错误的样式,如果密码
//的格式正确,就提示正确的样式,因为第一次密码不用判断,所以只要条件成立就可以显示正确的样式,在失焦的时候
//对条件开始判断.
$("input:eq(1)").blur(function(){
var a=$("#m1").val();
if(a.length<6||a.length>12)
{
$("span:eq(1)").removeClass("right error");
$("span:eq(1)").html("密码格式不对").addClass("right").show();
return false;
}
else
{
$("span:eq(1)").html("√").addClass("error").show();
}
});
//在第二次输入密码的时候就要注意了,因为还要判断密码的格式是否正确,还要判断第二次输入的密码与第一次输入的
//密码是否一致,如果这两个条件有一个不成立,那都是不成立的条件,都要现实错误的显示,如果两个条件都成立,那就走
//正确的显示样式.
//第二次密码
$("input:eq(2)").blur(function(){
var a=$("#m1").val();
var b=$("#m2").val();
if(b.length<6||b.length>12)
{
$("span:eq(2)").removeClass("right error");
$("span:eq(2)").html("密码格式不对路").addClass("right").show();
return false;
}
else
{
$("span:eq(2)").html("√").addClass("error").show();
}
if(a!=b)
{
$("span:eq(2)").removeClass("right error");
$("span:eq(2)").html("密码不相同").addClass("right").show();
return false;
}
else
{
$("span:eq(2)").html("√").addClass("error").show();
}
});
//邮箱
//设置失焦状态,在失焦的时候对设置的条件进行判断,看条件是否成立,判断看邮箱是否包含的有@,如果没有的话,就提示邮箱格式不对
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(3)").blur(function(){
var name=$(this).val();
if(name.search("@")==-1)
{
$("span:eq(3)").removeClass("right error");
$("span:eq(3)").html("邮箱格式有误").addClass("right").show();
return false;
}
else
{
$("span:eq(3)").html("√").addClass("error").show();
}
});
//手机号
//设置失焦状态,在失焦的时候对设置的条件进行判断,使用正则表达式看条件是否成立,判断看手机号格式,如果格式不正确,就提示手机号格式不对
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(4)").blur(function(){
var name=$(this).val();
var reg=/\D/;
if(name.length<7||name.length>11||reg.test(name))
{
$("span:eq(4)").removeClass("right error");
$("span:eq(4)").html("手机号格式不对").addClass("right").show();
return false;
}
else
{
$("span:eq(4)").html("√").addClass("error").show();
}
});
//身份证
//设置失焦状态,在失焦的时候对设置的条件进行判断,看条件是否成立,如果条件不成立就提示身份证格式有误,无法进行下一步
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(5)").blur(function(){
var name=$(this).val();
if(name.length!=16||name.length!=18)
{
$("span:eq(5)").removeClass("right error");
$("span:eq(5)").html("身份证格式有误").addClass("right").show();
return false;
}
else
{
$("span:eq(5)").html("√").addClass("error").show();
}
});
});
</script>
</head>
<body>
//这是一个页面的布局,比较简单,但简单明了,清晰易懂才是关键,大家可以根据自己喜欢的样式自己设置,在这里能看懂就行了
<center>
用户名:<input type="text"><span></span><br><br>
密码:<input type="password" id="m1"><span></span><br><br>
再次输入密码:<input type="password" id="m2"><span></span><br><br>
邮箱:<input type="text"><span></span><br><br>
手机号:<input type="text"><span></span><br><br>
身份证:<input type="text"><span></span><br><br>
</center>
</body>
</html>
高于多少位,不能包含汉字什么的一些条件,在这里我们是可以对输入的信息进行判断的,我们也可以自己通过JQuery自己来进行
一些条件的判断,自己就能可以做一个登录或者注册的东西.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户名密码判断</title>
//首先我们要导入jQuery的工具包
<script
4000
src="jquery-2.1.0.js"></script>
<style>
//设置两个样式,一个是正确时显示的颜色,一个是错误的时候提示的颜色,可以让我们能区分一下,调节键是不是成立,
//要不要再次重新输入什么的
.right{
color:red;
}
.error{
color:green;
}
</style>
<script>
$(function(){
//用户名
//设置失焦状态,在失焦的时候对设置的条件进行判断,看条件是否成立,判断看用户名是否为空,如果用户名为空的话,就提示用户名为空
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(0)").blur(function(){
var name=$(this).val();
if(name=="")
{
$("span:eq(0)").removeClass("right error");
$("span:eq(0)").html("用户名为空").addClass("right").show();
return false;
}
else
{
$("span:eq(0)").html("√").addClass("error").show();
}
});
//第一次密码
//在设置密码的时候要对密码的样式进行判断,如果与设置的条件不一样,就提示密码错误,调用错误的样式,如果密码
//的格式正确,就提示正确的样式,因为第一次密码不用判断,所以只要条件成立就可以显示正确的样式,在失焦的时候
//对条件开始判断.
$("input:eq(1)").blur(function(){
var a=$("#m1").val();
if(a.length<6||a.length>12)
{
$("span:eq(1)").removeClass("right error");
$("span:eq(1)").html("密码格式不对").addClass("right").show();
return false;
}
else
{
$("span:eq(1)").html("√").addClass("error").show();
}
});
//在第二次输入密码的时候就要注意了,因为还要判断密码的格式是否正确,还要判断第二次输入的密码与第一次输入的
//密码是否一致,如果这两个条件有一个不成立,那都是不成立的条件,都要现实错误的显示,如果两个条件都成立,那就走
//正确的显示样式.
//第二次密码
$("input:eq(2)").blur(function(){
var a=$("#m1").val();
var b=$("#m2").val();
if(b.length<6||b.length>12)
{
$("span:eq(2)").removeClass("right error");
$("span:eq(2)").html("密码格式不对路").addClass("right").show();
return false;
}
else
{
$("span:eq(2)").html("√").addClass("error").show();
}
if(a!=b)
{
$("span:eq(2)").removeClass("right error");
$("span:eq(2)").html("密码不相同").addClass("right").show();
return false;
}
else
{
$("span:eq(2)").html("√").addClass("error").show();
}
});
//邮箱
//设置失焦状态,在失焦的时候对设置的条件进行判断,看条件是否成立,判断看邮箱是否包含的有@,如果没有的话,就提示邮箱格式不对
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(3)").blur(function(){
var name=$(this).val();
if(name.search("@")==-1)
{
$("span:eq(3)").removeClass("right error");
$("span:eq(3)").html("邮箱格式有误").addClass("right").show();
return false;
}
else
{
$("span:eq(3)").html("√").addClass("error").show();
}
});
//手机号
//设置失焦状态,在失焦的时候对设置的条件进行判断,使用正则表达式看条件是否成立,判断看手机号格式,如果格式不正确,就提示手机号格式不对
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(4)").blur(function(){
var name=$(this).val();
var reg=/\D/;
if(name.length<7||name.length>11||reg.test(name))
{
$("span:eq(4)").removeClass("right error");
$("span:eq(4)").html("手机号格式不对").addClass("right").show();
return false;
}
else
{
$("span:eq(4)").html("√").addClass("error").show();
}
});
//身份证
//设置失焦状态,在失焦的时候对设置的条件进行判断,看条件是否成立,如果条件不成立就提示身份证格式有误,无法进行下一步
//然后返回,如果条件成立就在后面提示一个√号,表示条件成立,在错误的时候调用我们设置的错误的样式,也就是红色,在成立的时候,就调用
//成功的样式显示的绿色
$("input:eq(5)").blur(function(){
var name=$(this).val();
if(name.length!=16||name.length!=18)
{
$("span:eq(5)").removeClass("right error");
$("span:eq(5)").html("身份证格式有误").addClass("right").show();
return false;
}
else
{
$("span:eq(5)").html("√").addClass("error").show();
}
});
});
</script>
</head>
<body>
//这是一个页面的布局,比较简单,但简单明了,清晰易懂才是关键,大家可以根据自己喜欢的样式自己设置,在这里能看懂就行了
<center>
用户名:<input type="text"><span></span><br><br>
密码:<input type="password" id="m1"><span></span><br><br>
再次输入密码:<input type="password" id="m2"><span></span><br><br>
邮箱:<input type="text"><span></span><br><br>
手机号:<input type="text"><span></span><br><br>
身份证:<input type="text"><span></span><br><br>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 为什么每个请求都要有用户名密码呢，那不是每次都要查询一下了，token，表示这个用户已经验证通过了，在token有效期内，只需要判断token是否有效就可以了
- 利用js进行表单验证：判断用户名和密码非空
- iOS - 正则表达式判断邮箱、手机号码验证、车牌号验证、车型、用户名、密码、昵称、身份证号
- WCF 安全之自定义的用户名/密码身份验证
- Java登录页面实时验证用户名密码和动态验证码
- 用户名密码验证
- 验证码bug JS验证验证码 spring mvc验证用户名和密码
- 用Samba创建配置共享文件夹 (无用户名密码验证)
- Asp.net2005不用Ajax实现无刷新验证用户名、密码和中文验证码
- 客户端验证用户名和密码的方法详解
- HiveServer2用户名密码验证
- jsp 用户名、密码验证
- jquery判断密码强度的验证代码
- WebService 用户名密码验证
- js判断登陆用户名及密码是否为空的简单实例
- HTTP 和 SOAP 标头 来传递用户名密码 验证webservice用户认证
- 密码验证合格程序（判断字符串是否有重复子串）
- php验证用户名是否以字母开头与验证密码实例
- WCF服务安全控制之netTcpBinding的用户名密码验证【转】