弘帝系统表单系统通用框架设计脚本JS

admin

hondy.form.js
范本：Hondy.Cloud.Agent.JS.Function.JS
适合表单与登陆系统，组合使用见：
弘帝表单系统设计参考CSS：http://wh.ac.cn/forum.php?mod=viewthread&tid=2834&fromuid=1

1. $(function () {
   
2.     $(".empty").click(function () { $(this).parent().prev().val(""); });
   
3. });
   
4. 
   
5. textLimitCheck = function (thisArea, maxLength) {
   
6.     if (thisArea.value.length > maxLength) {
   
7.         alert(maxLength + ' 个字限制. \r超出的将自动去除.');
   
8.         thisArea.value = thisArea.value.substring(0, maxLength);
   
9.         thisArea.focus();
   
10.     }
    
11.     wordCount.innerText = thisArea.value.length;
    
12. };
    
13. 
    
14. var file = function (name, title, placeholder, value, regex, help){
    
15.     var o = $("form ." + name);
    
16.     var maxlength = "";
    
17.     var need = "";
    
18.     var required = "";
    
19.     var readonly = "";
    
20.     var pattern = "";
    
21.     if (placeholder !== "") { placeholder = " placeholder="" + placeholder + """; }
    
22.     if (o.attr("maxlength") !== undefined) { maxlength = " maxlength="" + o.attr("maxlength") + """; }
    
23.     if (o.attr("need") !== undefined) {
    
24.         if (o.attr("need").indexOf("required") >= 0) { need = "<span class='red'>*</span>"; required = " required"; }
    
25.         if (o.attr("need").indexOf("readonly") >= 0) { readonly = " readonly"; }
    
26.     }
    
27.     if (regex !== "") { pattern = " pattern="" + regex + """; }
    
28.     if (value !== "") { value = " value='" + value + "'"; } else { value = ""; }
    
29.     o.html("<label class='col-md-2 col-form-label'>" + title + need + "</label><div class='col-md-5'><input type="file" name="" + name + "" class="form-control-file"" + value + placeholder + maxlength + readonly + required + pattern + " /></div><div class='d-flex col-md-5 text-muted align-items-center'>" + help + "</div>");
    
30. };
    
31. 
    
32. var select = function (name, title, tag, options, sel, help) {
    
33.     var o = $("form ." + name);
    
34.     o.html("<label class='col-md-2 col-form-label'>" + title + "<span class='red'>*</span></label><div class='col-md-10 row align-items-center'><div class="col-auto"><select name="" + tag + "" class="custom-select">" + option(options, sel) + "</select></div><div class='col-auto text-muted'>" + help + "</div></div>");
    
35. };
    
36. 
    
37. var option = function (options, sel) {
    
38.     var args = "";
    
39.     for (var i in options) {
    
40.         if (sel === i) { selected = " selected"; } else { selected = ""; }
    
41.         args = args + "<option value="" + options[i][0] + """ + selected + ">" + options[i][1] + "</option>";
    
42.     }
    
43.     return args;
    
44. };
    
45. 
    
46. var input = function (type, name, title, placeholder, value, regex, help) {
    
47.     var o = $("form ." + name);
    
48.     var maxlength = "";
    
49.     var need = "";
    
50.     var required = "";
    
51.     var readonly = "";
    
52.     var pattern = "";
    
53.     if (placeholder !== "") { placeholder = " placeholder="" + placeholder + """; }
    
54.     if (o.attr("maxlength") !== undefined) { maxlength = " maxlength="" + o.attr("maxlength") + """; }
    
55.     if (o.attr("need") !== undefined) {
    
56.         if (o.attr("need").indexOf("required") >= 0) { need = "<span class='red'>*</span>"; required = " required"; }
    
57.         if (o.attr("need").indexOf("readonly") >= 0) { readonly = " readonly"; }
    
58.     }
    
59.     if (regex !== "") { pattern = " pattern="" + regex + """; }
    
60.     if (value !== "") { value = " value='" + value + "'"; } else { value = ""; }
    
61.     o.html("<label class='col-md-2 col-form-label'>" + title + need + "</label><div class='col-md-5'><input type="" + type + "" name="" + name + "" class="form-control"" + value + placeholder + maxlength + readonly + required + pattern + " /></div><div class='d-flex col-md-5 text-muted align-items-center'>" + help + "</div>");
    
62. };
    
