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

猜你喜欢

转载自blog.csdn.net/qq_34075464/article/details/84031271
今日推荐