详解ng-alain动态表单SF表单项设置必填和正则校验


Posted in Javascript onJune 11, 2019

在使用动态表单时对表单项进行非空校验及正则校验。

使用手机号进行校验,示例如下:

动态表单的基本使用:https://ng-alain.com/form/getting-started/zh

基于基本示例,增加手机号必填与正则校验的例子:

@Component({
 selector: 'app-home',
 template: `
 <sf [schema]="schema" [ui]="ui" (formSubmit)="submit($event)"></sf>
 `
})
export class HomeComponent {
 schema: SFSchema = {
  properties: {
   email: {
    type: 'string',
    title: '邮箱',
    format: 'email',
    maxLength: 20
   },
   name: {
    type: 'string',
    title: '姓名',
    minLength: 3
   },
   mobileNumber: { type: 'string', title: '手机号', pattern: '^1[0-9]{10}$' },
  },
  
 };

 ui: SFUISchema = {
  '*': {
   spanLabelFixed: 100,
   grid: { span: 24 },
  },
  $mobileNumber: {
   widget: 'string',
   errors: { 'pattern': '请输入11位手机号码' }
  }
 };

 submit(value: any) {

 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
js实现小时钟效果
Mar 25 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 #Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 #Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 #Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 #Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 #Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 #Javascript
vue.js中导出Excel表格的案例分析
Jun 11 #Javascript
You might like
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python模拟Django框架实例
2016/05/17 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
酒店出纳岗位职责
2013/12/29 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
法律进学校实施方案
2014/03/15 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
教师工作表现自我评价
2015/03/05 职场文书
大学班长竞选稿
2015/11/20 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Linux中如何安装并部署Redis
2022/04/18 Servers
Golang 切片(Slice)实现增删改查
2022/04/22 Golang
浅谈Redis的事件驱动模型
2022/05/30 Redis