久しぶりの書き込み記事は、それが最近、原因企業のMiniPad（win8インタフェース）プロジェクトに、上記要件のより一般的な、それはますますこの作品の前項ではより複雑です。
マップ、プロジェクトインタフェースプレビューで最初に：
今日は、共通の検証である何かについて話をします。ここでは偉大な神に非常に感謝するために、「あなたがたのヘアピンは、」記事は私の助けを与えます。
図は、同様の効果を確認してください。
<div class="xx_czcon familyClass"> <form action="javascript:void(0);" method="post" id="formModify"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="16%" align="right"> 家长姓名： </td> <td width="84%"> <input type="text" class="xx_czinput Validate" name="RealName" id="RealName" value="@Model.RealName"
data-val="{ajaxObj:'@Url.Action("AjaxValidate", "UserCenter")|UserName',type:
'chinese',initMsg:'填写真实姓名2-6位！',sucMsg:'姓名填写正确！',errorMsg:'请输入正确的姓名格式！'}"/> <a href='javscript:;' id="PSubmit">提交</a> </td> </tr> <table> </form> </div> <script type=“text/javascript”> //-----------家长的验证---------------- var familyForm = new FormValidateCommon("familyClass", false); familyForm.init(); familyForm.validatorAll(); //-------------家长提交------------ $('#PSubmit').click(function () { //验证是否有错误状态 if (familyForm.validatorState()) { $('#formModify').submit(); } }); </script>
1 //调用： <input type="text" class="Validate" name="Phone" id="Phone" value="@Model.Phone" 2 // data-val="{type:'phone',initMsg:'请输入您的手机号！',sucMsg:'手机号码验证成功！',errorMsg:'请输入正确的手机号！'}"/> 3 (function ($) { 4 var FormValidateCommon = function (divClass, tipContainerFlag) { 5 this.divClass = "." + divClass; 6 this.tipContainerBool = tipContainerFlag; 7 this.validatorArr = {}; 8 9 //******************************************** 10 //----------现有可提供的枚举验证类型---------- 11 //******************************************** 12 this.regexEnum = { 13 idCard: /^[1-9]([0-9]{14}|[0-9]{16})([0-9]|X)$/, //身份证 14 num: /^\-?([1-9]\d*)$/, //数字 15 email: /^([0-9A-Za-z\-_\.]+)@@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/, //邮箱 16 phone: /^1[3|4|5|8]\d{9}$/, //电话 17 chinese: /^[\u0391-\uFFE5]{2,6}$/, //2-6位中文 18 password: /^[a-zA-Z0-9_]{6,16}$/ //6-16位密码验证 19 } 20 21 }; 22 23 FormValidateCommon.prototype.init = function () { 24 var scope = this; 25 $(scope.divClass).find('.Validate').each(function () { //循环验证 26 var el = $(this); 27 scope.initItem(el); 28 }) 29 }; 30 31 FormValidateCommon.prototype.initItem = function (el, insertType) { 32 if (typeof el == 'string') el = $("#" + el); 33 var scope = this; //FormValidateCommon的作用域 34 var cfg = el.attr('data-val'); 35 36 //临时添加的验证 37 if (insertType) { 38 cfg.check = true; 39 } 40 //若是未开启验证便退出该项初始化 41 if (cfg.check && cfg.check == false) { 42 return false; 43 } 44 45 if (cfg && cfg.length > 0) { 46 cfg = eval('(' + cfg + ')'); //转成对象 47 var check = cfg.check || true, 48 id = el.attr('id') || Math.random(100000), 49 initMsg = cfg.initMsg || '请填入信息', 50 sucMsg = cfg.sucMsg || '格式正确', 51 errorMsg = cfg.errorMsg || '请注意格式', 52 requred = cfg.requred || false; 53 cfg.id = id; 54 cfg.check = check; 55 cfg.initMsg = initMsg; //默认信息 56 cfg.sucMsg = sucMsg; //验证成功信息 57 cfg.errorMsg = errorMsg; //验证错误信息 58 cfg.requred = requred; 59 var tips = $("<span id='PhoneNone' class='xx_czmsg'><img src='http://101static.eee114.com/new_parents/images/xx_tmulspan.gif'>" + initMsg + "</span>"); 60 61 if (scope.tipContainerBool) { //插入到最后一个td 62 $("#" + id).parent().parent().find("td:last").html(tips); 63 } 64 else { //插入到元素之间 65 tips.insertAfter(el); 66 } 67 cfg.el = el; 68 cfg.tipEl = tips; 69 70 //该表单的验证 71 cfg.validate = function () { 72 scope.funcValidate(cfg); 73 }; 74 75 // el.focus(function () { 76 // scope.funcValidate(cfg); 77 // }); 78 79 el.blur(function () { 80 scope.funcValidate(cfg); 81 }); 82 83 scope.validatorArr[id] = cfg; //生成相关验证对象 84 } 85 }; 86 FormValidateCommon.prototype.funcValidate = function (cfg) { 87 var id = cfg.id; 88 var el = cfg.el; 89 var check = cfg.check; //判断是否开启验证 90 var _this = this; 91 //取消事件不执行逻辑 92 if (!this.validatorArr[id]) 93 return false; 94 //若是没有开启验证便忽略 95 if (!check) { 96 this.validatorArr[id]['state'] = 'ignore'; 97 return false; 98 } 99 var type = cfg.type; 100 var regexObj = cfg.regexObj; //用户扩张的验证 101 var ajaxObj = cfg.ajaxObj; //ajax扩张的验证 102 var compareObj = cfg.compareObj; //对比验证 103 var msg = ''; 104 var isPass = 1; //{0：初始化，1：成功，-1：错误} 105 //首先验证非空 106 if (cfg.requred) { 107 if (el.val() == '' || el.val() == '0') { 108 isPass = -1; 109 msg = '该项为必填项'; 110 } 111 } 112 //type优先 113 if (isPass == 1 && el.val().length > 0 && typeof type == 'string') { 114 var reg = this.regexEnum[type]; 115 //验证通过 116 if (reg.test(el.val())) { 117 msg = cfg.sucMsg; 118 } else { 119 isPass = -1; 120 msg = cfg.errorMsg; 121 } 122 } 123 //当type验证通过，则执行自身验证 124 if (isPass == 1 && el.val().length > 0 && regexObj) { 125 var reg = regexObj; 126 //验证通过 127 if (reg.test(el.val())) { 128 msg = cfg.sucMsg; 129 } else { 130 isPass = -1; 131 msg = cfg.errorMsg; 132 } 133 } 134 135 if (isPass == 1 && el.val().length > 0 && compareObj) { 136 var compareArr = compareObj.split('|'); 137 if (compareArr.length == 3) { 138 var _type = compareArr[0] 139 var _id = compareArr[1]; 140 var _flag = compareArr[2]; 141 var _v = el.val(); 142 var _cv = $('#' + _id).val(); 143 if (_type == 'num') { 144 _v = parseInt(_v); 145 _cv = parseInt(_cv); 146 } 147 148 if (_flag == '=') { 149 if (_v == _cv) { 150 msg = cfg.sucMsg; 151 } else { 152 isPass = -1; 153 msg = '两次数据不一致'; 154 } 155 } 156 } 157 } 158 159 160 //ajax验证 161 if (isPass == 1 && el.val().length > 0 && ajaxObj) { 162 var ajaxArr = ajaxObj.split('|'); 163 if (ajaxArr.length == 2) { 164 var url = ajaxArr[0]; 165 var _param = {}; 166 _param[ajaxArr[1]] = el.val(); 167 $.post(url, _param, function (data) { 168 if (typeof data == 'string') { 169 fata = eval('(' + data + ')'); 170 } 171 if (data.code) { 172 msg = data.msg || cfg.sucMsg; 173 } else { 174 isPass = -1; 175 msg = data.msg; 176 } 177 ShowResult(_this, isPass); 178 }); 179 return false; //在此中断后操作 180 } 181 } 182 ShowResult(_this, isPass); 183 //----------显示消息---------------- 184 function ShowResult(scope, isPass) { 185 if (msg == '') isPass = 0; 186 if (isPass == 0) { 187 scope.validatorArr[id]['state'] = 'error'; 188 scope.validatorArr[id]['tipEl'].html('<span id="PhoneNone" class="xx_czmsg"><img src=http://101static.eee114.com/new_parents/images/xx_tmulspan.gif>' + cfg.initMsg + '</span>'); 189 } else if (isPass == 1) { 190 scope.validatorArr[id]['state'] = 'success'; 191 scope.validatorArr[id]['tipEl'].html('<span id="PhoneNone" class="xx_czmsg"><img src=http://101static.eee114.com/new_parents/images/xx_right.gif>' + msg + '</span>'); 192 193 } 194 else if (isPass == -1) { 195 scope.validatorArr[id]['state'] = 'error'; 196 scope.validatorArr[id]['tipEl'].html('<span id="PhoneNone" class="xx_czmsg"><img src=http://101static.eee114.com/new_parents/images/xx_no.gif>' + msg + '</span>'); 197 } 198 } 199 }; 200 FormValidateCommon.prototype.validatorAll = function () { 201 for (var k in this.validatorArr) { 202 var v = this.validatorArr[k]; 203 v.validate(); 204 } 205 }; 206 FormValidateCommon.prototype.validatorState = function () { 207 for (var k in this.validatorArr) { 208 var v = this.validatorArr[k]; 209 if (v.state == 'error') { 210 return false; 211 } 212 } 213 return true; 214 } 215 window.FormValidateCommon = FormValidateCommon; 216 })(jQuery);
总结：一首js代码只需要小部分改改就可以实现自己想要的通用验证！
转载于:https://www.cnblogs.com/Kummy/p/3154282.html