먼저 데이터 확인 표시 효과를 알려드리겠습니다
웹 프론트엔드 데이터 검증 구성요소
웹 프로젝트에서 클라이언트와 서버 간의 상호 작용은 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