表单验证-用validate插件

<script type="text/javascript">


  $(document).ready(function(){

     //自定义一个验证方法
     $.validator.addMethod(
     "formula",     //验证方法名称
     function(value, element, param) {    //验证规则
          return value == eval(param);
     },
     '请正确输入数学公式计算后的结果'//验证提示信息
     );

     $("#commentForm").validate({
          rules: {
               username: {
                    required: true,
                    minlength: 2
               },
               email: {
                    required: true,
                    email: true
               },
               url:"url",
               comment: "required",
               valcode: {
                    formula: "7+9"    
               }
          },
         
          messages: {
               username: {
                    required: '请输入姓名',
                    minlength: '请至少输入两个字符'
               },
               email: {
                    required: '请输入电子邮件',
                    email: '请检查电子邮件的格式'
               },
               url: '请检查网址的格式',
               comment: '请输入您的评论'
          },    
         
          errorElement: "em",                    //用来创建错误提示信息标签
          success: function(label) {               //验证成功后的执行的回调函数
               //label指向上面那个错误提示信息标签em
               label.text(" ")                    //清空错误提示消息
                    .addClass("success");     //加上自定义的success类
          }


       });

  });


</script>

---

---

---

---

---

 

<h1>表单验证-用validate插件</h1>
<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:'请至少输入2个字符'}}}" />
   </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="url" value="{validate:{url:true,messages:url:{'请检查网址的格式'}}}" />
   </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>