Angular短信模板校驗(yàn)代碼
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)文章希望大家以后多多支持腳本之家!
- Angular性能優(yōu)化之第三方組件和懶加載技術(shù)
- Angular框架詳解之視圖抽象定義
- AngularJS 中括號(hào)的作用詳解
- 關(guān)于angular引入ng-zorro的問(wèn)題淺析
- Angular+Ionic使用queryParams實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)傳值的方法
- Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例
- AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案
- Angular+ionic實(shí)現(xiàn)折疊展開效果的示例代碼
- 淺談Angular的12個(gè)經(jīng)典問(wèn)題
相關(guān)文章
angular.foreach 循環(huán)方法使用指南
本文主要介紹了angular.foreach 循環(huán)方法使用格式及參數(shù),是篇非常基礎(chǔ)的文章,與需要的小伙伴參考下2015-01-01關(guān)于AngularJS中幾種Providers的區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于AngularJS中幾種Providers的區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用AngularJS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
這篇文章給大家講解四種組件類型,非常不錯(cuò),具有參考借鑒價(jià)值,對(duì)angular 動(dòng)態(tài)組件類型感興趣的朋友參考下吧2017-02-02AngularJS中的API(接口)簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹AngularJS API(接口),這里對(duì)AngularJS API的知識(shí)做了詳細(xì)講解,并附簡(jiǎn)單代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10angular ngClick阻止冒泡使用默認(rèn)行為的方法
這篇文章主要介紹了angular ngClick阻止冒泡使用默認(rèn)行為的方法,較為詳細(xì)的分析了AngularJS中ngClick事件執(zhí)行原理與阻止冒泡的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11