Angular短信模板校验代码

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短信模板校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在 Angular2 中实现自定义校验指令（确认密码）的方法

    在 Angular2 中实现自定义校验指令（确认密码）的方法

    我们会在本文中探索 Angular 2 内建的自定义验证. # 介绍 Angular 2 原生就支持一些有用的验证器: required: 验证字段必须存在 minlength: 验证字段值的最小长度有效 maxlength: 验证字段值的最大长度有效 pattern: 验证输入的值是否匹配给定的模板,比如 email 我们会基于下面的接口创建一个表单来获取用户信息. // user.interface.ts export interface User { username: string; /

  • angular4中关于表单的校验示例

    本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过. 一.使用响应式表单的步骤 1.在模块(一般是app.module.ts)中引入ReactiveFormsModule 2.在组件的ts文件中使用响应式表单 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; export class ReactiveFormComponent implements OnInit { p

  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验

    $httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信.在某些情况下,我们希望可以俘获所有的请求,并且在将其发送到服务端之前进行操作.还有一些情况是,我们希望俘获响应,并且在完成完成调用之前处理它.一个很好例子就是处理全局 http 异常.拦截器(Interceptors)应运而生.本文将介绍 AngularJS 的拦截器,并且给几个有用的例子. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一

  • 微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决

    今天偶然的把微信jssdk的debug打开后,发现调试信息总是提示签名错误,感情前两天api的"偶尔"不生效,不是因为还没执行代码,而是因为签名没正确啊!,这就是个100%可以重现的错误 但只要这个SPA刚刷新过,或加载完后中途没有跳转,,签名就会是正确的. 而当路由发生改变,我们对新"跳转"的页面重新签名之后,却出现了签名错误,而我们的签名明明是正确的,把各种参数拿去微信JS签名校验工具(http://mp.weixin.qq.com/debug/cgi-bin/

  • Angular短信模板校验代码

    1.短信模板内容 验证码 ${username} 12345 验证码 ${username} 12345 验证码 ${username} 12345 从代码中提取 username, 并判断验证码 username中只存在英文字母 2.内容校验,提取模板中${}的内容并且,内容只能使用英文 smsTemplateContentChange(value){ // 短信模板内容 校验 const error = this.smsTemplateForm.get('templateContent').

  • Java整合腾讯云短信发送实例代码

    目录 1. 引入相关maven依赖 2. 编写短信发送工具类 3. 业务层 3. 相关工具类 1. 引入相关maven依赖 <dependency> <groupId>com.github.qcloudsms</groupId> <artifactId>qcloudsms</artifactId> <version>1.0.6</version> </dependency> <dependency>

  • SpringBoot实现发送短信的示例代码

    SpringBoot实现发送短信的示例代码

    一.说明 在https://office.ucpaas.com/ 注册账号并且认证为个人开发者(需要身份证),这个不难,不多说了 短信的三方平台有许多,对于选择什么平台要根据个人业务场景选择,这里只是DEMO 二.创建平台项目 创建平台项目后可以获得短信基础配置,在调用短信接口时使用 三.创建短信模板 模板动态参数设置规则为{1}{2}{3}...{n} (注意:在调用时参数之间拼接用逗号作为间隔符,这个见代码描述) 四.使用RestTemplate调用短信接口 Spring Boot 版本:2

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

  • Laravel框架实现发送短信验证功能代码

    Laravel框架实现发送短信验证功能代码

    Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. Laravel短信验证思路详解 今天在做到用户注册和个人中心的安全管理时,我实现借助第三方短信平台在Laravel框架中进行手机验证的设置; 由于我做的是一个为客户提供医疗咨询和保健品网站,所以我们对客户个人隐私的保护显得尤为重要,因而在客户登录后进入个人中心前,

  • jQuery插件开发发送短信倒计时功能代码

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>

  • Android监听手机短信的示例代码

    本文介绍了Android监听手机短信的示例代码,分享给大家,具体如下: 以下情况可能会导致短信拦截失败: 小米,360等品牌手机拦截短信,短信的优先级给了系统 用户禁用短信权限 手机连接电脑,被电脑端的手机助手类软件截获 手机内装有QQ通讯录之类的管理联系人,短信的应用,被截获. 前提--权限: <uses-permission android:name="android.permission.RECEIVE_SMS" > </uses-permission>

  • spring boot使用properties定义短信模板的方法教程

    前言 通常我们做开发时候会遇到短信发送邮件发送之类的需求,发送内容往往会由客户提供一个模板,如果我们是在程序里拼接字符串来搞定这个模板,很明显是一种坑队友的做法.一般将模板放入properties文件中,使用的时候替换其中的一些变量即可. 本文我们使用springboot来实现根据模板发送短信验证码的功能,下面话不多说了,来一起看看详细的介绍吧. tips: 1.正则表达式 2.springboot读取properties文件 模板定义 将需要定义的短信模板都定义在msg.properties文

  • java 随机生成6位短信验证码实例代码

    生成6位随机数字其实很简单,只需一行代码,具体如下: String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000); 具体实现发送短信验证码功能,以注册为例,其实现代码如下: 这里需要用到第三方短信验证码接口,这里用到的是乐信短信验证码接口,乐信接口API文档说明(http://www.lx598.com/apitext.html),乐信java调用短信验证码接口 demo(http://www.lx598.c

  • Python短信轰炸的代码

    环境 python3.0 工具 pycharm 谷歌插件chromedriver 程序执行方法 from selenium import webdriver import time from threading import Thread class HongZha(object): def __init__(self): self.phone = "xxxxx"#你要轰炸的电话号码 self.num = 0 def send_yzm(self,button,name): button

随机推荐