+ -
当前位置:首页 → 问答吧 → validate如何使用?

validate如何使用?

时间:2010-02-28

来源:互联网

<!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>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.validate.messages_cn.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
nihao.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}
nihao.success {
  background:url("images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

</style>
<script>
$(function()
{

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

$(
  function()
      {
          $("#commentForm").validate
        (
             {
                rules:
                {
                    username:{required:true,minlength:6},
                    email:{required:true,email:true},
                    url:"url",
                    comment: "required",
                    valcode: {
                formula: "7+9"    
            }

                },
                
                messages:
                {
                    username:{required:'请输入姓名',minlength:'至少输入6个字符'},
                    email:{required:'请输入电子邮箱',email:'请检查电子邮箱的格式'},
                    url:'请检查网址的格式',
                    comment: "请输入您的评论",
                    valcode:{required:'请输入验证码'}
                },
                errorElement: "nihao", //可以用其他标签,记住把样式也对应修改
        success: function(lable) {
            
            lable.text("成功")                //清空错误提示消息
                /addClass("success");    //加上自定义的success类

        
        //}
            }
         )

      }
  )
</script>
<title>无标题文档</title>
</head>

<body>
<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="required" minlength="2" />

   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">网址</label>

     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
   验证码<input id="cvalcode" name="valcode" size="25"  value="" />=7+9

   </p>
   <p>

     <input class="submit" type="submit" value="提交"/>
   </p>
</fieldset>
</form>

</body>
</html>

以上代码中的开头的自定义的验证方法看不明白,还有最后的一段代码:
                                success: function(lable) {
                     lable.text("成功")                //清空错误提示消息
                /addClass("success");    //加上自定义的success类
这三句代码是什么意思呢,好像是可有可无的,存不存在都一样啊

作者: ddjiang1115   发布时间: 2010-02-28