快捷導(dǎo)航

Angular短信模板校驗(yàn)代碼

更新時(shí)間：2020年09月23日 09:13:36 作者：蝸?？癖?

這篇文章主要介紹了Angular短信模板校驗(yàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、短信模板內(nèi)容

驗(yàn)證碼 ${username} 12345
驗(yàn)證碼 ${username} 12345
驗(yàn)證碼 ${username} 12345

從代碼中提取 username, 并判斷驗(yàn)證碼 username中只存在英文字母

2、內(nèi)容校驗(yàn)，提取模板中${}的內(nèi)容并且，內(nèi)容只能使用英文

smsTemplateContentChange(value){
  // 短信模板內(nèi)容 校驗(yàn)
  const error = this.smsTemplateForm.get('templateContent').getError('pattern');
  if (error){
   return;
  }else{
   this.smsTemplateForm.get('templateContent').setErrors(null);
  }
  const reg = /\$\{((?!\{).)*\}/g;
  const matchStr = value.match(reg);
  const resultList = new Set();
  this.paramsList = new Set();
  const pattern = '^[a-zA-Z]{1,}$';
  const regex = new RegExp(pattern);
  let isError = false;
  if (matchStr){
   matchStr.forEach((item: string) => {
    const result = item.replace('${', '').replace('}', '');
    if (!result.match(regex)){
     isError = true;
    }
    resultList.add(result);
   });
   if (isError){
    // 設(shè)置錯(cuò)誤信息
    this.smsTemplateForm.get('templateContent').setErrors({errorParams: '參數(shù)只能使用英文'});
   }else{
    this.paramsList = resultList;
   }

  }
  // console.log(value.match(reg).replace('${', '').replace('}', ''));

 }

3、前端html

<se label="短信模板" [error]="{
  required: '請(qǐng)輸入短信模板',
  pattern: '最大長(zhǎng)度不超過(guò)200！',
  errorParams: '${}參數(shù)中只能使用英文'}">
   <textarea formControlName="xxx" [(ngModel)]="smsTemplateVo.xxx"
        (ngModelChange)="smsTemplateContentChange(smsTemplateVo.xxx)" nz-input required></textarea>
   <div ><strong>提取可用參數(shù)：</strong><nz-tag *ngFor="let tag of paramsList" nzColor="default">{{tag}}</nz-tag></div>
  </se>

4、最終效果

到此這篇關(guān)于Angular短信模板校驗(yàn)代碼的文章就介紹到這了,更多相關(guān)Angular短信模板校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

angular使用post、get向后臺(tái)傳參的問(wèn)題實(shí)例
本篇文章主要介紹了angular使用post、get向后臺(tái)傳參的問(wèn)題實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
Angularjs注入攔截器實(shí)現(xiàn)Loading效果
angularjs作為一個(gè)全ajax的框架，對(duì)于請(qǐng)求，如果頁(yè)面上不做任何操作的話，在結(jié)果反回來(lái)之前，頁(yè)面是沒(méi)有任何響應(yīng)的，不像普通的HTTP請(qǐng)求，會(huì)有進(jìn)度條之類
2015-12-12
詳解angular element()方法使用
本篇文章主要介紹了詳解angular element()方法使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
AngularJS過(guò)濾器filter用法分析
這篇文章主要介紹了AngularJS過(guò)濾器filter用法,結(jié)合實(shí)例形式分析了過(guò)濾器filter的功能、分類、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
AngularJS實(shí)現(xiàn)表單手動(dòng)驗(yàn)證和表單自動(dòng)驗(yàn)證
本文是對(duì)AngularJS表單驗(yàn)證，手動(dòng)驗(yàn)證或自動(dòng)驗(yàn)證的講解，對(duì)學(xué)習(xí)JavaScript編程技術(shù)有所幫助，感興趣的小伙伴們可以參考一下
2015-12-12
AngularJS表單詳解及示例代碼
本文主要介紹AngularJS表單的知識(shí)，這里整理了表單的基礎(chǔ)知識(shí)和簡(jiǎn)單的示例代碼，有需要的小伙伴可以參考下
2016-08-08
AngularJS實(shí)現(xiàn)根據(jù)變量改變動(dòng)態(tài)加載模板的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)根據(jù)變量改變動(dòng)態(tài)加載模板的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了AngularJS動(dòng)態(tài)加載模板的主要操作技巧與模板實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-11-11
AngularJS 過(guò)濾器的簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 過(guò)濾器,這里提供詳細(xì)了AngularJS 過(guò)濾器詳細(xì)資料,并提供簡(jiǎn)單實(shí)例,有需要的朋友可以參考下
2016-07-07
使用 Angular RouteReuseStrategy 緩存（路由）組件的實(shí)例代碼
這篇文章主要介紹了使用 Angular RouteReuseStrategy 緩存（路由）組件的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
Angular2下使用pdf插件的方法詳解
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個(gè)插件是要實(shí)現(xiàn)一個(gè)pdf顯示的功能，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-04-04