zoukankan      html  css  js  c++  java
  • jquery.validate,错误信息位置

    好长时间没有用jquery.validate.js这个插件了,忘得差不多了。唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问题,如果知道的话,很简单。以前遇到过,可是忘了,现在标记一下,将来在忘了,在回过头看看。俗话说的好,好记性不如烂笔头。

    举个例子,大家就知道怎么回事了。

    1. rules: { 
    2. name:{ 
    3. required:true, 
    4. rangelength:[1,20] 
    5. }, 
    6. validateCode: { 
    7. required:true, 
    8. number:true, 
    9. rangelength:[5,5] 
    10. }, 
    11. messages: { 
    12. name: { 
    13. required: "请输入命令名", 
    14. rangelength: jQuery.format("长度请控制在{0} ~ {1}") 
    15. }, 
    16. validateCode: { 
    17. required: "请输入验证码", 
    18. number: "请输入数字", 
    19. rangelength: jQuery.format("长度必须是5位") 
    20. }, 
    21.  
    22. success: function(label) { 
    23. label.addClass("error checked"); 
    24. }, 
    25.  
    26. submitHandler: function(form) { 
    27. if($("#RegionId").val() == '0'){ 
    28. $("#citySelect").attr("class","error").html('请选择区域').show(); 
    29. $("#RegionId").attr("class","error"); 
    30. }else{ 
    31. $("#RegionId").attr("class","valid"); 
    32. $("#citySelect").attr("class","valid").html('success').show(); 
    33. form.submit(); 
    34. }); 
     rules: {
     name:{
     required:true,
     rangelength:[1,20]
     },
     validateCode: {
     required:true,
     number:true,
     rangelength:[5,5]
     }
     },
     messages: {
     name: {
     required: "请输入命令名",
     rangelength: jQuery.format("长度请控制在{0} ~ {1}")
     },
     validateCode: {
     required: "请输入验证码",
     number: "请输入数字",
     rangelength: jQuery.format("长度必须是5位")
     }
     },
    
     success: function(label) {
     label.addClass("error checked");
     },
    
     submitHandler: function(form) {
     if($("#RegionId").val() == '0'){
     $("#citySelect").attr("class","error").html('请选择区域').show();
     $("#RegionId").attr("class","error");
     }else{
     $("#RegionId").attr("class","valid");
     $("#citySelect").attr("class","valid").html('success').show();
     form.submit();
     }
     }
     });

    在上面的代码中,我并没有添加错误信息存放位置的方法,我们看一下效果

    1. <td> 
    2. <input type="text" maxlength="30" value="" id="name" name="name"> 
    3. <label for="name" generated="true">请输入命令名</label>                                   //错误信息会自动根在输入框的后面。 
    4. </td> 
    <td>
    <input type="text" maxlength="30" value="" id="name" name="name">
    <label for="name" generated="true">请输入命令名</label>                                   //错误信息会自动根在输入框的后面。
    </td>

    如果我们加上错误信息位置的方法errorPlacement来看一下效果是什么样子的。

    1. rules: { 
    2. name:{ 
    3. required:true, 
    4. rangelength:[1,20] 
    5. }, 
    6. validateCode: { 
    7. required:true, 
    8. number:true, 
    9. rangelength:[5,5] 
    10. }, 
    11. messages: { 
    12. name: { 
    13. required: "请输入命令名", 
    14. rangelength: jQuery.format("长度请控制在{0} ~ {1}") 
    15. }, 
    16. validateCode: { 
    17. required: "请输入验证码", 
    18. number: "请输入数字", 
    19. rangelength: jQuery.format("长度必须是5位") 
    20. }, 
    21. errorPlacement: function(error, element) {                             //错误信息位置设置方法 
    22. error.appendTo( element.parent().next() );                            //这里的element是录入数据的对象 
    23. }, 
    24. success: function(label) { 
    25. label.addClass("error checked"); 
    26. }, 
    27.  
    28. submitHandler: function(form) { 
    29. if($("#RegionId").val() == '0'){ 
    30. $("#citySelect").attr("class","error").html('请选择区域').show(); 
    31. $("#RegionId").attr("class","error"); 
    32. }else{ 
    33. $("#RegionId").attr("class","valid"); 
    34. $("#citySelect").attr("class","valid").html('success').show(); 
    35. form.submit(); 
    36. }); 
     rules: {
     name:{
     required:true,
     rangelength:[1,20]
     },
     validateCode: {
     required:true,
     number:true,
     rangelength:[5,5]
     }
     },
     messages: {
     name: {
     required: "请输入命令名",
     rangelength: jQuery.format("长度请控制在{0} ~ {1}")
     },
     validateCode: {
     required: "请输入验证码",
     number: "请输入数字",
     rangelength: jQuery.format("长度必须是5位")
     }
     },
    errorPlacement: function(error, element) {                             //错误信息位置设置方法
     error.appendTo( element.parent().next() );                            //这里的element是录入数据的对象
     },
     success: function(label) {
     label.addClass("error checked");
     },
    
     submitHandler: function(form) {
     if($("#RegionId").val() == '0'){
     $("#citySelect").attr("class","error").html('请选择区域').show();
     $("#RegionId").attr("class","error");
     }else{
     $("#RegionId").attr("class","valid");
     $("#citySelect").attr("class","valid").html('success').show();
     form.submit();
     }
     }
     });

    来看一下效果

    1. <tr> 
    2. <th><label for="name" id="lname"><code title="必填">*</code>命令名称</label></th> 
    3. <td><input type="text" maxlength="30" value="" id="name" name="name"></td> 
    4. <td><label for="name" generated="true">请输入命令名</label></td>                     //错误信息跑到这儿来了, 
    5. </tr> 
    <tr>
     <th><label for="name" id="lname"><code title="必填">*</code>命令名称</label></th>
     <td><input type="text" maxlength="30" value="" id="name" name="name"></td>
     <td><label for="name" generated="true">请输入命令名</label></td>                     //错误信息跑到这儿来了,
     </tr>

    够简单吧,在简单的东西,长时间不用也会忘的。

    原文地址:http://blog.51yip.com/jsjquery/1206.html

  • 相关阅读:
    BadUSB 利用
    java 将函数作为参数传递
    odoo12 修行提升篇之 常用的高阶函数 (二)
    odoo12 修行提升篇之 异步定时任务 (一)
    odoo12 修行基础篇之 利用kanban做分析 点击跳转分析模型列表 (九)
    odoo12 修行基础篇之 kanban (八)
    odoo12 修行基础篇之 记录批处理 (七)
    odoo12 修行基础篇之 列表的筛选和分组 (六)
    odoo12 修行基础篇之 添加记录编码 (五)
    odoo12 修行基础篇之 添加工作流和操作记录 (四)
  • 原文地址:https://www.cnblogs.com/jearay/p/4112091.html
Copyright © 2011-2022 走看看