autoform2.htm 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><title>
  4. </title>
  5. <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  6. <link href="../../../lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
  7. <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
  8. <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
  9. <script src="../../../lib/ligerUI/js/plugins/ligerForm.js" type="text/javascript"></script>
  10. <script src="../../../lib/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
  11. <script src="../../../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
  12. <script src="../../../lib/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
  13. <script src="../../../lib/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script>
  14. <script src="../../../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
  15. <script src="../../../lib/ligerUI/js/plugins/ligerRadio.js" type="text/javascript"></script>
  16. <script src="../../../lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
  17. <script src="../../../lib/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
  18. <script src="../../../lib/ligerUI/js/plugins/ligerTip.js" type="text/javascript"></script>
  19. <script src="../../../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
  20. <script src="../../../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
  21. <script src="../../../lib/jquery-validation/messages_cn.js" type="text/javascript"></script>
  22. <script type="text/javascript">
  23. var groupicon = "../../../lib/ligerUI/skins/icons/communication.gif";
  24. $(function ()
  25. {
  26. $.metadata.setType("attr", "validate");
  27. //创建表单结构
  28. var mainform = $("form");
  29. mainform.ligerForm({
  30. inputWidth: 170, labelWidth: 90, space: 40,
  31. fields: [
  32. { name: "ProductID", type: "hidden" },
  33. { display: "产品名称", name: "ProductName", newline: true, type: "text", validate: { required: true,minlength:3 }, group: "基础信息", groupicon: groupicon},
  34. { display: "供应商", name: "SupplierID", newline: false, type: "select", comboboxName: "CompanyName", options: { valueFieldID: "SupplierID" } },
  35. { display: "类别 ", name: "CategoryID", newline: true, type: "select", comboboxName: "CategoryName", options: { valueFieldID: "CategoryID" } },
  36. { display: "日期 ", name: "AddTime", newline: true, type: "date" },
  37. { display: "折扣", name: "QuantityPerUnit", newline: false, type: "number" },
  38. { display: "单价", name: "UnitPrice", newline: true, type: "number" },
  39. { display: "库存量", name: "UnitsInStock", newline: true, type: "digits", group: "库存", groupicon: groupicon },
  40. { display: "订购量", name: "UnitsOnOrder", newline: false, type: "digits" },
  41. { display: "备注", name: "Remark", newline: true, type: "text" ,width:470 }
  42. ]
  43. });
  44. var validator = $("form").validate({
  45. //调试状态,不会提交数据的
  46. debug: true,
  47. errorPlacement: function (lable, element)
  48. {
  49. if (element.hasClass("l-textarea"))
  50. {
  51. element.addClass("l-textarea-invalid");
  52. }
  53. else if (element.hasClass("l-text-field"))
  54. {
  55. element.parent().addClass("l-text-invalid");
  56. }
  57. $(element).removeAttr("title").ligerHideTip();
  58. $(element).attr("title", lable.html()).ligerTip();
  59. },
  60. success: function (lable)
  61. {
  62. var element = $("#" + lable.attr("for"));
  63. if (element.hasClass("l-textarea"))
  64. {
  65. element.removeClass("l-textarea-invalid");
  66. }
  67. else if (element.hasClass("l-text-field"))
  68. {
  69. element.parent().removeClass("l-text-invalid");
  70. }
  71. $(element).removeAttr("title").ligerHideTip();
  72. },
  73. submitHandler: function ()
  74. {
  75. alert("Submitted!");
  76. }
  77. });
  78. });
  79. </script>
  80. </head>
  81. <body style="padding:10px">
  82. <form></form>
  83. </html>