यह आलेख क्लाइंट-सर्वर अनुप्रयोग के लिए उपयोगकर्ता इनपुट सत्यापन नियमों को एकजुट करने का एक सरल तरीका बताता है। उदाहरण के रूप में एक सरल परियोजना का उपयोग करते हुए, मैं दिखाऊंगा कि यह एस्प नेट कोर और वीयू जेएस का उपयोग करके कैसे किया जा सकता है।

वेब एप्लिकेशन विकसित करते समय, एक नियम के रूप में, हम उपयोगकर्ता इनपुट के दोहरे सत्यापन के कार्य का सामना करते हैं। एक ओर, सर्वर पर निरर्थक अनुरोधों को कम करने और उपयोगकर्ता के लिए सत्यापन को गति देने के लिए उपयोगकर्ता इनपुट को क्लाइंट पर मान्य किया जाना चाहिए। दूसरी ओर, सत्यापन की बात करते हुए, सर्वर "विश्वास पर" स्वीकार नहीं कर सकता है कि ग्राहक सत्यापन वास्तव में अनुरोध भेजने से पहले काम करता है, क्योंकि उपयोगकर्ता सत्यापन कोड को अक्षम या संशोधित कर सकता है। या यहां तक कि क्लाइंट एपीआई से मैन्युअल रूप से अनुरोध करें।

इस प्रकार, क्लासिक क्लाइंट-सर्वर इंटरैक्शन में 2 नोड होते हैं, जिसमें अक्सर समान उपयोगकर्ता इनपुट सत्यापन नियम होते हैं। इस लेख को संपूर्ण रूप से एक से अधिक लेखों में चर्चा की गई है; एक हल्के समाधान का वर्णन यहां ASP.Net कोर API सर्वर और Vue js क्लाइंट के उदाहरण के रूप में किया जाएगा।

शुरू करने के लिए, हम यह निर्धारित करेंगे कि हम उपयोगकर्ता (टीम) के अनुरोधों को विशेष रूप से मान्य करेंगे, न कि इकाई को, और, शास्त्रीय 3-लेयर आर्किटेक्चर के दृष्टिकोण से, हमारी मान्यता प्रेजेंटेशन लेयर में है।

सर्वर साइड

जबकि Visual Studio 2019 में मैं एक API प्रकार के साथ ASP.NET कोर वेब एप्लिकेशन टेम्पलेट का उपयोग करके एक सर्वर अनुप्रयोग के लिए एक परियोजना बनाऊंगा। बॉक्स से बाहर एएसपी में काफी मजबूत और एक्स्टेंसिबल वेलिडेशन मैकेनिज्म है - मॉडल वेलिडेशन, जिसके अनुसार, मॉडल रिक्वेस्ट प्रॉपर्टीज को विशिष्ट वेलिडेशन विशेषताओं के साथ चिह्नित किया जाता है।

एक उदाहरण के रूप में एक साधारण नियंत्रक के साथ इस पर विचार करें:

[Route("[controller]")] [ApiController] public class AccountController : ControllerBase { [HttpPost(nameof(Registration))] public ActionResult Registration([FromBody]RegistrationRequest request) { return Ok($"{request.Name},  !"); } }

नए उपयोगकर्ता को पंजीकृत करने का अनुरोध इस प्रकार होगा:

RegistrationRequest

  public class RegistrationRequest { [StringLength(maximumLength: 50, MinimumLength = 2, ErrorMessage = "     2  50 ")] [Required(ErrorMessage = " ")] public string Name { get; set; } [Required(ErrorMessage = "  . ")] [EmailAddress(ErrorMessage = "  . ")] public string Email { get; set; } [Required(ErrorMessage = " ")] [MaxLength(100, ErrorMessage = "{0}    {1} ")] [MinLength(6, ErrorMessage ="{0}    {1} ")] [DisplayName("")] public string Password { get; set; } [Required(ErrorMessage = " ")] [Range(18,150, ErrorMessage = "      18  150")] public string Age { get; set; } [DisplayName("")] public string Culture { get; set; } }