63. 
    
64. var rang = function (name, title, value, input, unit, help) {
    
65.     var o = $("form ." + name);
    
66.     var need = "";
    
67.     var readonly = "";
    
68.     var min = "", max = "", step = "";
    
69.     if (o.attr("min") !== undefined) { min = " min='" + o.attr("min") + "'"; }
    
70.     if (o.attr("max") !== undefined) { max = " max='" + o.attr("max") + "'"; }
    
71.     if (o.attr("step") !== undefined) { step = " step='" + o.attr("step") + "'"; }
    
72.     if (o.attr("need") !== undefined) {
    
73.         if (o.attr("need").indexOf("required") >= 0) { need = "<span class='red'>*</span>"; }
    
74.         if (o.attr("need").indexOf("readonly") >= 0) { readonly = " readonly"; }
    
75.     }
    
76.     if (value !== "") { var val = " value='" + value + "'"; } else { val = ""; }
    
77.     o.html("<label class='col-md-2 col-form-label'>" + title + need + "</label><div class='col-md-5 align-items-center'><input type="range" name="" + name + "" class="custom-range"" + val + min + max + step + readonly + " /></div><div class='col-md-5 row align-items-center'><div class='col-auto'><input name='" + input + "' class="form-control" value='" + value + "' size='2' /></div><div class='text-muted'>" + unit + "</div><div class='col-auto text-muted'>" + help + "</div></div>");
    
78.     bind("range", name, input);
    
79. };
    
80. //list包括内容：string[]={value,title,memo}
    
81. var radio = function (name, title, list, value, help) {
    
82.     var o = $("form ." + name);
    
83.     var need = "";
    
84.     var readonly = "";
    
85.     if (o.attr("need") !== undefined) {
    
86.         if (o.attr("need").indexOf("required") >= 0) { need = "<span class='red'>*</span>"; }
    
87.         if (o.attr("need").indexOf("readonly") >= 0) { readonly = " readonly"; }
    
88.     }
    
89.     var content = "";
    
90.     var lst = eval(list);
    
91.     for (var i in lst) {
    
92.         var id = "";
    
93.         var val = "";
    
94.         var text = "";
    
95.         switch (lst[i].length) {
    
96.             case 1:
    
97.                 id = name + i;
    
98.                 val = " value=" + lst[i];
    
99.                 text = lst[i];
    
100.                 break;
     
101.             case 2:
     
102.                 id = name + i;
     
103.                 val = " value=" + lst[i][0];
     
104.                 text = lst[i][1];
     
105.         }
     
106.         if (lst[i][0] === value) { check = " checked"; } else { check = ""; }
     
107.         content = content + "<input type="radio" name="" + name + """ + val + check + readonly + " id="" + id + "" /><label for="" + id + "" class="mb-0">" + text + "</label>";
     
108.     }
     
109.     content = "<div class="col-auto">" + content + "</div>";
     
110.     o.html("<label class='col-md-2 col-form-label'>" + title + need + "</label><div class='col-md-10 row align-items-center'>" + content + "<div class='col-auto text-muted'>" + help + "</div></div>");
     
111. };
     
112. var submit = function (name, value) {
     
113.     var o = $("form ." + name);
     
114.     o.html("<label class='col-md-2 col-form-label'></label><div class="col-md-10"><input type='submit' name = 'submit' value = '" + value + "' class='btn btn-fst'/><input type='reset' name='reset' value='" + common.reset + "' class='btn btn-fst'/></div>");
     
115. };
     
116. 
     
