jQuery表单注册验证简单介绍

表单注册和登陆一般都会有验证功能，否则可能会输入一些非法的字符给网站带来威胁，或者说填写内容格式错误，导致用户填写的内容出现失误，比如邮箱有可能输错或者说两次输入的密码不一致等等，总之进行表单验证的好处多多，否则可能出现意想不到的麻烦，下面是一段简单的表单注册代码实例，希望能够给大家带来一定的帮助，代码实例如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="https://www.51qianduan.com/" />
<title>注册表单验证实例代码-51前端</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $(":input.required").each(function(){ 
    var $required=$("<strong>*</strong>"); 
    $(this).parent().append($required); 
  }); 
  $(":input.required").blur(function(){ 
    if($(this).is("#username")){ 
      $(".formtip").remove(); 
      if(this.value==""||this.value.length<6){ 
       var errMsg="<span class='formtip'>用户名至少是6个字母</span>"; 
       $(this).parent().append(errMsg); 
     }
     else{ 
       var msg="<span class='formtip'>用户名可以使用</span>"; 
       $(this).parent().append(msg); 
     } 
   } 
   if($(this).is("#email")){ 
     $(".emailtip").remove(); 
     var reg = /^\\w{1,}@\\w+\\.\\w+$/; 
     var $email=$("#email").val(); 
     if(!reg.test($email)){ 
       var errMsg="<span class='emailtip'>邮箱不合法</span>"; 
       $(this).parent().append(errMsg); 
     }
     else{ 
       var Msg="<span class='emailtip'>邮箱可以使用</span>"; 
       $(this).parent().append(Msg); 
     } 
   } 
})
}) 
</script> 
</head> 
<body> 
<form action="#" method="post"> 
<div class="int">姓名:<input type="text" name="username" id="username" class="required"/></div> 
<div class="int">邮箱:<input type="text" id="email" class="required"/></div> 
<div class="int">资料:<input type="text" id="personInfo" class="required"/></div> 
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/> 
</form> 
</body> 
</html>

代码描述：jQuery表单注册验证。jQuery表单注册验证简单介绍

下载全部收藏

115 153

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册