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