117. var textarea = function (name, title, placeholder, value, help) {
     
118.     var o = $("form ." + name);
     
119.     var rows = "";
     
120.     var need = "";
     
121.     var required = "";
     
122.     var readonly = "";
     
123.     if (placeholder !== "") { placeholder = " placeholder="" + placeholder + """; }
     
124.     if (o.attr("rows") !== undefined) { rows = " rows="" + o.attr("rows") + """; }
     
125.     if (o.attr("need") !== undefined) {
     
126.         if (o.attr("need").indexOf("required") >= 0) { need = "<span class='red'>*</span>"; required = " required"; }
     
127.         if (o.attr("need").indexOf("readonly") >= 0) { readonly = " readonly"; }
     
128.     }
     
129.     o.html("<label class='col-md-2 col-form-label'>" + title + need + "</label><div class='col-md-10'><textarea name="" + name + "" class="form-control"" + placeholder + rows + readonly + required + ">" + value + "</textarea><div class='d-flex text-muted'>" + help + "</div></div>");
     
130. };
     
131. 
     
132. var bind = function (type, name, obj) {
     
133.     switch (type) {
     
134.         case "range":
     
135.             $("[name=" + name + "]").change(function () {
     
136.                 $("[name=" + obj + "]").val($("[name = " + name + "]").val());
     
137.                 price();
     
138.             });
     
139.             $("[name=" + obj + "]").change(function () {
     
140.                 $("[name=" + name + "]").val($("[name = " + obj + "]").val());
     
141.                 price();
     
142.             });
     
143.             break;
     
144.     }
     
145. };
     
146. 
     
147. $.extend({
     
148.     send: function (url, args, tar) {
     
149.         var body = $(document.body),
     
150.             form = $("<form method='post' target='" + tar + "'></form>"),
     
151.             input;
     
152.         form.attr({ "action": url });
     
153.         $.each(args, function (key, value) {
     
154.             input = $("<input type='hidden'>");
     
155.             input.attr({ "name": key });
     
156.             input.val(value);
     
157.             form.append(input);
     
158.         });
     
159. 
     
160.         form.appendTo(document.body);
     
161.         form.submit();
     
162.         document.body.removeChild(form[0]);
     
163.     }
     
164. });
     
165. 
     
166. var FormDataToJson = function (formData) {
     
167.     var objData = {};
     
168.     formData.forEach((value, key) => objData[key] = value);
     
169.     return JSON.stringify(objData);
     
170. };
     
171. 
     
172. var regex = {
     
173.     name:"^[\u4e00-\u9fa5_a-zA-Z0-9]+[        DISCUZ_CODE_0        ]quot;,
     
174.     domain: "^([a-z0-9][a-z0-9\-]*?\.(?:com|cn|net|org|gov|info|la|cc|co|ac.cn)(?:\.(?:cn|jp))?)[        DISCUZ_CODE_0        ]quot;,
     
175.     host: "^([a-z0-9][a-z0-9\-\.]*?\.(?:com|cn|net|org|gov|info|la|cc|co|jp|hk|kr))[        DISCUZ_CODE_0        ]quot;,
     
176.     ip: "^(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9]{1,2})){3}[        DISCUZ_CODE_0        ]quot;,
     
177.     int: "^[1-9][0-9]*[        DISCUZ_CODE_0        ]quot;,
     
178.     age:"^[1-9][0-9]{0,2}[        DISCUZ_CODE_0        ]quot;,//1-999
     
179.     num: "^[1-9][0-9]{1,3}[        DISCUZ_CODE_0        ]quot;,//10-9999
     
180.     rate: "^0$|^1$|^0\.[0-9]*[1-9][        DISCUZ_CODE_0        ]quot;
     
181. };
     
182. 
     
183. var err = function (msg) {
     
184.     if (msg === "nologin") { top.href = "/login"; } else { alert(msg); }
     
185. };

复制代码

admin

最新通知：由于弘帝框架已成，以Hondy.UI设计为准，随时变更。
更完整的参考：hondy.site.user.js.hondy.form.js
最新html.form设计hondy.site.login.template.addition.add.zhg+hondy.site.login.js.hondy.form.js
type=city的使用参考：
json设计参考见：hondy.site.systhemes.js.cityData.js
type=radio的使用参考：
hondy.site.user.profile.zhg
hondy.site.user.js.profile.js
list的表达示："[[1,'男'],[0,'女']]"，记得在语言中设置。