使用Validform()驗證select下拉框非空
阿新 • • 發佈:2018-11-14
在使用Validform()時不知道怎麼驗證select下拉框非空(請選擇),檢視相關方法後找到了檔案所在,然後加了個驗證。
效果圖:
成功後的add.js:
//省略vue.js methods : { acceptClick: function() { if (!$('#form').Validform()) {//使用Validform()來一鍵驗證表單 return false; } $.SaveForm({ url: 'xxx/save' , param: vm.xxx, success: function(data) { $.currentIframe().vm.load(); } }); } }
成功後的add.html:
<tr> <td class="formTitle">所屬機構<font face="宋體">*</font></td> <td class="formValue"> <select style="width:100%" v-model="resDevice.hospitalId" isvalid="yes" required checkexpession='isZero'> <!-- isvalid="yes"表示進行驗證 checkexpession='xxx'表示使用Validform.js裡的哪個驗證 --> <!-- 預設選擇‘請選擇’,index=0,所以不應該通過驗證 --> <option value="0" selected="selected">請選擇</option> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> </select> </td> </tr>
新增驗證方法的Validform.js:
/** 資料驗證完整性 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = true; $(this).find("[isvalid=yes]").each(function () { var checkexpession = $(this).attr("checkexpession"); var errormsg = $(this).attr("errormsg"); if (checkexpession != undefined) { if (errormsg == undefined) { errormsg = ""; } var value = $(this).val(); if ($(this).hasClass('ui-select')) { value = $(this).attr('data-value'); } //重點在下面 switch (checkexpession) { case "NotNull": { if (isNotNull(value)) { Validatemsg = errormsg + "不能為空!\n"; Validateflag = false; ValidationMessage($(this), Validatemsg); return false; } break; } //省略非關鍵程式碼 case "isZero": { if (!isZero(value, $(this).attr("eqvalue"))) { Validatemsg = errormsg + "請先選擇一條資料!\n"; Validateflag = false; ValidationMessage($(this), Validatemsg); return false; } break; } default: break; } } }); if ($(this).find("[fieldexist=yes]").length > 0) { return false; } return Validateflag; //驗證不為空 notnull function isNotNull(obj) { obj = $.trim(obj); if (obj.length == 0 || obj == null || obj == undefined) { return true; } else return false; } //省略非關鍵程式碼... //判斷select下拉框是否為“請選擇(index=0)” function isZero(obj){ if(obj == 0 || obj == undefined){ return false; } return true; } } //提示資訊 function ValidationMessage(obj, Validatemsg) { try { removeMessage(obj); // dialogMsg(Validatemsg); obj.focus(); var $poptip_error = $('<div class="poptip"><span class="poptip-arrow poptip-arrow-top"><em>◆</em></span>' + Validatemsg + '</div>').css("left", obj.offset().left + 'px').css("top", obj.offset().top + obj.parent().height() + 5 + 'px') $('body').append($poptip_error); if (obj.hasClass('form-control') || obj.hasClass('ui-select')) { obj.parent().addClass('has-error'); } if (obj.hasClass('ui-select')) { $('.input-error').remove(); } obj.change(function () { if (obj.val()) { removeMessage(obj); } }); if (obj.hasClass('ui-select')) { $(document).click(function (e) { if (obj.attr('data-value')) { removeMessage(obj); } e.stopPropagation(); }); } return false; } catch (e) { alert(e) } } //移除提示 function removeMessage(obj) { obj.parent().removeClass('has-error'); $('.poptip').remove(); $('.input-error').remove(); }
Validform.js的全部通用方法:https://www.cnblogs.com/firstcsharp/p/6146337.html