jquery实现的表单注册验证代码实例

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" />
<title>注册表单验证实例代码-蚂蚁部落</title>
<script type="text/javascript" src="http://www.softwhy.com/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>

以上代码实现了简单的表单验证功能，下面简单介绍一下实现过程。

一.实现原理:
原理比较简单，咱们这里就直说主要部分，为文本框注册blur事件处理函数，当文本框失去焦点的时候，就会进行相应的验证，并给出相应的提示，这里就不多说了，具体可以参阅代码注释。
二.代码注释:
1.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.$(":input.required").each(function(){}),遍历一每一个匹配的元素，并以匹配元素作为上下文去执行函数。
3.var $required=$("<strong>*</strong>")，创建一个对象。
4.$(this).parent().append($required)，为input元素的父元素也就是div的内部的尾部添加$required。
5.$(":input.required").blur(function(){})，为具有class属性值为required的input元素注册blur事件处理函数。
6.if($(this).is("#username"))，判断当期啊元素是否是输入姓名的文本框。
7.$(".formtip").remove()，移除class属性值为formtip的节点，之所以一开始就要移除为了防止之前的提示和当前提示一起出现。
8.if(this.value==""||this.value.length<6)，如果输入姓名文本框的内容为空或者长度小于6.
9.var errMsg="<span class='formtip'>用户名至少是6个字母</span>"，声明一个字符串。
10.$(this).parent().append(errMsg)，为当前元素的父元素也就是div的内部的后部添加上面声明的字符串。
三.相关阅读:
1.each()函数可以参阅jQuery的each()方法一章节。
2..parent()函数可以参阅jQuery的parent()方法一章节。
3.append()函数可以参阅jQuery的append()方法一章节。
4.blur事件可以参阅jQuery的blur事件一章节。
5.is()函数可以参阅jQuery的is()方法一章节。
6.remove()函数可以参阅jQuery的remove()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8850

更多内容可以参阅;http://www.softwhy.com/jquery/

jquery实现的表单注册验证代码实例

猜你喜欢