यह System.ComponentModel.DataAnnotations नामस्थान से पूर्वनिर्धारित सत्यापन विशेषताओं का उपयोग करता है। आवश्यक गुण आवश्यक विशेषता के साथ चिह्नित हैं। इस प्रकार, खाली JSON ("{}") भेजते समय, हमारा एपीआई वापस आ जाएगा:

 { ... "errors": { "Age": [ " " ], "Name": [ " " ], "Email": [ "  . " ], "Password": [ " " ] } }

इस स्तर पर पहली समस्या जो सामने आ सकती है, वह है त्रुटि विवरण का स्थानीयकरण। वैसे, एएसपी में अंतर्निहित स्थानीयकरण उपकरण हैं, हम बाद में इस पर विचार करेंगे।

स्ट्रिंग डेटा की लंबाई की जांच करने के लिए, आप बोल रहे नामों के साथ विशेषताओं का उपयोग कर सकते हैं: स्ट्रिंगलेंग्नि, मैक्स लैंथ और मिनलॉन्ग। उसी समय, स्ट्रिंग्स (घुंघराले ब्रेस) को प्रारूपित करके, विशेषता मापदंडों को एक संदेश में एकीकृत किया जा सकता है। उदाहरण के लिए, उपयोगकर्ता नाम के लिए, हम संदेश में न्यूनतम और अधिकतम लंबाई सम्मिलित करते हैं, और उसी नाम की विशेषता में निर्दिष्ट पासवर्ड "प्रदर्शन नाम" के लिए। सीमा विशेषता उस मान की जाँच के लिए जिम्मेदार है जो निर्दिष्ट सीमा में होना चाहिए।
आइए एक अस्वीकार्य संक्षिप्त उपयोगकर्ता नाम और पासवर्ड के साथ एक अनुरोध भेजें:

  { "Name": "a", "Password" : "123" }

सर्वर से प्रतिक्रिया में, आप नए सत्यापन त्रुटि संदेश पा सकते हैं:

  "Name": [ "     2  50 " ], "Password": [ "    6 " ]

समस्या, जो कुछ समय के लिए हो सकती है, स्पष्ट नहीं है, यह है कि नाम और पासवर्ड की लंबाई के लिए सीमा मान क्लाइंट अनुप्रयोग में भी मौजूद होना चाहिए। ऐसी स्थिति जिसमें दो या शारीरिक स्थानों पर एक ही डेटा मैन्युअल रूप से सेट किया जाता है, बग के लिए संभावित प्रजनन जमीन है, जो खराब डिजाइन के संकेतों में से एक है। चलो इसे ठीक करते हैं।

हम सब कुछ संग्रहीत करेंगे जो क्लाइंट को संसाधन फ़ाइलों में आवश्यकता होगी। एक साझा संसाधन में Controllers.AccountController.ru.resx और सांस्कृतिक रूप से स्वतंत्र डेटा के संदेश: Controllers.AccountController.resx। मैं इस प्रारूप का पालन करता हूं:

 {PropertyName}DisplayName {PropertyName}{RuleName} {PropertyName}{RuleName}Message

इस प्रकार, हम निम्नलिखित चित्र प्राप्त करते हैं

कृपया ध्यान दें कि ईमेल पते को मान्य करने के लिए मेल का उपयोग नियमित अभिव्यक्ति है। और संस्कृति सत्यापन के लिए, एक कस्टम नियम का उपयोग किया जाता है - "मान" (मूल्यों की सूची)। आपको पासवर्ड पुष्टिकरण क्षेत्र की भी जांच करनी होगी, जिसे हम बाद में यूआई पर देखेंगे।

किसी विशिष्ट संस्कृति के लिए संसाधन फ़ाइलों तक पहुँचने के लिए, हम Startup.ConfigureServices विधि में स्थानीयकरण समर्थन जोड़ते हैं, जो संसाधन फ़ाइलों के लिए पथ को दर्शाता है:

 services.AddLocalization(options => options.ResourcesPath = "Resources");

