jquery表单验证插件jquery.validate.js表单验证

 

jquery.validate.js 官网http://bassistance.de/jquery-plugins/jquery-plugin-validation/

在上面可以下载到它的例子程序和js脚本

 

说明：本人看了下例子程序，有什么不对的请大家指正。谢谢

 

使用它验证表单有2中方式：

                                   1.使用它内部定义好的验证（也就是错误提示它已经定义好了。不需要我们再定义，这种方便，简单。但不灵活。）

                                    2.自定义错误提示，这种可以自己定义错误提示。需要写的代码就相对较多了。

实例1、使用jquery验证定义好的错误提示。

 

          一。我们先建一个表单，什么验证也没有的一个表单。

代码

 

  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > jquery validate    title >
  head >
< body >
  < form   id ="commentForm"  method ="get"  action ="" >
     < fieldset >
         < legend > 请输入你的姓名，电子邮件和网址，以及你的评论   legend >
         < p >
             < label  for ="cname" > 姓名（必填，并2个字符）   label >
             < input  id ="cname"  name ="name"   />
         < p >
             < label  for ="cemail" > 电子邮件 (必填)   label >
             < input  id ="cemail"  name ="email"   />
           p >
         < p >
             < label  for ="curl" > 网址 (可选)   label >
             < input  id ="curl"  name ="url" value =""   />
           p >
         < p >
             < label  for ="ccomment" > 你的评论 (必填)   label >
             < textarea  id ="ccomment"  name ="comment" > textarea >
           p >
         < p >
             < input  type ="submit"  value ="提交" />
           p >
       fieldset >
  form >
  body >
  html >

 

 

           2.添加验证

 现在我们来添加验证。

1.引入jquery脚本

2.在表单上添加要验证的属性

 

 

             < label  for ="cname" > 姓名（必填，并2个字符）   label >
             < input  id ="cname"  name ="name"   />

 

 

 

如:我们要验证姓名 必填和至少2个字符

只需要添加 class="required" minlength="2" 这2个属性表示什么意思就不说了。

             < label  for ="cname" > 姓名（必填，并2个字符）   label >
             < input  id ="cname"  name ="name"  class ="required"  minlength ="2"   />

 

同理要验证其他文本框也只需要添加相应的属性就行了。

 

代码

< form  class ="cmxform"  id ="commentForm"  method ="get"  action ="" >
     < fieldset >
         < legend > 请输入你的姓名，电子邮件和网址，以及你的评论   legend >
         < p >
             < label  for ="cname" > 姓名（必填，并2个字符）   label >
             < input  id ="cname"  name ="name"  class ="required"  minlength ="2"   />
         < p >
             < label  for ="cemail" > 电子邮件 (必填)   label >
             < input  id ="cemail"  name ="email"  class ="required email"   />
           p >
         < p >
             < label  for ="curl" > 网址 (可选)   label >
             < input  id ="curl"  name ="url"  class ="url"  value =""   />
           p >
         < p >
             < label  for ="ccomment" > 你的评论 (必填)   label >
             < textarea  id ="ccomment"  name ="comment"  class ="required" > textarea >
           p >
         < p >
             < input  class ="submit"  type ="submit"  value ="提交" />
           p >
       fieldset >
  form >

 

 

但这样还不行，因为这样只是把表单定义了属性，在js中并没有验证。还需要在js中添加一句代码。

  $(FormName).validate(); 使用这个方法验证表单

< script  type ="text/javascript"   >
$.validator.setDefaults({
submitHandler:  function () {
alert( " 已经提交! " ); 
    }
});
$().ready( function () {
    $( " #commentForm " ).validate();
});
  script >

 

OK,一个表单验证搞定··

但还有点不完美，怎么定义错误信息的样式呢？我想让错误信息显示红色提示。

 

    

 

效果:

 

我们看到的是显示英文，下面我们来自定义错误提示。

 

其实自定义错误提示，就是重写$(formName).validate();这个方法

  

 现在我们可以把表单上的验证属性去掉，在js中添加要验证的属性和错误提示。

完整代码如下：

代码

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 试试 title >
    
     < style  type ="text/css" >
        /* **** */
        form.cmxform label.error, label.error  {
            color :  red ;
            font-style :  italic ;
         }
     style >
head >
< script  type ="text/javascript"  src ="jquery-1.3.2.js" > script >

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

< script  type ="text/javascript"   >

$.validator.setDefaults({
submitHandler:  function () {
alert( " 已经提交! " ); 
    }
});

$().ready( function () {
    $( " #commentForm " ).validate({
        rules: {
            name: {
                required: true ,
                minlength: 2
            },
            email: {
                required:  true ,
                email:  true
            }
        },
        messages: {
            name: {
                required: " 姓名必填 " ,
                minlength: " 至少2个字符 "
            },
            email: " 请输入一个邮件地址 "
        }
    });
});


script >

< body >
  < form  class ="cmxform"  id ="commentForm"  method ="get"  action ="" >
     < fieldset >
         < legend > 请输入你的姓名，电子邮件和网址，以及你的评论 legend >
         < p >
             < label  for ="cname" > 姓名（必填，并2个字符） label >
             < input  id ="cname"  name ="name"   />
         < p >
             < label  for ="cemail" > 电子邮件 (必填) label >
             < input  id ="email"  name ="email"   />
         p >
         < p >
             < label  for ="curl" > 网址 (可选) label >
             < input  id ="curl"  name ="url"  value =""   />
         p >
         < p >
             < label  for ="ccomment" > 你的评论 (必填) label >
             < textarea  id ="ccomment"  name ="comment"   > textarea >
         p >
         < p >
             < input  class ="submit"  type ="submit"  value ="提交" />
         p >
     fieldset >
form >
body >
html >

 

 

 

自定义错误提示后：

 

错误提示成了我们定于的提示了。

 

 

OK,完结······