jQuery easyui의 유효성 검사 상자 유효성 검사 규칙 확장 및 easyui 유효성 검사 상자 유효성 검사 상자 Usage_jquery

먼저 데이터 확인 표시 효과를 알려드리겠습니다

웹 프론트엔드 데이터 검증 구성요소

웹 프로젝트에서 클라이언트와 서버 간의 상호 작용은 Form 폼과 분리될 수 없습니다. Form 폼에서 가장 일반적으로 사용되는 요소는 입력 태그에 가장 먼저 사용해야 하는 텍스트입니다. 상자!

입력 텍스트 상자에서는 사용자가 임의로 입력할 수 있습니다. 이때 규정에 맞지 않는 일부 데이터를 입력할 수 있으므로 데이터를 제출하기 전에 확인이 필요합니다. 서버에 제출한 후 확인하면 사용자 경험이 크게 저하됩니다.

프런트 엔드 검증을 위해 미리 만들어진 구성 요소가 많이 있습니다. 가장 유용한 것 중 하나는 EasyUI의 verifybox 플러그인입니다. 프롬프트 인터페이스는 매우 친숙하지만 기본적으로 verifybox에서 제공하는 검증 규칙은 상대적으로 제한적입니다. 자체 유효성 검사 규칙을 추가해야 합니다.

rules: { 
email:{ 
validator: function(value){ 
return ...?$/i.test(value); 
}, 
message: 'Please enter a valid email address.' 
}, 
url: { 
validator: function(value){ 
return ...?$/i.test(value); 
}, 
message: 'Please enter a valid URL.' 
}, 
length: { 
validator: function(value, param){ 
var len = $.trim(value).length; 
return len >= param[0] && len <= param[1] 
}, 
message: 'Please enter a value between {0} and {1}.' 
}, 
remote: { 
validator: function(value, param){ 
var data = {}; 
data[param[1]] = value; 
var response = $.ajax({ 
url:param[0], 
dataType:'json', 
data:data, 
async:false, 
cache:false, 
type:'post' 
}).responseText; 
return response == 'true'; 
}, 
message: 'Please fix this field.' 
} 
}

맞춤형 검증 규칙

새로운 검증 규칙을 추가할 때 EasyUI의 소스 파일에서는 하지 않는 것이 가장 좋습니다. 첫 번째는 오작동으로 인한 EasyUi 소스 코드의 오염을 방지하는 것이며, 더 중요한 것은 향후 구성 요소를 업그레이드하기 쉽다는 것입니다. . 따라서 가장 합리적인 방법은 확장 파일을 별도로 작성하는 것입니다.

예: 원래 규칙을 기반으로 별도의 파일 easyui-extend-rcm.js에 다음 세 가지 검사를 추가했습니다.

(function($) { 
/** 
* jQuery EasyUI 1.4 --- 功能扩展 
* 
* Copyright (c) 2009-2015 RCM 
* 
* 新增 validatebox 校验规则 
* 
*/ 
$.extend($.fn.validatebox.defaults.rules, { 
idcard: { 
validator: function(value, param) { 
return idCardNoUtil.checkIdCardNo(value); 
}, 
message: '请输入正确的身份证号码' 
}, 
checkNum: { 
validator: function(value, param) { 
return /^([0-9]+)$/.test(value); 
}, 
message: '请输入整数' 
}, 
checkFloat: { 
validator: function(value, param) { 
return /^[+|-]?([0-9]+\.[0-9]+)|[0-9]+$/.test(value); 
}, 
message: '请输入合法数字' 
} 
}); 
})(jQuery); 

맞춤 규칙 사용 방법

93f0f5c25f18dab9d176bd4f6de5d30e에 EasyUI 파일을 추가하는 것 외에도 EasyUI 파일 다음에 순서대로 사용자 고유의 확장 파일도 추가해야 합니다.

<pre name="code" class="javascript">
<span style="font-size:18px;">
<script src="#WEBROOT()/static/jseasyui/jquery.easyui.min.js" type="text/javascript" ></script> 
<script src="#WEBROOT()/static/js/comm/easyui-extend-rcm.js" type="text/javascript"></script>
</span> 

그런 다음 Html에서 다음과 같이 인용하세요. Class 및 data-options라는 두 가지 속성을 추가하세요.

<pre name="code" class="html"><span style="font-size:18px;"><div id="dlg" class="easyui-dialog" style="width:300px; height:300px; vertical-align: middle;" closed="true" title='添加中药' buttons="#dlg-buttons"> 
<div id="editForm" style="background:'';padding:20px;width:200px;height:200px; display:none;"> 
<form id="form" method="post"> 
<div style="padding-left:16px;padding-top:20px;" hidden="true"> 
<input type="text" name="dlg_drugId" id="dlg_drugId" hidden="true" /> 
</div> 
<div style="padding-top:10px;padding-left:40px;"> 
<label for="dlg_name">药物:</label> 
<input type="text" name="dlg_name" id="dlg_name" class="easyui-validatebox" readonly="readonly" /> 
</div> 
<div style="padding-top:10px;padding-left:40px;"> 
<label for="dlg_price">单价:</label> 
<input type="text" name="dlg_price" id="dlg_price" <span style="color:#ff0000;">class="easyui-validatebox" data-options="required:true,validType:'checkFloat'"</span> /> 
</div> 
<div style="padding-top:10px;padding-left:40px;"> 
<label for="dlg_purchase_price">进价:</label> 
<input type="text" name="dlg_purchase_price" id="dlg_purchase_price" <span style="color:#ff0000;">class="easyui-validatebox" data-options="validType:'checkFloat'"</span> /> 
</div> 
<div style="padding-top:10px;padding-left:40px;"> 
<label for="dlg_stock">库存:</label> 
<input type="text" name="dlg_stock" id="dlg_stock" <span style="color:#ff0000;">class="easyui-validatebox" data-options="validType:'checkNum'"</span> /> 
</div> 
<div style="padding-top:10px;padding-left:40px;" align="center"> 
<input type="button" value="保存" onclick="saveTCMDrugPublicMapped()" class="bt_style" /> 
</div> 
</form> 
</div> 
</div></span> 

jQuery easyui 유효성 검사 상자 유효성 검사 상자 사용법에 대한 자세한 설명

JQuery EasyUI ValidateBox는 양식 확인을 위한 매우 편리한 방법을 제공합니다

<input id="vv" required="true" validType="email">

속성

속성 이름	유형	설명	기본값
필수	부울	텍스트 필드가 필수인지 정의	거짓
유효 유형	문자열	이메일, URL 등 과 같은 필드 유효성 검사 유형을 정의합니다.	null
메시지 없음	문자열	텍스트 상자가 비어 있을 때 표시되는 텍스트 정보	필수 항목입니다
잘못된 메시지	문자열	텍스트 상자의 내용이 불법일 때 나타나는 텍스트 정보	null

방법

메서드명	매개변수	설명
파괴	없음	구성요소 삭제 및 파기
확인	없음	텍스트 상자의 내용이 유효한지 확인하세요.
유효함	없음	调用验证方法并返回验证结果，true或者false

注意这里除了required属性外,若validType属性失败.并不会阻止表单提交..所以我们这里如果要阻止表单提交，就又要利用jquery ui提交的表单方法

具体写法是

$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})
#form是<form>表单的ID