और स्टार्टअप में भी। कॉन्फ़िगर विधि, उपयोगकर्ता अनुरोध के हेडर द्वारा संस्कृति का निर्धारण:

  app.UseRequestLocalization(new RequestLocalizationOptions { DefaultRequestCulture = new RequestCulture("ru-RU"), SupportedCultures = new[] { new CultureInfo("en-US"), new CultureInfo("ru-RU") }, RequestCultureProviders = new List<IRequestCultureProvider> { new AcceptLanguageHeaderRequestCultureProvider() } });

अब, ताकि नियंत्रक के अंदर, हमारे पास स्थानीयकरण तक पहुंच हो, हम कंस्ट्रक्टर में IStringLocalizer प्रकार की निर्भरता को लागू करेंगे, और पंजीकरण कार्रवाई की वापसी की अभिव्यक्ति को संशोधित करेंगे:

  return Ok(string.Format(_localizer["RegisteredMessage"], request.Name));

ResxValidatior वर्ग नियमों की जांच के लिए जिम्मेदार होगा, जो बनाए गए संसाधनों का उपयोग करेगा। इसमें कीवर्ड की आरक्षित सूची, प्रीसेट रोल और उन्हें जांचने की एक विधि है।

ResxValidatior

 public class ResxValidator { public const char ValuesSeparator = ','; public const char RangeSeparator = '-'; public enum Keywords { DisplayName, Message, Required, Pattern, Length, MinLength, MaxLength, Range, MinValue, MaxValue, Values, Compare } private readonly Dictionary<Keywords, Func<string, string, bool>> _rules = new Dictionary<Keywords, Func<string, string, bool>>() { [Keywords.Required] = (v, arg) => !string.IsNullOrEmpty(v), [Keywords.Pattern] = (v, arg) => !string.IsNullOrWhiteSpace(v) && Regex.IsMatch(v, arg), [Keywords.Range] = (v, arg) => !string.IsNullOrWhiteSpace(v) && long.TryParse(v, out var vLong) && long.TryParse(arg.Split(RangeSeparator)[0].Trim(), out var vMin) && long.TryParse(arg.Split(RangeSeparator)[1].Trim(), out var vMax) && vLong >= vMin && vLong <= vMax, [Keywords.Length] = (v, arg) => !string.IsNullOrWhiteSpace(v) && long.TryParse(arg.Split(RangeSeparator)[0].Trim(), out var vMin) && long.TryParse(arg.Split(RangeSeparator)[1].Trim(), out var vMax) && v.Length >= vMin && v.Length <= vMax, [Keywords.MinLength] = (v, arg) => !string.IsNullOrWhiteSpace(v) && v.Length >= int.Parse(arg), [Keywords.MaxLength] = (v, arg) => !string.IsNullOrWhiteSpace(v) && v.Length <= int.Parse(arg), [Keywords.Values] = (v, arg) => !string.IsNullOrWhiteSpace(v) && arg.Split(ValuesSeparator).Select(x => x.Trim()).Contains(v), [Keywords.MinValue] = (v, arg) => !string.IsNullOrEmpty(v) && long.TryParse(v, out var vLong) && long.TryParse(arg, out var argLong) && vLong >= argLong, [Keywords.MaxValue] = (v, arg) => !string.IsNullOrEmpty(v) && long.TryParse(v, out var vLong) && long.TryParse(arg, out var argLong) && vLong <= argLong }; private readonly IStringLocalizer _localizer; public ResxValidator(IStringLocalizer localizer) { _localizer = localizer; } public bool IsValid(string memberName, string value, out string message) { var rules = _rules.Select(x => new { Name = x.Key, Check = x.Value, String = _localizer.GetString(memberName + x.Key) }).Where(x => x.String != null && !x.String.ResourceNotFound); foreach (var rule in rules) { if (!rule.Check(value, rule.String?.Value)) { var messageResourceKey = $"{memberName}{rule.Name}{Keywords.Message}"; var messageResource = _localizer[messageResourceKey]; var displayNameResourceKey = $"{memberName}{Keywords.DisplayName}"; var displayNameResource = _localizer[displayNameResourceKey] ?? displayNameResourceKey; message = messageResource != null && !messageResource.ResourceNotFound ? string.Format(messageResource.Value, displayNameResource, rule.String?.Value) : messageResourceKey; return false; } } message = null; return true; } }

