您的位置:首页 > Web前端 > JQuery

jquery ----简单的邮箱(Email)验证

2013-05-08 15:57 183 查看
JS1:

<script language="javascript">$(document).ready(function(){
	$('.error').hide();
	$('.submit').click(function(event){
		var email=$('.email').val();
		if(valid_email(email)) {
			$('.error').hide();
			} else {
			$('.error').show();
			event.preventDefault();
		}
	});
});
function valid_email(email) {
var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+(com|cn)$/);
  return patten.test(email);
}
</script>


HTML1:

<div class="test_email">
  <span>请输入电子邮件:</span>
  <input type="text" class="email" name="email" />
  <span class="error">非法的电子邮件地址!</span>
  <input type="submit" value="提交" class="submit" />
 </div>


---------------------------------------------------------------------------------------------------------------------------------------

JS2:

<script type="text/javascript">
	$("#mi_in").focus( function(){  $(this).css("color","#a0a0a0"),$(".mi-sub").addClass("mi-sub-blue")})				
	$("#mi_in").blur( function(){					
		var email=$("#mi_in").val();
		if(valid_email(email)){
			$(".mi-sub").addClass("mi-sub-def").removeClass("mi-sub-red").removeClass("mi-sub-blue");
			$(this).css("color","#a0a0a0")					
		}else{
			$(this).val("请输入您的正确邮箱地址").css("color","red"),
			$(".mi-sub").addClass("mi-sub-red").removeClass("mi-sub-def").removeClass("mi-sub-blue");						
			$("#mi_in").focus( function(){ $(".mi-sub").addClass("mi-sub-blue").removeClass("mi-sub-red").removeClass("mi-sub-def")})							
		}								
		})
	function valid_email(email) {
		var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+(com|cn)$/);
		return patten.test(email);
	}
</script>


HTML2:

<div class="mi-sub mi-sub-def png">
      <input type="text" id="mi_in" value="请输入您的正确邮箱地址" onBlur="if(this.value=='') { this.value='请输入您的正确邮箱地址';}"
        onFocus="if(this.value=='请输入您的正确邮箱地址') { this.value='';}" />
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: