php用户注册页面利用js进行表单验证具体实例

复制代码 代码如下:

Validation插件是jquery为我们提供的一款非常吵错的表单验证插件了,相比以前的js表单验证要简单的多了,下面我来介绍Validation插件表单验证实例.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“”>
<html xmlns=””>
 <head>
  <title> new document </title>
  <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
  <style type=”text/css”>
<!–
.style3 {color: #0000FF}
.style4 {
 font-size: 12;
 font-weight: bold;
}
.style5 {
 color: #FF0000;
 font-size: 16px;
 font-weight: bold;
}
.style6 {
 font-size: 16px;
 font-weight: bold;
}
.style7 {color: #FF0000}
.style13 {
 font-size: 12px;
 font-weight: bold;
}
–>
  </style>
 </head>

   
       

本实例涉及到的验证有:

<body>
 <table width=”1196″ border=”0″>
   <tr>
     <td width=”999″><img src=”image/logo.gif” width=”87″
height=”40″ /></td>
     <a href=”#”><td
width=”96″>[新用户注册]</td></a>
     <a href=”Untitled-6.htm”><td width=”79″><span
class=”style3″>帮助</span></td></a>
   </tr>
</table>
<hr color=”#FF00FF”;>
 <p align=”center” class=”style4″>注册步骤: <span
class=”style7″>1.填写信息</span> > 2.验证邮箱 >
3.注册成功</p>
 <p class=”style5″>以下均为必填项</p>
 <table width=”992″ height=”322″ border=”1″>
   <tr>
     <td width=”261″ bgcolor=”#33CCFF”><div
align=”right”>请填写你的EMAIL地址:</div></td>
     <td width=”715″><form name=”form1″ id=”form1″
method=”post” action=””>
       <input type=”text” name=”textfield” />
      
<strong>请填写有效的EMAIL地址,在下一步中你将用此邮箱接收验证邮件。</strong>    
     </form></td>
   </tr>
   <tr>
     <td bgcolor=”#33CCFF”><div
align=”right”>设置你在当当网的昵称:</div></td>
     <td><form name=”form2″ id=”form2″ method=”post”
action=””>
       <input type=”text” name=”textfield” />
       <span
class=”style13″>你的昵称可以由小写英文字母,中文,数学组成,长度4-20个字符,一个汉字为两个字符。</span>    
     </form></td>
   </tr>
   <tr>
     <td bgcolor=”#33CCFF”><div
align=”right”>设置密码:</div></td>
     <td><form name=”form3″ id=”form3″ method=”post”
action=””>
       <input type=”password” name=”textfield” />
      
<strong>你的密码可以由大小写英文字母,数字组成,长度6-20位。</strong>    
     </form></td>
   </tr>
   <tr>
     <td bgcolor=”#33CCFF”><div
align=”right”>再次输入你设置的密码:</div></td>
     <td><form name=”form4″ id=”form4″ method=”post”
action=””>
       <input type=”password” name=”textfield” />
     </form></td>
   </tr>
   <tr >
     <td colspan=”2″><div align=”center”>
       <form action=”” method=”post” enctype=”multipart/form-data”
name=”form5″ id=”form5″>
         <a href=”#”><span class=”style6″ >
</span></a>
         <div>
   <input type=”submit” value=”注册” name=”form5″>
   </div>
       </form>
       </div></td>
   </tr>
</table>
 <p class=”style5″> </p>
</body>
</html>

 
       

用户名:长度、字符验证,重复性ajax验证(是否已存在)。

用户注册 – 脚本之家

密码:长度验证,重复输入密码验证。

       
       
       

邮件:邮件地址验证。

       

固定电话:中国大陆固定电话号码验证。

   
   
       

手机号:中国大陆手机号码验证。

       
            注册步骤:1.填写信息 >
2.验证邮箱 > 3.注册成功
        <>
       
           

网址:网站URL地址验证。

               

日期:标准日期格式验证。

以下均为必填项

               

                   

                       

请填写您的Email地址:

                       

                           
                           
                               

请填写有效的Email地址。

澳门新葡萄京官网注册 ,                               
                            <>
                       

                   

                   

                       

设置您在脚本之家的昵称:

                       

                           
                           
                               

由小写英文字母、中文、数字组成,长度4-20个字符,一个汉字为两个字符。

                               
                            <>
                       

                   

                   

                       

设置密码:

                       

                           
                           
                               

您的密码可以由大小写英文字母、数字组成,长度6-20位。

                               
                            <>
                       

                   

                   

                       

再次输入您设置的密码:

                       

                           
                           
                           
                            <>
                       

                   

                   

                       

验证码:

                       

                           
澳门新葡萄京官网注册 1
                           
                           
                               

                                    请输入图片中的四个字母。                                    
                                   
看不清楚?换个图片
                                   

                                   
                               

                            <>
                       

                   

               

               
                   
                <>
           

        <>
       

   

数字:整数、正整数验证,数字范围验证。

身份证:大陆身份证号码验证。

邮政编码:大陆邮政编码验证。

文件:文件类型(后缀)验证,如只允许上传图片。

IP:IP地址验证。

验证码:验证码ajax验证。

Sep17实例讲解表单验证插件Validation的应用helloweba.com Author:月光光
Time:2010-09-17 11:41 Tag: validation  jquery插件  表单验证 
jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。在以前做过的几个项目中,我都用到了Validation,现在结合实际情况,我把项目中经常要用到的验证整理成一个实例DEMO,本文就是通过讲解这个实例来理解Validation的应用。

 
本实例涉及到的验证有:

用户名:长度、字符验证,重复性ajax验证(是否已存在)。

密码:长度验证,重复输入密码验证。

邮件:邮件地址验证。

固定电话:中国大陆固定电话号码验证。

手机号:中国大陆手机号码验证。

网址:网站URL地址验证。

日期:标准日期格式验证。

数字:整数、正整数验证,数字范围验证。

身份证:大陆身份证号码验证。

邮政编码:大陆邮政编码验证。

文件:文件类型(后缀)验证,如只允许上传图片。

IP:IP地址验证。

验证码:验证码ajax验证。

Sep

17

 

实例讲解表单验证插件Validation的应用

helloweba.com Author:月光光 Time:2010-09-17 11:41 Tag:
validation jquery插件 表单验证 

 

jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。在以前做过的几个项目中,我都用到了Validation,现在结合实际情况,我把项目中经常要用到的验证整理成一个实例DEMO,本文就是通过讲解这个实例来理解Validation的应用。

 

本实例涉及到的验证有:

用户名:长度、字符验证,重复性ajax验证(是否已存在)。

密码:长度验证,重复输入密码验证。

邮件:邮件地址验证。

固定电话:中国大陆固定电话号码验证。

手机号:中国大陆手机号码验证。

网址:网站URL地址验证。

日期:标准日期格式验证。

数字:整数、正整数验证,数字范围验证。

身份证:大陆身份证号码验证。

邮政编码:大陆邮政编码验证。

文件:文件类型(后缀)验证,如只允许上传图片。

IP:IP地址验证。

验证码:验证码ajax验证。

使用方法:

1、准备jquery和jquery.validate插件

 代码如下

复制代码

<script type=”text/javascript” src=”js/jquery.js”></script> 
<script type=”text/javascript” src=”js/jquery.validate.js”></script> 

2、准备CSS样式

页面样式我不再详述,大家可以自己写个样式,也可以参看DEMO的页面源代码。这里要强调的关键样式是要显示验证信息的样式:

 代码如下

复制代码

label.error{color:#ea5200; margin-left:4px; padding:0px 20px;  
background:url(images/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background: 
url(images/checked.gif) no-repeat 2px 0} 

3、XHTML

 代码如下

复制代码

<form id=”myform” action=”#” method=”post”> 
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”mytable”> 
  <tr class=”table_title”> 
    <td colspan=”2″>jquery.validation 表单验证</td> 
  </tr> 
  <tr> 
    <td width=”22%” align=”right”>用户名:</td> 
    <td><input type=”text” name=”user” id=”user” class=”input required” /> 
    <p>用户名为3-16个字符,可以为数字、字母、下划线以及中文</p></td> 
  </tr> 
  <tr> 
    <td align=”right”>密码:</td> 
    <td><input type=”password” name=”pass” id=”pass” class=”input required” /> 
    <p>最小长度:6 最大长度:16</p> 
    </td> 
  </tr> 
  <tr> 
    <td align=”right”>确认密码:</td> 
    <td><input type=”password” name=”repass” class=”input required” /></td> 
  </tr> 
</table> 
</form> 

限于篇幅,本文的只截取了实例中HTML代码的一小部分,详细XHTML代码可参看页面DEMO源代码。值得一提的是,我在给了标签一个“required”类样式,下文将会提到它的作用。

4、应用Validation插件

调用Validation插件的方法:

 代码如下

复制代码

$(function(){        
    var validate = $(“#myform”).validate({ 
         rules:{ //定义验证规则 
            …… 
         }, 
         messages:{ //定义提示信息 
            …… 
         } 
    }) 
}); 

rules:定义验证规则,key:value的形式,key是要验证的元素,value可以是字符串或对象。比如验证用户名的长度和不允许为空:

 代码如下

复制代码

rules:{ 
  user:{ 
      required:true, 
      maxlength:16, 
      minlength:3 
  }, 
  …… 

 

其实我们在XHTML代码中可以直接指定input的class属性为required,作用是不允许为空,这样在JS部分就不用重复写了。同样的验证email等,直接设置input的class属性为email。

messages:定义提示信息,key:value的形式key是要验证的元素,值是字符串或函数,当验证不通过时提示的信息。

 代码如下

复制代码

messages:{ 
  user:{ 
      required:”用户名不能为空!”, 
      remote:”该用户名已存在,请换个其他的用户名!” 
  }, 
  …… 

 

本例中涉及的验证JS就是按照上面的规则进行编写的,Validation插件封装了好多基本的验证方式,如下:

required:true 必须有值,不能为空

remote:url
可以用于判断用户名等是否已经存在,服务器端输出true,表示验证通过

minlength:6 最小长度为6

maxlength:16 最大长度为16

rangelength:长度范围

range:[10,20] 数值范围在10-20之间

email:true 验证邮件

url:true 验证URL网址

dateISO:true 验证日期格式’yyyy-mm-dd’

digits:true 只能为数字

accept:’gif|jpg’ 只接受gif或jpg为后缀的图片。常用于验证文件的扩展名

equalTo:’#pass’ 与哪个表单字段的值相等,常用于验证重复输入密码

此外,我还根据项目实际情况扩展了几个验证,验证的代码在validate-ex.js,使用前需要先加载这个JS。它能提供以下验证:

userName:true 用户名只能包括中文字、英文字母、数字和下划线

isMobile:true 手机号码验证

isPhone:true 大陆手机号码验证

isZipCode:true 邮政编码验证

isIdCardNo:true 大陆身份证号码验证

ip:true IP地址验证

以上提供的验证方式基本上满足我们在大多数项目中的需求。如果其他特殊验证需求,可以扩展,方法如:

 代码如下

复制代码

jQuery.validator.addMethod(“isZipCode”, function(value, element) {     
  var zip = /^[0-9]{6}$/;     
  return this.optional(element) || (zip.test(value));     
}, “请正确填写您的邮政编码!”);  

疑难问题解决

1、在项目中遇到在验证用户名是否存在时,发现不支持中文输入验证。我的解决办法是给用户名进行encodeURIComponent编码,后台PHP再对接受的值进行urldecode解码

 代码如下

复制代码

user:{ 
    remote: {  
         url: “chk_user.php”, //服务端验证程序 
         type: “post”, //提交方式 
         data: { user: function() {  
             return encodeURIComponent($(“#user”).val()); //编码数据 
         }}  
    }  
}, 

服务端验证程序chk_user.php的代码:

 代码如下

复制代码

<?php 
$request = urldecode(trim($_POST[‘user’])); 
usleep(150000); 
$users = array(‘月光光’, ‘jeymii’, ‘Peter’, ‘helloweba’); 
$valid = ‘true’; 
foreach($users as $user) { 
    if( strtolower($user) == $request ) 
        $valid = ‘false’; 

echo $valid; 
?> 

 

我使用的服务端程序是PHP,您也可以使用ASP,ASP.NET,JAVA等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。

2、在验证checkbox和radio控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。

解决办法是在validate({})追加以下代码:

 代码如下

复制代码

errorPlacement: function(error, element) { 
    if ( element.is(“:radio”) ) 
        error.appendTo ( element.parent() ); 
    else if ( element.is(“:checkbox”) ) 
        error.appendTo ( element.parent() ); 
    else if ( element.is(“input[name=captcha]”) ) 
        error.appendTo ( element.parent() ); 
    else 
        error.insertAfter(element); 

3、重置表单。Form表单原始的重置方法是reset自带

<input type=”reset” value=”重 置” /> 

 

点击“重置”按钮,表单元素将会重置,但是再运行Validation插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢Validation提供了重置表单的方法:resetForm()

 代码如下

复制代码

$(“input:reset”).click(function(){ 
    validate.resetForm(); 
}); 

下面这个实例是我自己使用的分享给大家

 代码如下

复制代码

/**//** 
 * @author ming 
 */ 
$(document).ready(function(){      
        
/**//* 设置默认属性 */      
$.validator.setDefaults({      
    submitHandler: function(form) {   
        form.submit();   
    }      
});  
 
// 字符验证      
jQuery.validator.addMethod(“stringCheck”, function(value, element)
{      
    return this.optional(element) ||
/^[u0391-uFFE5w]+$/.test(value);      
}, “只能包括中文字、英文字母、数字和下划线”);  
 
// 中文字两个字节      
jQuery.validator.addMethod(“byteRangeLength”, function(value, element,
param) {      
    var length = value.length;      
    for(var i = 0; i < value.length; i++){      
        if(value.charCodeAt(i) > 127){      
        length++;      
        }      
    }      
    return this.optional(element) || ( length >= param[0] && length
<= param[1] );      
}, “请确保输入的值在3-15个字节之间(一个中文字算2个字节)”);  
 
// 身份证号码验证      
jQuery.validator.addMethod(“isIdCardNo”, function(value, element)
{      
    return this.optional(element) || isIdCardNo(value);      
}, “请正确输入您的身份证号码”);   
    
// 手机号码验证      
jQuery.validator.addMethod(“isMobile”, function(value, element)
{      
    var length = value.length;  
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;  
    return this.optional(element) || (length == 11 &&
mobile.test(value));      
}, “请正确填写您的手机号码”);      
    
// 电话号码验证      
jQuery.validator.addMethod(“isTel”, function(value, element) {      
    var tel = /^d{3,4}-?d{7,9}$/;    //电话号码格式010-12345678  
    return this.optional(element) || (tel.test(value));      
}, “请正确填写您的电话号码”);  
 
// 联系电话(手机/电话皆可)验证  
jQuery.validator.addMethod(“isPhone”, function(value,element) {  
    var length = value.length;  
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;  
    var tel = /^d{3,4}-?d{7,9}$/;  
    return this.optional(element) || (tel.test(value) ||
mobile.test(value));  
 
}, “请正确填写您的联系电话”);  
    
// 邮政编码验证      
jQuery.validator.addMethod(“isZipCode”, function(value, element)
{      
    var tel = /^[0-9]{6}$/;      
    return this.optional(element) || (tel.test(value));      
}, “请正确填写您的邮政编码”);   
 
//开始验证  
$(‘#submitForm’).validate({  
    /**//* 设置验证规则 */ 
    rules: {  
        username: {  
            required:true,  
            stringCheck:true,  
            byteRangeLength:[3,15]  
        },  
        email:{  
            required:true,  
            email:true 
        },  
        phone:{  
            required:true,  
            isPhone:true 
        },  
        address:{  
            required:true,  
            stringCheck:true,  
            byteRangeLength:[3,100]  
        }  
    },  
      
    /**//* 设置错误信息 */ 
    messages: {  
        username: {      
            required: “请填写用户名”,  
            stringCheck:
“用户名只能包括中文字、英文字母、数字和下划线”,  
            byteRangeLength:
“用户名必须在3-15个字符之间(一个中文字算2个字符)”      
        },  
        email:{  
            required: “请输入一个Email地址”,  
            email: “请输入一个有效的Email地址” 
        },  
        phone:{  
            required: “请输入您的联系电话”,  
            isPhone: “请输入一个有效的联系电话” 
        },  
        address:{  
            required: “请输入您的联系地址”,  
            stringCheck: “请正确输入您的联系地址”,  
            byteRangeLength: “请详实您的联系地址以便于我们联系您” 
        }  
    },  
      
    /**//* 设置验证触发事件 */ 
    focusInvalid: false,  
    onkeyup: false,  
      
    /**//* 设置错误信息提示DOM */ 
    errorPlacement: function(error, element) {      
        error.appendTo( element.parent());      
    },    
      
});  
 
});

测试页index.html

 代码如下

复制代码

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”  
“; 
<html xmlns=”; 
    <head> 
        <meta http-equiv=”Content-Type” content=”text/html;
charset=gbk” /> 
        <title>jQuery验证</title> 
        <script src=”lib/jquery/jquery-1.3.2.min.js”
></script> 
        <script type=”text/javascript”
src=”lib/jquery/jquery.validate.js”
mce_src=”lib/jquery/jquery.validate.js”></script> 
        <script type=”text/javascript”
src=”lib/jquery/messages_cn.js”></script> 
        <script type=”text/javascript”
src=”lib/jquery/formValidatorClass.js”></script> 
        <style type=”text/css”>

        * {}{   
            font-family: Verdana;   
            font-size: 96%;   
        }  
        label {}{   
            width: 10em;   
            float: left;   
        }  
        label.error {}{   
            float: none;   
            color: red;   
            padding-left: .5em;   
            vertical-align: top;   
        }  
        p {}{   
            clear: both;   
        }  
        .submit {}{   
            margin-left: 12em;   
        }  
        em {}{   
            font-weight: bold;   
            padding-right: 1em;   
            vertical-align: top;   
        }  
          
</style>
    </head> 
    <body> 
        <form class=”submitForm” id=”submitForm” method=”get”
action=””> 
         <fieldset> 
           <legend>表单验证</legend> 
           <p> 
             <label for=”username”>用户名</label> 
             <em>*</em><input id=”userName”
name=”username” size=”25″ /> 
           </p> 
           <p> 
             <label for=”email”>E-Mail</label> 
             <em>*</em><input id=”email” name=”email”
size=”25″ /> 
           </p> 
           <p> 
             <label for=”phone”>联系电话</label> 
             <em>*</em><input id=”phone” name=”phone”
size=”25″ value=”” /> 
           </p> 
           <p> 
             <label for=”address”>地址</label> 
             <em>*</em><input id=”address”
name=”address” size=”22″> 
           </p> 
             <input class=”submit” type=”submit” value=”提交”/> 
           </p> 
          </fieldset> 
         </form> 
    </body> 
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注