एक कस्टम सत्यापन विशेषता बनाएं जिसे हमारा सत्यापनकर्ता कॉल करेगा। यहां, मानक तर्क मॉडल के सत्यापित संपत्ति के मूल्य, उसके नाम और सत्यापनकर्ता को कॉल करना है।

ResxAttribute

 public sealed class ResxAttribute : ValidationAttribute { private readonly string _baseName; private string _resourceName; public ResxAttribute(string sectionName, string resourceName = null) { _baseName = sectionName; _resourceName = resourceName; } protected override ValidationResult IsValid(object value, ValidationContext validationContext) { if (_resourceName == null) _resourceName = validationContext.MemberName; var factory = validationContext .GetService(typeof(IStringLocalizerFactory)) as IStringLocalizerFactory; var localizer = factory?.Create(_baseName, System.Reflection.Assembly.GetExecutingAssembly().GetName().Name); ErrorMessage = ErrorMessageString; var currentValue = value as string; var validator = new ResxValidator(localizer); return validator.IsValid(_resourceName, currentValue, out var message) ? ValidationResult.Success : new ValidationResult(message); } }

अंत में, आप संसाधन के नाम को इंगित करते हुए, हमारे सार्वभौमिक के साथ अनुरोध में सभी विशेषताओं को बदल सकते हैं:

  [Resx(sectionName: "Controllers.AccountController")]

हम समान अनुरोध भेजकर कार्यक्षमता का परीक्षण करेंगे:

  { "Name": "a", "Password" : "123" }

स्थानीयकरण के लिए, नियंत्रकों को जोड़ें। अंग्रेजी में संदेशों के साथ कंट्रोलर। कंटोलर। एनआरएक्स, साथ ही हेडर, संस्कृति के बारे में जानकारी के साथ: स्वीकार-भाषा: एन-यूएस।

कृपया ध्यान दें कि अब हम एक विशिष्ट संस्कृति के लिए सेटिंग्स को ओवरराइड कर सकते हैं। * .En.resx फ़ाइल में, मैंने न्यूनतम पासवर्ड लंबाई 8 निर्दिष्ट की है, और मुझे एक उपयुक्त संदेश मिला है:

  "Password": [ "Password must be at least 8 characters" ]

क्लाइंट सत्यापन के दौरान समान संदेश प्रदर्शित करने के लिए, आपको किसी तरह क्लाइंट हिस्से के लिए संदेशों की पूरी सूची को निर्यात करना होगा। सादगी के लिए, हम एक अलग नियंत्रक बनाएंगे जो आपको i18n प्रारूप में क्लाइंट एप्लिकेशन के लिए आवश्यक सब कुछ देगा।

LocaleController

  [Route("[controller]")] [ApiController] public class LocaleController : ControllerBase { private readonly IStringLocalizerFactory _factory; private readonly string _assumbly; private readonly string _location; public LocaleController(IStringLocalizerFactory factory) { _factory = factory; _assumbly = System.Reflection.Assembly.GetExecutingAssembly().GetName().Name; _location = Path.Combine(Directory.GetCurrentDirectory(), "Resources"); } [HttpGet("Config")] public IActionResult GetConfig(string culture) { if (!string.IsNullOrEmpty(culture)) { CultureInfo.CurrentCulture = new CultureInfo(culture); CultureInfo.CurrentUICulture = new CultureInfo(culture); } var resources = Directory.GetFiles(_location, "*.resx", SearchOption.AllDirectories) .Select(x => x.Replace(_location + Path.DirectorySeparatorChar, string.Empty)) .Select(x => x.Substring(0, x.IndexOf('.'))) .Distinct(); var config = new Dictionary<string, Dictionary<string, string>>(); foreach (var resource in resources.Select(x => x.Replace('\\', '.'))) { var section = _factory.Create(resource, _assumbly) .GetAllStrings() .OrderBy(x => x.Name) .ToDictionary(x => x.Name, x => x.Value); config.Add(resource.Replace('.', '-'), section); } var result = JsonConvert.SerializeObject(config, Formatting.Indented); return Ok(result); } }

