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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript 常用函数
Dec 30 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 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中的curl使用入门教程和常见用法实例
2014/04/10 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP CURL使用详解
2019/03/21 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
javascript中Function类型详解
2015/04/28 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python celery原理及运行流程解析
2020/06/13 Python
Python 中如何写注释
2020/08/28 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
班组长安全职责
2014/01/05 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
工作保证书范文
2014/04/29 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
车位出租协议书范本
2016/03/19 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
使用Python开发冰球小游戏
2022/04/30 Python