jQuery表单验证插件Validation中两种自定义验证信息的方法

方法一：在使用Class属性值的内部添加messages如下：

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true,minlength:2,messages:{required:'请输入姓名',minlength:'请输入至少两个字符'}}}" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true,messages:{required:'请输入电子邮件',email:'请检查邮件的格式'}}}" />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25"  class="{validate:{url:true,messages:{url:'请检查网址的格式'}}}" value="" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="{validate:{required:true,messages:{required:'请输入您的评论'}}}"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="提交"/>
   </p>
 </fieldset>
 </form>

其jquery部分为：

$(document).ready(function(){
   $("#commentForm").validate({meta:"validate"});
});

其显示结果为：

方法二：当使用name属性值进行关联字段和验证规则的验证写法时，其html如下：

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25"  value="" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" rows="2"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="提交"/>
   </p>
 </fieldset>
 </form>

与方法一中的不同之处为，去掉了class属性。但是在jquery部分与方法一种有很大不同：

$(document).ready(function(){


$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
},

messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},

errorElement: "em", //可以用其他标签，记住把样式也对应修改
success: function(label) {
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}


 });


  });

其效果图如下：

上述jquery代码中绿色部分是为了在验证信息前面添加图片来提醒用户是否输入成功，除了在jquery中添加上述代码之外，还需要在style标签中添加em.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}
em.success {
  background:url("images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}