स्वीकार-भाषा के आधार पर, यह वापस आ जाएगा:

स्वीकार-भाषा: en-US

 { "Controllers-AccountController": { "AgeDisplayName": "Age", "AgeRange": "18 - 150", "AgeRangeMessage": "{0} must be {1}", "EmailDisplayName": "Email", "EmailPattern": "^[-\\w.]+@([A-z0-9][-A-z0-9]+\\.)+[Az]{2,4}$", "EmailPatternMessage": "Incorrect email", "EmailRequired": "", "EmailRequiredMessage": "Email required", "LanguageDisplayName": "Language", "LanguageValues": "ru-RU, en-US", "LanguageValuesMessage": "Incorrect language. Possible: {1}", "NameDisplayName": "Name", "NameLength": "2 - 50", "NameLengthMessage": "Name length must be {1} characters", "PasswordConfirmCompare": "Password", "PasswordConfirmCompareMessage": "Passwords must be the same", "PasswordConfirmDisplayName": "Password confirmation", "PasswordDisplayName": "Password", "PasswordMaxLength": "100", "PasswordMaxLengthMessage": "{0} can't be greater than {1} characters", "PasswordMinLength": "8", "PasswordMinLengthMessage": "{0} must be at least {1} characters", "PasswordRequired": "", "PasswordRequiredMessage": "Password required", "RegisteredMessage": "{0}, you've been registered!" } }

स्वीकार-भाषा: en-RU

 { "Controllers-AccountController": { "AgeDisplayName": "", "AgeRange": "18 - 150", "AgeRangeMessage": "{0}     {1}", "EmailDisplayName": " . ", "EmailPattern": "^[-\\w.]+@([A-z0-9][-A-z0-9]+\\.)+[Az]{2,4}$", "EmailPatternMessage": "  . ", "EmailRequired": "", "EmailRequiredMessage": "  . ", "LanguageDisplayName": "", "LanguageValues": "ru-RU, en-US", "LanguageValuesMessage": " .  : {1}", "NameDisplayName": "", "NameLength": "2 - 50", "NameLengthMessage": "    {1} ", "PasswordConfirmCompare": "Password", "PasswordConfirmCompareMessage": "  ", "PasswordConfirmDisplayName": " ", "PasswordDisplayName": "", "PasswordMaxLength": "100", "PasswordMaxLengthMessage": "{0}    {1} ", "PasswordMinLength": "6", "PasswordMinLengthMessage": "{0}    {1} ", "PasswordRequired": "", "PasswordRequiredMessage": " ", "RegisteredMessage": "{0},  !" } }

ग्राहक के लिए क्रॉस-ऑरिजनल अनुरोधों की अनुमति देने के लिए आखिरी काम करना बाकी है। ऐसा करने के लिए, Startup.ConfigureServices में जोड़ें:

  services.AddCors();

और स्टार्टअप में जोड़ें कॉन्फ़िगर करें:

  app.UseCors(x => x .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader());

ग्राहक भाग

मैं एक IDE में एप्लिकेशन के सभी भागों को देखना पसंद करता हूं, इसलिए मैं विज़ुअल स्टूडियो टेम्पलेट का उपयोग करके एक क्लाइंट एप्लिकेशन प्रोजेक्ट बनाऊंगा: बेसिक Vue.js वेब एप्लिकेशन। यदि आपके पास यह नहीं है / आप वीएस को ऐसे टेम्प्लेट के साथ रोकना नहीं चाहते हैं, तो वीयूआई क्ली का उपयोग करें, इसके साथ मैं पहले कई पैकेज स्थापित करूंगा: vuetify, axios, vue-i18n।

