html前端登录验证
程序员文章站
2022-06-19 18:26:39
Document 邮箱: 密码: ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<script src="../jquery-1.7.2/jquery.min.js"></script>
<script>
$(function(){
//onblur: 光标离开控件，会触发onblur事件
$("#email").blur(function(){
var re = /^\w+@\w+(\.\w+){1,3}$/;
if ( $(this).parent().find( "span" ).length > 0 ) {
$(this).parent().find( "span" ).remove();
}
if ( re.test( $(this).val() ) ) {
$(this).after( "<span class='ok'>格式正确</span>" );
}else {
$(this).after( "<span class='error'>格式错误</span>" );
}
});
$("#pwd").blur(function(){
var re = /^\w{6,20}$/;
if ( $(this).parent().find( "span" ).length > 0 ) {
$(this).parent().find( "span" ).remove();
}
if ( re.test( $(this).val() ) ) {
$(this).after( "<span class='ok'>格式正确</span>" );
}else {
$(this).after( "<span class='error'>格式错误</span>" );
}
});
$("#reg :submit").click(function(){
$("#email").trigger("blur");
$("#pwd").trigger("blur");
if ( $("#reg").find(".error").length > 0 ) {
return false;
}
});
});
</script>
<style>
.ok {
color:green;
}
.error {
color:red;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="reg">
<p class=emailparent>
邮箱: <input type="text" name="email" id="email">
</p>
<p>
密码: <input type="text" name="pwd" id="pwd">
</p>
<p>
<input type="submit" id="submit" value="注册" >
</p>
</form>
</body>
</html>
上一篇： c语言 判断字符串长度 实现
下一篇： HTML5 canvas 在线涂鸦