码迷,mamicode.com
首页 > 其他好文 > 详细

前端邮箱验证

时间:2016-12-12 14:43:53      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:email   gre   put   ror   on()   input   return   rem   com   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="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="注册" >
</p>
</form>
</body>
</html>

前端邮箱验证

标签:email   gre   put   ror   on()   input   return   rem   com   

原文地址:http://www.cnblogs.com/fhcd/p/6163971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!