PHP 中常量的知識整理
723
2024-01-14
先給大家分享數據校驗顯示效果
Web前端數據校驗組件
Web項目中客戶端與服務端的交互離不開Form表單，Form表單中最常用的元素莫過于input標簽，input標簽首先要用的肯定是text文本框啦！
input文本框允許用戶任意輸入，難免會會有用戶輸入一些不符合規定的數據，此時，在提交之前對數據校驗是很有必要的，如果等到提交到服務端再校驗就會大大降低用戶體驗啦。
前端校驗有很多現成的組件，比較好用的有 EasyUI 的 validatebox 插件，提示界面做的相當友好，只是validatebox 默認提供的校驗規則比較有限，有時我們需要添加自己的校驗規則。
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);
自定義規則使用方式
在<head>中除了引入EasyUI的文件之外，還要引入自己的擴展文件，順序在EasyUI文件之后：
<pre name="code" class="javascript"> <span style="font-size:18px;"> <script src="http://www.gimoo.net/t/1903/5ca0111202709.html" type="text/javascript" ></script> <script src="http://www.gimoo.net/t/1903/5ca0111202709.html" 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 校驗框validatebox用法
JQuery EasyUI 驗證框(ValidateBox)在表單的驗證方面給我們提供了很方便的方法
<input id="vv" required="true" validType="email">
屬性
屬性名 類型 描述 默認值 required 布爾 定義文本域是否為必填項 false validType 字符串 定義字段的驗證類型比如email, url, etc. null missingMessage 字符串 當文本框為空時提示的文本信息 This field is required invalidMessage 字符串 當文本框內容不合法時提示的文本信息 null
方法
方法名 參數 描述 destroy none 刪除并且銷毀組件 validate none 做驗證以確定文本框的內容是否是有效的 isValid none 調用驗證方法并返回驗證結果，true或者false
注意這里除了required屬性外,若validType屬性失敗.并不會阻止表單提交..所以我們這里如果要阻止表單提交，就又要利用jquery ui提交的表單方法
具體寫法是
$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})
#form是<form>表單的ID
