jQuery插件Validate实现自定义校验结果样式

来源：互联网发布：支付宝淘宝霸王条款编辑：程序博客网时间：2024/06/04 23:23

1、引入依赖

<script src=

"../../scripts/jquery-1.3.1.js"type="text/javascript"></script>

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

></script>

2、添加错误样式

em.error {
 background:url("images/unchecked.gif")no-repeat 0px0px;
 padding-left:16px;
}
em.success {
 background:url("images/checked.gif")no-repeat 0px0px;
 padding-left:16px;
}

3、自定义提示信息

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

4、调用错误样式，或是成功样式

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

5、详细的代码

<html>
<head>
  <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>jQuery表单验证插件----自定义错误样式</title>
 <scriptsrc="../../scripts/jquery-1.3.1.js"type="text/javascript"></script>
 <scriptsrc="lib/jquery.validate.js"type="text/javascript"></script>
 
<styletype="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; }
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;
}
 
</style>
 
 <scripttype="text/javascript">
 $(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类
    }
 
   });
 
 });
 </script>
  
</head>
<body>
  
 
 <formclass="cmxform"id="commentForm"method="get"action="">
 <fieldset>
  <legend>jQuery表单验证插件----自定义校验结果样式</legend>
  <p>
   <labelfor="cusername">姓名</label>
   <em>*</em><inputid="cusername"name="username"size="25"/>
  </p>
  <p>
   <labelfor="cemail">电子邮件</label>
   <em>*</em><inputid="cemail"name="email"size="25"/>
  </p>
  <p>
   <labelfor="curl">网址</label>
   <em> </em><inputid="curl"name="url"size="25"value=""/>
  </p>
  <p>
   <labelfor="ccomment">你的评论</label>
   <em>*</em><textareaid="ccomment"name="comment"cols="22"rows="2"></textarea>
  </p>
  <p>
   <inputclass="submit"type="submit"value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

0 0