Angular短信模板校验代码


Posted in Javascript onSeptember 23, 2020

1、短信模板内容

验证码 ${username} 12345
验证码 ${username} 12345
验证码 ${username} 12345

从代码中提取 username, 并判断验证码 username中只存在英文字母

2、内容校验,提取模板中${}的内容并且,内容只能使用英文

smsTemplateContentChange(value){
  // 短信模板内容 校验
  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){
    // 设置错误信息
    this.smsTemplateForm.get('templateContent').setErrors({errorParams: '参数只能使用英文'});
   }else{
    this.paramsList = resultList;
   }

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

 }

3、前端html

<se label="短信模板" [error]="{
  required: '请输入短信模板',
  pattern: '最大长度不超过200!',
  errorParams: '${}参数中只能使用英文'}">
   <textarea formControlName="xxx" [(ngModel)]="smsTemplateVo.xxx"
        (ngModelChange)="smsTemplateContentChange(smsTemplateVo.xxx)" nz-input required></textarea>
   <div ><strong>提取可用参数:</strong><nz-tag *ngFor="let tag of paramsList" nzColor="default">{{tag}}</nz-tag></div>
  </se>
 

4、最终效果

Angular短信模板校验代码

Angular短信模板校验代码

到此这篇关于Angular短信模板校验代码的文章就介绍到这了,更多相关Angular短信模板校验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
javascript 禁止复制网页
Jun 11 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
JavaScript实现单点登录的示例
Sep 23 #Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 #Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 #Javascript
js实现三角形粒子运动
Sep 22 #Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 #Javascript
js实现删除json中指定的元素
Sep 22 #Javascript
vue使用canvas实现移动端手写签名
Sep 22 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python实现自动更换ip的方法
2015/05/05 Python
Python 爬虫图片简单实现
2017/06/01 Python
详谈python read readline readlines的区别
2017/09/22 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python实现代码块儿折叠
2020/04/15 Python
学python爬虫能做什么
2020/07/29 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
疾病证明书
2015/06/19 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js