हम LocaleController से परिवर्तित संसाधन फ़ाइलों का अनुरोध करते हैं, स्वीकार-भाषा हेडर में संस्कृति का संकेत देते हैं, और स्थान निर्देशिका में en.json और ru.json फ़ाइलों में प्रतिक्रिया देते हैं।

अगला, हमें सर्वर से त्रुटियों के साथ प्रतिक्रिया को पार्स करने के लिए एक सेवा की आवश्यकता है।

errorHandler.service.js

 const ErrorHandlerService = { parseResponseError (error) { if (error.toString().includes('Network Error')) { return 'ServerUnavailable' } if (error.response) { let statusText = error.response.statusText; if (error.response.data && error.response.data.errors) { let message = ''; for (let property in error.response.data.errors) { error.response.data.errors[property].forEach(function (entry) { if (entry) { message += entry + '\n' } }) } return message } else if (error.response.data && error.response.data.message) { return error.response.data.message } else if (statusText) { return statusText } } } }; export { ErrorHandlerService }

Vutify.js में निर्मित vee-validate सत्यापनकर्ता को नियम विशेषता के साथ सत्यापन कार्यों की एक सरणी निर्दिष्ट करने की आवश्यकता है, हम उन्हें संसाधनों के साथ काम करने के लिए सेवा से अनुरोध करेंगे।

locale.service.js

 import i18n from '../i18n'; const LocaleService = { getRules(resource, options) { let rules = []; options = this.prepareOptions(options); this.addRequireRule(rules, resource, options); this.addPatternRule(rules, resource, options); this.addRangeRule(rules, resource, options); this.addLengthRule(rules, resource, options); this.addMaxLengthRule(rules, resource, options); this.addMinLengthRule(rules, resource, options); this.addValuesRule(rules, resource, options); this.addCompareRule(rules, resource, options); return rules; }, prepareOptions(options){ let getter = v => v; let compared = () => null; if (!options){ options = { getter: getter, compared: compared }; } if (!options.getter) options.getter = getter; if (!options.compared) options.compared = compared; return options; }, addRequireRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'Required'); if(settings){ rules.push(v => !!options.getter(v) || settings.message); } }, addPatternRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'Pattern'); if(settings){ rules.push(v => !!options.getter(v) || settings.message); rules.push(v => new RegExp(settings.value).test(options.getter(v)) || settings.message); } }, addRangeRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'Range'); if(settings){ let values = settings.value.split('-'); rules.push(v => !!options.getter(v) || settings.message); rules.push(v => parseInt(options.getter(v)) >= values[0] && parseInt(options.getter(v)) <= values[1] || settings.message); } }, addLengthRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'Length'); if(settings){ let values = settings.value.split('-'); rules.push(v => !!options.getter(v) || settings.message); rules.push(v => options.getter(v).length >= values[0] && options.getter(v).length <= values[1] || settings.message); } }, addMaxLengthRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'MaxLength'); if(settings){ rules.push(v => !!options.getter(v) || settings.message); rules.push(v => options.getter(v).length <= settings.value || settings.message); } }, addMinLengthRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'MinLength'); if(settings){ rules.push(v => !!options.getter(v) || settings.message); rules.push(v => options.getter(v).length >= settings.value || settings.message); } }, addValuesRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'Values'); if(settings) { let values = settings.value.split(','); rules.push(v => !!options.getter(v) || settings.message); rules.push(v => !!values.find(x => x.trim() === options.getter(v)) || settings.message); } }, addCompareRule(rules, resource, options){ let settings = this.getRuleSettings(resource, 'Compare'); if(settings) { rules.push(() => { return settings.value === '' || !!settings.value || settings.message }); rules.push(v => { return options.getter(v) === options.compared() || settings.message; }); } }, getRuleSettings(resource, rule){ let value = this.getRuleValue(resource, rule); let message = this.getRuleMessage(resource, rule, value); return value === '' || value ? { value: value, message: message } : null; }, getRuleValue(resource, rule){ let key =`${resource}${rule}`; return this.getI18nValue(key); }, getDisplayName(resource){ let key =`${resource}DisplayName`; return this.getI18nValue(key); }, getRuleMessage(resource, rule, value){ let key =`${resource}${rule}Message`; return i18n.t(key, [this.getDisplayName(resource), value]); }, getI18nValue(key){ let value = i18n.t(key); return value !== key ? value : null; } }; export { LocaleService }

