首页 > 代码库 > 前端邮箱验证
前端邮箱验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.mamicode.com/jquery.min.js"></script>
<script>
$(function(){
$("#userEmail").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‘>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‘>ok</span>" );
}else {
$(this).after( "<span class=‘error‘>error</span>" );
}
});
$("#reg :submit").click(function(){
$("#userEmail").triggerHandler( "blur" );
$("#pwd").triggerHandler( "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" id="reg">
<p>
邮箱:
<input type="text" name="userEmail" id="userEmail">
</p>
<p>
密码:
<input type="password" name="pwd" id="pwd">
</p>
<p>
<input type="submit" value="http://www.mamicode.com/注册" >
</p>
</form>
</body>
</html>
前端邮箱验证