不用一行代码和一句提示语就搞定整个表单验证。 / 憋错料

页面效果

html:

引入

  1 <!DOCTYPE html>
  2
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 <head runat="server">
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6     <title></title>
  7     <script src="/Scripts/jquery-1.10.2.js"></script>
  8     <script src="/Scripts/Validate-1.0.1.js"></script>
  9     <link href="/Content/system.css" rel="stylesheet" type="text/css" />
 10     <link href="/Content/metro.css" rel="stylesheet" type="text/css" />
 11 </head>
 12 <body>
 13     <form id="form1" runat="server">
 14         <div class="form_content">
 15             <div class="form_center_part">
 16                 <div class="form_view_main">
 17                     <div class="form_part">
 18                         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_part_t">
 19                             <tbody>
 20                                 <tr>
 21                                     <th>长度区间：</th>
 22                                     <td class="graytxt1">
 23                                         <asp:TextBox ID="txtNewPwd" runat="server" class="required length_2_5" />
 24                                     </td>
 25                                 </tr>
 26                                 <tr>
 27                                     <th>必填</th>
 28                                     <td class="graytxt1">
 29                                         <asp:TextBox ID="txtPwd" runat="server" class="required"/>
 30                                     </td>
 31                                 </tr>
 32                                 <tr>
 33                                     <th>正整数</th>
 34                                     <td class="graytxt1">
 35                                         <asp:TextBox ID="TextBox1" runat="server" class="integer" />
 36                                     </td>
 37                                 </tr>
 38                                 <tr>
 39                                     <th>小数</th>
 40                                     <td class="graytxt1">
 41                                         <asp:TextBox ID="TextBox3" runat="server" class="decimal" />
 42                                     </td>
 43                                 </tr>
 44                                 <tr>
 45                                     <th>手机</th>
 46                                     <td class="graytxt1">
 47                                         <asp:TextBox ID="txtMobile" runat="server" class="required mobile"></asp:TextBox>
 48                                     </td>
 49                                 </tr>
 50                                 <tr>
 51                                     <th>电话</th>
 52                                     <td class="graytxt1">
 53                                         <asp:TextBox ID="TextBox2" runat="server" class="tel"></asp:TextBox>
 54                                     </td>
 55                                 </tr>
 56                                 <tr>
 57                                     <th>单选</th>
 58                                     <td class="graytxt1">
 59                                         <asp:RadioButtonList ID="rbtnlCode" runat="server" class="rbtn required" RepeatLayout="Flow" RepeatDirection="Horizontal">
 60                                             <asp:ListItem Value="1">无</asp:ListItem>
 61                                             <asp:ListItem Value="2">A</asp:ListItem>
 62                                             <asp:ListItem Value="3">B</asp:ListItem>
 63                                         </asp:RadioButtonList>
 64                                     </td>
 65                                 </tr>
 66                                 <tr>
 67                                     <th>多选</th>
 68                                     <td class="graytxt1">
 69                                         <asp:CheckBoxList ID="chklCode" runat="server" class="chk required length_2_4" RepeatLayout="Flow" RepeatDirection="Horizontal">
 70                                             <asp:ListItem Value="1">A</asp:ListItem>
 71                                             <asp:ListItem Value="2">B</asp:ListItem>
 72                                             <asp:ListItem Value="3">C</asp:ListItem>
 73                                             <asp:ListItem Value="4">D</asp:ListItem>
 74                                             <asp:ListItem Value="5">E</asp:ListItem>
 75                                         </asp:CheckBoxList>
 76                                         <br />
 77                                         最少选择2项但不超过4项
 78                                     </td>
 79                                 </tr>
 80                                 <tr>
 81                                     <th>多选111</th>
 82                                     <td class="graytxt1">
 83                                         <asp:CheckBoxList ID="CheckBoxList1" runat="server" class="chk length_2_0" RepeatLayout="Flow" RepeatDirection="Horizontal">
 84                                             <asp:ListItem Value="1">A</asp:ListItem>
 85                                             <asp:ListItem Value="2">B</asp:ListItem>
 86                                             <asp:ListItem Value="3">C</asp:ListItem>
 87                                             <asp:ListItem Value="4">D</asp:ListItem>
 88                                             <asp:ListItem Value="5">E</asp:ListItem>
 89                                         </asp:CheckBoxList>
 90                                         <br />
 91                                         至少选择2项
 92                                     </td>
 93                                 </tr>
 94                                 <tr>
 95                                     <th>下拉</th>
 96                                     <td class="graytxt1">
 97                                         <asp:DropDownList ID="drpCode" runat="server" class="drp required">
 98                                             <asp:ListItem Value="">请选择</asp:ListItem>
 99                                             <asp:ListItem Value="2">A</asp:ListItem>
