使用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
Validform是一款基于jQuery的表单验证插件,可以实现对表单中各种输入框的数据格式、长度、大小、范围等进行验证,并提供了丰富的提示信息和样式。 使用Validform,你需要先引入jQuery库和Validform插件文件,然后在表单中添加相应的html结构和属性,如下所示: ```html <form action="submit.php" method="post" id="myform"> <input type="text" name="username" datatype="*5-20" nullmsg="请输入用户名!" errormsg="用户名必须为5-20个字符!"> <input type="password" name="password" datatype="*6-20" nullmsg="请输入密码!" errormsg="密码必须为6-20个字符!"> <input type="text" name="email" datatype="e" nullmsg="请输入邮箱!" errormsg="邮箱格式不正确!"> <input type="submit" value="提交"> </form> ``` 在这个例子中,我们为每个输入框添加了datatype属性,用来指定验证的类型和规则。如*5-20表示输入的字符数必须在5~20之间,e表示输入的内容必须是一个合法的邮箱地址。同时,我们还为每个输入框添加了nullmsg和errormsg属性,用来指定当输入框为空或输入不符合规则时的提示信息。 最后,在页面加载完成后,我们需要调用Validform插件的初始化方法来启动验证功能,如下所示: ```javascript $(document).ready(function() { $('#myform').Validform(); }); ``` 这样,当我们在表单中输入内容并提交时,Validform就会自动对输入框进行验证,如果有错误则会显示相应的提示信息,并阻止表单的提交。如果输入都符合规则,则表单会被提交到指定的URL地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值