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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
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
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP如何将XML转成数组
2016/04/04 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
简述Python中的进程、线程、协程
2016/03/18 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
django静态文件加载的方法
2018/05/20 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
使用Python发现隐藏的wifi
2020/03/04 Python
python实现取余操作的简单实例
2020/08/16 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
文明学生标兵事迹
2014/01/21 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
刑事法律意见书
2015/06/04 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
vue打包时去掉所有的console.log
2022/04/10 Vue.js