php魔法函數(shù)與魔法常量使用介紹
723
2023-12-08
類似的文章已有，請看這里，個人感覺稍顯復(fù)雜，日前也打算寫一個簡單的給項目用，一些關(guān)鍵點記錄于此。最終效果如下：
后端使用Asp.net mvc5，前端框架有：jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap，都是當(dāng)前最/較新版本。jquery.validate就不用說了，目前比較流行的前端校驗組件；jquery.validate.unobtrusive基于jquery.validate，是為了配合Asp.net mvc，微軟自己寫的，NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安裝，具體怎么用請繼續(xù)往下看。
首先在后臺我們定義實體類：
/// <summary>
/// 廠家信息
/// </summary>
public class Manufacturer : OperatedModel
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ID { get; set; }
/// <summary>
/// 信用代碼/注冊號
/// </summary>
[Required(ErrorMessage = "信用代碼/注冊號不能為空")]
[MaxLength(30)]
public string EnterpriseNo { get; set; }
/// <summary>
/// 企業(yè)名稱
/// </summary>
[Required(ErrorMessage = "企業(yè)名稱不能為空")]
public string EnterpriseName { get; set; }
/// <summary>
/// 注冊地址
/// </summary>
[Required(ErrorMessage = "注冊地址不能為空")]
public string RegisteredAddress { get; set; }
/// <summary>
/// 法人
/// </summary>
[Required(ErrorMessage = "法人不能為空")]
public string ArtificialPerson { get; set; }
/// <summary>
/// person in charge 負(fù)責(zé)人
/// </summary>
[Required(ErrorMessage = "負(fù)責(zé)人不能為空")]
public string PIC { get; set; }
[Required(ErrorMessage = "手機(jī)號不能為空")]
[RegularExpression(RegexLib.Mobile, ErrorMessage = "手機(jī)號碼格式不正確")]
public string Mobile { get; set; }
[EmailAddress]
public string Email { get; set; }
/// <summary>
/// 商鋪號
/// </summary>
public string ShopNumber { get; set; }
/// <summary>
/// 店鋪管理員姓名
/// </summary>
public string StoreManagerName { get; set; }
/// <summary>
/// 店鋪管理員聯(lián)系方式
/// </summary>
[RegularExpression(RegexLib.Mobile, ErrorMessage="手機(jī)號碼格式不正確")]
public string StoreManagerNumber { get; set; }
/// <summary>
/// 主要執(zhí)照, 三證合一營業(yè)執(zhí)照
/// </summary>
public string MainLicence { get; set; }
/// <summary>
/// json, 其他執(zhí)照，如生產(chǎn)許可證
/// </summary>
public string OtherLicence { get; set; }
/// <summary>
/// 入駐日期
/// </summary>
[Required(ErrorMessage = "入駐日期不能為空")]
public DateTime EnterDate { get; set; }
/// <summary>
/// 離場日期
/// </summary>
[Required(ErrorMessage = "截止日期不能為空")]
public DateTime QuitDate { get; set; }
/// <summary>
/// 廠家可提現(xiàn)余額
/// </summary>
public decimal Balance { get; set; }
}
實體各屬性上面有Attribute形式的校驗規(guī)則，當(dāng)用戶提交一個Model到后端Action時，MVC框架會據(jù)此自動幫我們完成校驗工作，于是后端開發(fā)就很開心。然而在數(shù)據(jù)提交之前，前端也有必要進(jìn)行第一輪的校驗，如果使用jquery.validate，那么需要在js或標(biāo)簽里再寫一遍類似的規(guī)則，能不能復(fù)用后端已有的代碼呢？我們以屬性EnterpriseNo為例，在cshtml中寫：
@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "必填項", @class = "form-control" })
最終生成的html如下：
<input class="form-control" data-val="true" data-val-maxlength="字段 EnterpriseNo 必須是最大長度為“30”的字符串或數(shù)組類型。" data-val-maxlength-max="30" data-val-required="信用代碼/注冊號不能為空" id="BasicInfo_EnterpriseNo" name="BasicInfo.EnterpriseNo" placeholder="必填項" value="" data-original-title="" title="" type="text">
標(biāo)簽里面自動加上了很多data-開頭的屬性，data-val表示該控件需要校驗，其它data-開頭的就是一系列校驗規(guī)則和失敗時的錯誤信息，錯誤信息可以自定義，否則框架會給你生成類如“字段 EnterpriseNo 必須是最大長度為30的字符串或數(shù)組類型?！边@種機(jī)器翻譯語言。當(dāng)然這些屬性jquery.validate是不認(rèn)的，要讓jquery.validate認(rèn)識，就需要jquery.validate.unobtrusive出馬了。
現(xiàn)在我們來說這些js如何配合使用。
新版本的jquery.validate已經(jīng)支持AMD模式，所以可以直接使用requirejs加載，jquery.validate.unobtrusive則不行，需要shim配置，代碼：
require.config({
baseUrl: '/scripts',
paths: {
"jquery": 'jquery-2.2.3.min',
"knockout":'knockout-3.4.0',
"bootstrap":'../components/bootstrap/3.3.6/js/bootstrap.min','validate':'jquery.validate',
'validateunobtrusive':'jquery.validate.unobtrusive.min'
},
shim : {
'bootstrap' : {
deps : [ 'jquery' ],
exports : 'bootstrap'
},
'validateunobtrusive':{
deps:['validate'],
exports: 'validateunobtrusive'
}
}
});
配置好后，在頁面中require，此時點擊submit按鈕提交表單，各js就開始作用了。但是除了焦點會落到第一個校驗失敗的控件上，似乎并沒有其它效果，連jquery.validate默認(rèn)的在控件后面展示錯誤信息（errorPlacement函數(shù)）都沒有了，are you kidding me？其實這是因為jquery.validate.unobtrusive覆蓋了errorPlacement配置項（看源碼中的attachValidation函數(shù)），對我們來說反而省了一道工序。由于tooltip的html標(biāo)記是由bootstrap動態(tài)生成的，所以errorPlacement并不適合我們，參考本文開頭的鏈接，選擇覆寫showErrors函數(shù)，核心代碼如下（tooltipvalidator.js）：
define(['validateunobtrusive'], function () {
function TooltipValidator() {}
TooltipValidator.prototype = {
init: function (validatorOptions, tooltipOptions) {
tooltipOptions = tooltipOptions || {};
validatorOptions = validatorOptions || {};
this._tooltipOptions = $.extend({}, {
placement: 'top'
}, tooltipOptions, { animation: false });
this._validatorOptions = $.extend({}, {
//errorPlacement: function (error, element) {
// // do nothing
//},
showErrors: function (errorMap, errorList) {
for (var i = 0; i < this.successList.length; i++) {
var success = this.successList[i];
$(this.successList[i]).tooltip('destroy');
$(this.successList[i]).parents('div.form-group').removeClass('has-error');
}
for (var i = 0; i < errorList.length; i++) {
var errorElement = $(errorList[i].element);
errorElement.parents('div.form-group').addClass('has-error');
errorElement.attr('data-original-title', errorList[i].message).tooltip('show');
}
},
submitHandler: function (form) {
return false;
}
}, validatorOptions)
this._configTooltip();
this._configValidator();
},
_configTooltip: function () {
$('[data-val="true"]').tooltip(this._tooltipOptions);
},
_configValidator: function () {
$.validator.setDefaults(this._validatorOptions);
$.validator.unobtrusive.parse(document);
}
}
return new TooltipValidator();
});
這樣我們就可以在require回調(diào)函數(shù)中執(zhí)行tooltipvalidator.init，不需要另外再寫邏輯，于是前端同學(xué)也開心的笑了。這里還有一處需要注意，大家看到第49行代碼，這是初始化jquery.validate.unobtrusive的步驟。原本jquery.validate.unobtrusive在其代碼中已經(jīng)有$(function () { $jQval.unobtrusive.parse(document); });但是由于$.ready會在Dom元素加載完成后（題外話：不是渲染完成）就執(zhí)行，因此它會在tooltipvalidator有機(jī)會_configValidator之前完成，導(dǎo)致咱們的配置項無效（如果是在單頁無刷新應(yīng)用中，會發(fā)現(xiàn)之后再次加載局部頁時，配置項有效了，因為$.ready只在初次加載的時候執(zhí)行，而require回調(diào)會每次加載都執(zhí)行）。有兩種解決方法：1、讓jquery.validate.unobtrusive依賴tooltipvalidator；2、移除jquery.validate.unobtrusive中的$jQval.unobtrusive.parse(document);這里選擇第2種。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