100                                             <asp:ListItem Value="3">B</asp:ListItem>
101                                         </asp:DropDownList>
102                                     </td>
103                                 </tr>
104                             </tbody>
105                         </table>
106                     </div>
107                     <div class="btn_center">
108                         <asp:Button ID="btnSubmit" runat="server" CssClass="btn_box submit" Text="提交" OnClick="btnSubmit_Click" />
109                         <asp:Button ID="btnSave" runat="server" CssClass="btn_box save" Text="保存" OnClick="btnSave_Click" />
110                     </div>
111                 </div>
112             </div>
113         </div>
114     </form>
115 </body>
116 </html>

脚本：Validate-1.0.1.js

  1 /// <reference path="jquery-1.10.2-vsdoc.js" />
  2 /*
  3     @Name:验证
  4     @Author:朱翰洲
  5     @WeChat/QQ：86128281
  6     @Version: 1.0.1 Beta
  7     @Update:2016/10/10
  8     @Desc: 将会持续更新
  9
 10 使用说明：
 11     1)demo源码为ASP.NET
 12     2)需要验证的控件加onblur="Check(this)"或onclick="Check(this)"。
 13     3)Check()，可自定义提示消息，无自定义时读取默认提示，详见该函数内的注释。
 14     4)页面无其他逻辑验证时，可加入Validate-?.?.?.default.js脚本文件，无需在控件中加入Check(this)。
 15     5)radio、checkbox和select详见selectClass或Validate()内的注释。
 16     6)文本、多选有length_?_?区间验证（至少？项）时须与控件ID命名匹配（id^=xx），否则保存时将会跳过该验证，详见SaveValidate()。
 17     7)若仅需控制MaxLength建议使用MaxLength属性。
 18     8)常用格式验证（.mobile,.tel,.email）需对应，需要其他验证可扩展。
 19     9)若有验证格式如手机、电话等格式，将不再验证长度
 20     10)css文件中的名称不得与该验证中使用的class名称冲突。
 21     11)所有class可根据使用习惯更改。
 22
 23 class：
 24     1)required:非空
 25     2)onerror:标记错误
 26     3)length_?_?:详见checkLength()内的注释
 27     4)rbtn:radio
 28     5)chk:checkbox
 29     6)drp:select
 30     7)mobile:手机
 31     8)tel:电话
 32     9)email:邮箱
 33
 34  */
 35
 36
 37 //.rbtn as RadioButtonList
 38 //.chk as CheckBoxList
 39 //.drp as DropDownList
 40 var selectClass = ".rbtn,.chk,.drp";
 41
 42 //获取验证类型class
 43 function getDictTypeClass() {
 44     var keys = ".";
 45     $.each(dictType, function (key, val) {
 46         keys += key + ",.";
 47     });
 48     return keys.substring(0, keys.length - 2);
 49 }
 50
 51 var dictType = {
 52     "mobile": ["手机", /^0?(13[0-9]|15[0-9]|18[0-9]|14[57])[0-9]{8}$/],
 53     "tel": ["电话", /^0\d{2,3}-?\d{7,8}$/],
 54     "email": ["邮箱", /^[0-9a-z][0-9a-z\-\_\.][email protected]([0-9a-z][0-9a-z\-]*\.)+[a-z]{2,}$/i],
 55     "integer": ["整数", /^[1-9]+[0-9]*]*$/],
 56     "decimal": ["数字", /^[0-9]+.?[0-9]*$/],
 57 }
 58
 59 $(function () {
 60     $(".required").each(function () {
 61         $(this).parent().append("<em>*</em>");//在必填项后添加 * 标记必填，可根据需要修改显示位置
 62     });
 63     try {
 64         //判断是否有Check()
 65         if (jQuery.isFunction(Check)) {
 66             $(selectClass).click(function () {
 67                 Check(this);
 68             });
 69             $(getDictTypeClass() + ",.required").blur(function () {
 70                 Check(this);
 71             });
 72             $("#btnSubmit").click(function () {
 73                 return SubmitValidate();
 74             })
 75             $("#btnSave").click(function () {
 76                 return SaveValidate();
 77             })
 78         }
 79     }
 80     catch (err) {
 81
 82     }
 83 });
 84
 85 function Check(par, message) {
 86     var id = getId(par.id);
 87     if (typeof (message) == "undefined") {
 88         //未设置message 读取默认提示信息
 89         message = ($(id).is(selectClass) ? "请选择" : "请输入") + $(id).parent().prev().text().trim().replace(‘：‘, ‘‘).replace(‘:‘, ‘‘);
 90     }
 91     Validate(id, message);
 92 }
 93
 94 //验证
 95 function Validate(id, message) {
 96     var isRequired = getIsRequired(id);
 97     if ($(id).is(selectClass)) {
 98         $(id).css("background", "none");
 99         //单选
100         if ($(id).hasClass("rbtn")) {
101             if (isRequired) {
102                 if (typeof ($("input:radio[name=‘" + replaceId(id) + "‘]:checked").val()) == "undefined") {
103                     AddError(id, message);
104                 } else {
105                     RemoveError(id);
106                 }
107             }
108         }
109             //多选
110         else if ($(id).hasClass("chk")) {
111             var options = $("input[name^=‘" + replaceId(id) + "‘]:checked").length;//选项（数量）
112             var isLength = getIsCheckLength(id);//有选项限制
113             if (isLength || isRequired) {
114                 //必选
115                 if (isRequired) {
116                     if (options > 0) {
117                         //有选择项限制
118                         if (isLength == true) {
119                             checkLength(id, options, "");
120                             //return;
121                         }
122                         else {
123                             RemoveError(id);
124                         }
125                     } else {
126                         AddError(id, message);//未选中
127                     }
128                 }
129                     //非必选，但选择后有选择项限制
130                 else if (isLength && options > 0) {
131                     checkLength(id, options, "");
132                 }
133                 else {
134                     RemoveError(id);
135                 }
136             }
137         }
138             //下拉
139         else if ($(id).hasClass("drp")) {
140             if (isRequired) {
141                 if ($(id).val() == "") {
142                     AddError(id, message);
143                 } else {
144                     RemoveError(id);
145                 }
146             }
147         }
148     }
149         //TextBox
150     else {
151         if ($(id).val().trim() !== "") {
152             if (getIsCheckLength(id)) {
153                 checkLength(id, $(id).val().trim().length, "text");
154             }
155             else {
156                 checkFormat(id); //格式验证不再验证长度
157             }
158         } else {
159             if (isRequired) {
160                 AddError(id, message);
161             } else {
162                 RemoveError(id);
163             }
164         }
165     }
166 }
167 //是否必填
168 function getIsRequired(id) {
169     return $(id).hasClass("required");
170 }
171 //是否验证长度
172 function getIsCheckLength(id) {
173     if (typeof ($(id).attr(‘class‘)) != "undefined") {
174         return $(id).attr(‘class‘).indexOf(‘length‘) != "-1";
175     } else {
176         return "false";
177     }
178 }
179 //验证长度 itemLength长度或选项数量。text文本其他值为多选
180 function checkLength(id, itemLength, text) {
181     //$(id).filter(":contains(‘length‘)")
182     if (getIsCheckLength(id)) {
183         var length = getClassName(id, "length");
184         var min = length.split(‘_‘)[1], max = length.split(‘_‘)[2];//取出最小值和最大值
185         //min为0时，取max的最大长度
186         if (min == 0) {
187             var tips = text == "text" ? "最大长度不超过" + max + "位字符" : "需选择" + max + "项";
188             if (itemLength > max) {
189                 AddError(id, tips);
190             }
191             else {
192                 RemoveError(id);
193             }
194         }
195             //max为0时，取min的最小长度
196         else if (max == 0) {
197             if (itemLength < min) {
198                 AddError(id, text == "text" ? "请输入" + (min - 1) + "位以上字符" : "至少选择" + min + "项");
199             }
200             else {
201                 RemoveError(id);
202             }
203         }
204             //min和max大于0时，取区间
205         else if (min > 0 && max > 0) {
206             var tips = text == "text" ? "请输入" + min + "~" + max + "位的字符" : "需选择" + +min + "~" + max + "项";
207             if (itemLength < min) {
208                 AddError(id, tips);
209             }
210             else if (itemLength > max) {
211                 AddError(id, tips);
212             }
213             else {
214                 RemoveError(id);
215             }
216         }
217         else {
218             RemoveError(id);
219         }
220     }
221 }
222
223 String.prototype.trim = function () {
224     return this.replace(/(^\s*)|(\s*$)/g, ‘‘);
225 };
226 var error_icon = "<img src=/Images/error_small.png>";
227 //验证失败，添加onerror
228 function AddError(id, message) {
229     var spId = id.replace("#", "sp");
230     $(id).addClass("onerror");
231     if ($(id).nextAll("span") == undefined || $(id).nextAll("span").attr("id") !== spId) {
232         if ($(id).next().html() === "*") {// 提示信息放在必填验证符号后
233             $(id).next().after("<span id=‘" + spId + "‘ style=‘color:red‘>" + error_icon + message + "</span>");
234         } else {
235             $(id).after("<span id=‘" + spId + "‘ style=‘color:red‘>" + error_icon + message + "</span>");
236         }
237     } else {
238         $("#" + spId).html(error_icon + message);
239     }
240 }
241 //验证成功，移除onerror
242 function RemoveError(id) {
243     $(id).removeClass("onerror");
244     $(id.replace("#", "#sp")).html("");
245 }
246 //删除ID中的#（参数id：#txtId）
247 function replaceId(id) {
248     return id.replace("#", "");
249 }
250 //在ID前加上#（参数id：txtId）
251 function getId(id) {
252     return "#" + id;
253 }
254 //判断className是否存在,返回className
255 function getClassName(id, className) {
256     var clazzs = $(id).attr(‘class‘);// 获取class 字符串
257     var classIndex = clazzs.substring(clazzs.indexOf(className));//截取
258     if (classIndex != "-1") {
259         var last = classIndex.indexOf(" ");//判断后面是否有空格或其他样式
260         return (last == -1 ? classIndex : classIndex.substring(0, last));
261     }
262     return "";
263 }
264 //验证格式（验证内容详见dictType）
265 function checkFormat(id) {
266     if ($(id).is(getDictTypeClass()) && $(id).val().trim() != "") {
267         var clazz = getDictTypeClass().replace(‘.‘, ‘‘).split(‘,‘);
268         for (var i = 0; i < clazz.length; i++) {
269             if ($(id).attr(‘class‘).indexOf(clazz[i].replace(‘.‘, ‘‘)) != "-1") {
270                 var name = clazz[i].replace(‘.‘, ‘‘);
271                 if (dictType[name][1].exec($(id).val().trim())) {
272                     RemoveError(id)
273                 }
274                 else {
275                     AddError(id, dictType[name][0] + "格式错误");
276                 }
277                 break;
278             }
279         }
280     }
281     else {
282         RemoveError(id);
283     }
284 }
285
286 //提交时验证
287 function SubmitValidate() {
288     $(".required:input").trigger(‘blur‘);
289     $(selectClass).trigger(‘click‘);
290     return $(".onerror").length == 0;
291 }
292 //保存时验证
293 function SaveValidate() {
294     $(".onerror").each(function () {
295         RemoveError(getId($(this).attr("id")));//移除所有验证的提示
296     });
297     //查找所有需要验证格式的文本，若非空，验证格式是否正确
298     $(getDictTypeClass()).each(function () {
299         if ($(this).val().trim() != "") {
300             checkFormat(getId($(this).attr("id")));
301         }
302     });
303     //验证区间
304     $("form [id^=txt],[id^=chk]").each(function () {
305         var id = $(this).attr(‘id‘);
306         //文本框
307         if (id.indexOf("txt") != "-1") {
308             if ($(this).val().trim() != "" && getIsCheckLength(getId(id))) {
309                 checkLength(getId(id), $(this).val().trim().length, "text");
310             }
311         }
312             //多选
313         else {
314             var options = $("input[name^=‘" + id + "‘]:checked").length;
315             if (options > 0 && getIsCheckLength(getId(id))) {
316                 checkLength(getId(id), options, "");
317             }
318         }
319     });
320     return $(".onerror").length == 0;
321 }

时间： 2024-10-10 07:49:14

不用一行代码和一句提示语就搞定整个表单验证。

不用一行代码和一句提示语就搞定整个表单验证。的相关文章

jQuery表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

正则表达式表单验证实例代码详解

前端国际化-form表单验证提示语

angular表单验证实例----可用的代码

一些常用的表单验证的代码

表单验证提示插件validate

兼容IE8以下浏览器input表单属性placeholder不能智能提示功能，以及使用jquery.validate.js表单验证插件的问题处理

JS表单验证类HTML代码实例

简单的JS表单验证效果代码