इस सेवा का पूरी तरह से वर्णन करने का कोई मतलब नहीं है, जैसा कि यह ResxValidator वर्ग को आंशिक रूप से डुप्लिकेट करता है। मैं ध्यान देता हूं कि तुलना नियम की जांच करने के लिए, जहां वर्तमान संपत्ति के मूल्य की दूसरे के साथ तुलना करना आवश्यक है, विकल्प वस्तु पारित की जाती है, जिसमें प्रतिनिधि की तुलना की जाती है, जो तुलना के लिए मूल्य लौटाता है।

इस प्रकार, एक विशिष्ट फॉर्म फ़ील्ड इस तरह दिखेगा:

 <v-text-field :label="displayFor('Name')" :rules="rulesFor('Name')" v-model="model.Name" type="text" prepend-icon="mdi-account"></v-text-field>

लेबल के लिए, आवरण फ़ंक्शन को locale.service पर कॉल किया जाता है, जो संसाधन का पूरा नाम, साथ ही साथ उस संपत्ति का नाम जिसके लिए आप प्रदर्शन नाम प्राप्त करना चाहते हैं। इसी तरह नियमों के लिए। वी-मॉडल दर्ज किए गए डेटा को संग्रहीत करने के लिए एक मॉडल निर्दिष्ट करता है।
पासवर्ड पुष्टिकरण संपत्ति के लिए, विकल्प ऑब्जेक्ट में पासवर्ड के मूल्यों को पास करें:

 :rules="rulesFor('PasswordConfirm', { compared:() => model.Password })"

भाषा चयन के लिए v- चयन में तत्वों की पूर्वनिर्धारित सूची होती है (यह उदाहरण की सरलता के लिए किया जाता है) और onChange एक हैंडलर है। क्योंकि हम एसपीए करते हैं, हम उपयोगकर्ता द्वारा किसी भाषा का चयन करने पर स्थानीयकरण को बदलना चाहते हैं, इसलिए, ऑन-चेंज चयन में, चयनित भाषा की जांच की जाती है, और यदि यह बदलता है, तो इंटरफ़ेस लोकेल बदल जाता है:

  onCultureChange (value) { let culture = this.cultures.find(x => x.value === value); this.model.Culture = culture.value; if (culture.locale !== this.$i18n.locale) { this.$i18n.locale = culture.locale; this.$refs.form.resetValidation(); } }

यह सब, एक काम कर रहे आवेदन के साथ भंडार यहाँ है ।

संक्षेप में, मैं यह नोट करना चाहूंगा कि संसाधनों को खुद को एक सिंगल JSON फॉर्मेट में स्टोर करना बहुत अच्छा होगा, जिसे हम लोकेलकॉन्ट्रोलर से अनुरोध करते हैं, ताकि एएसपी फ्रेमवर्क की बारीकियों से इसे अलग किया जा सके। ResxValidatior में, विशेष रूप से एक्स्टेंसिबिलिटी और कस्टम नियमों के लिए समर्थन जोड़ सकता है, साथ ही लोकेल के समान कोड को हाइलाइट कर सकता है और समर्थन को सरल बनाने के लिए इसे JS स्टाइल में फिर से लिख सकता है। हालांकि, इस उदाहरण में, मैं सादगी पर ध्यान केंद्रित करता हूं।

Asp कोर + VueJS के उदाहरण द्वारा सत्यापन नियमों का एकीकरण

सर्वर साइड

ग्राहक भाग

More articles: