1. 程式人生 > >使用Validform()驗證select下拉框非空

使用Validform()驗證select下拉框非空

在使用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