Heim >Web-Frontend >js-Tutorial >Die Validatebox-Validierungsregelerweiterung von jQuery Easyui und die Easyui-Validierungsbox Validatebox Usage_jquery
Lassen Sie mich zunächst den Anzeigeeffekt der Datenüberprüfung mit Ihnen teilen
Web-Frontend-Datenüberprüfungskomponente
Die Interaktion zwischen dem Client und dem Server ist in einem Webprojekt untrennbar mit dem Formularformular verbunden. Das am häufigsten verwendete Element im Formularformular ist das Eingabe-Tag. Das erste, was für das Eingabe-Tag verwendet werden muss Kasten!
Das Eingabetextfeld ermöglicht es Benutzern, willkürlich Daten einzugeben, die nicht den Vorschriften entsprechen. Wenn Sie warten, ist es zu diesem Zeitpunkt erforderlich, die Daten zu überprüfen an den Server übermittelt und dann überprüft wird, wird dies die Benutzererfahrung erheblich beeinträchtigen.
Es gibt viele vorgefertigte Komponenten für die Front-End-Überprüfung. Eine der nützlicheren Komponenten ist das Validatebox-Plugin. Die Eingabeaufforderungsschnittstelle ist recht benutzerfreundlich, aber die von Validatebox standardmäßig bereitgestellten Validierungsregeln sind relativ begrenzt Wir müssen unsere eigenen Validierungsregeln hinzufügen.
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.' } }
Benutzerdefinierte Verifizierungsregeln
Wenn Sie neue Verifizierungsregeln hinzufügen, tun Sie dies am besten nicht in den Quelldateien von EasyUI. Erstens soll eine Kontamination des EasyUi-Quellcodes durch Fehlbedienung vermieden werden, und was noch wichtiger ist, es ist einfacher, Komponenten in Zukunft zu aktualisieren . Daher ist es am vernünftigsten, Ihre eigene Erweiterungsdatei separat zu schreiben.
Zum Beispiel: Ich habe die folgenden drei Prüfungen basierend auf den ursprünglichen Regeln in einer separaten Datei easyui-extend-rcm.js hinzugefügt:
(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);
So verwenden Sie benutzerdefinierte Regeln
Zusätzlich zur Einführung von EasyUI-Dateien in 93f0f5c25f18dab9d176bd4f6de5d30e müssen Sie auch Ihre eigenen Erweiterungsdateien in der Reihenfolge nach den EasyUI-Dateien einfügen:
<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>
Dann zitieren Sie es wie folgt in HTML. Fügen Sie unbedingt zwei Attribute hinzu: Klasse und Datenoptionen:
<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>
Detaillierte Erläuterung der Verwendung der jQuery EasyUI-Validierungsbox Validatebox
JQuery EasyUI ValidateBox bietet uns eine sehr praktische Methode zur Formularüberprüfung
<input id="vv" required="true" validType="email">
Attribute
Attributname
|
Typ
|
Beschreibung
|
Standardwert
|
erforderlich
|
Boolean
|
Definiert, ob das Textfeld erforderlich ist
|
falsch
|
validType
|
Zeichenfolge
|
Definieren Sie Feldvalidierungstypen wie E-Mail, URL usw.
|
null
|
missingMessage
|
Zeichenfolge
|
Textinformationen werden abgefragt, wenn das Textfeld leer ist
|
Dieses Feld ist erforderlich
|
invalidMessage
|
Zeichenfolge
|
Textinformationen werden abgefragt, wenn der Inhalt des Textfelds illegal ist
|
null
|
Methode
Methodenname
|
Parameter
|
Beschreibung
|
zerstören
|
keine
|
Löschen und zerstören Sie die Komponente
|
validieren
|
keine
|
Führen Sie eine Überprüfung durch, um festzustellen, ob der Inhalt des Textfelds gültig ist
|
isValid
|
keine
|
调用验证方法并返回验证结果,true或者false
|
注意这里除了required属性外,若validType属性失败.并不会阻止表单提交..所以我们这里如果要阻止表单提交,就又要利用jquery ui提交的表单方法
具体写法是
$(":submit").click(function(){ if(!$("#form").form('validate')){ return false; } }) #form是<form>表单的ID