About the code of jQuery plug-in Validate to implement custom verification result style-JS Tutorial-php.cn

About the code of jQuery plug-in Validate to implement custom verification result style

不言

Release： 2018-06-25 13:43:32

Original

2108 people have browsed it

This article mainly introduces the jQuery plug-in Validate method to implement custom verification result styles. Interested friends can refer to it.

This article introduces the jQuery plug-in Validate to implement custom verification results as an example. The detailed code of the style is shared with everyone for your reference. The specific content is as follows

The effect is as follows:

Specific steps:

1. Introduce dependency packages

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

Copy after login

2. Add error styles

 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;
}

Copy after login

3. Customize the prompt message

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

Copy after login

4. Call the wrong style, or Success style

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

Copy after login

5. Detailed code



  
jQuery表单验证插件----自定义错误样式
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>



 
 


 

 
 
  jQuery表单验证插件----自定义校验结果样式
  
   姓名
   *
  
  
   电子邮件
   *
  
  
   网址
    
  
  
   你的评论
   *

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of jQuery file upload control Uploadify

How to implement jQuery multi-condition filtering

The above is the detailed content of About the code of jQuery plug-in Validate to implement custom verification result style. For more information, please follow other related articles on the PHP Chinese website!