# 配置说明

配置说明中包含了各个组件的一些配置用法，当然普通的譬如输入长度、提示词等在这里不做介绍，主要介绍效验规则、数据配置（针对select、radio、checkbox之类）、监听、事件、动态配置

# 效验规则

表单中效验是最基础的功能，ng-form系列通过效验配置后，提供前端效验和后端效验（java）。下面主要对前端效验规则配置方法进行说明。

效验目前主要有必填效验、表达式效验和正则效验三种方法，如果配置多个，则多个为并且的关系。以下是一个完整带有三种方式的效验配置:

"rules": [
		{
			"required": true,
			"message": "名称不能为空",
			"trigger": [
				"blur"
			]
		},
		{
			"vtype": 1,
			"pattern": "\\D+",
			"script": "",
			"message": "姓名中不能带有数字"
		},
		{
			"vtype": 2,
			"pattern": "",
			"script": "
				const len = $.name.length
				return len >=2 && len <= 8
			",
			"message": "姓名长度为2至8个字符"
		}
	]

# 1、必填

对于可输入的组件在右侧配置栏中均会有 “效验规则”配置项，配置项第一个就是勾选“是否必填”，当勾选“必填”后，建议修改后面必填的提示词。

必填的配置在json中的内容结构为:


"rules": [
   	{
   		"required": true,
   		"message": "名称不能为空",
   		"trigger": [
   			"blur"
   		]
   	}
   ]

当配置了必填的组件在未输入时，表单中当前组件下方会出现必填的红色提示词提示。

# 2、正则表达式

正则表达式效验是前端常用的一种效验方式，通过正则表达式和当前的输入值进行正则匹配，匹配成功则通过，匹配不成功则不通过，表单中按照配置的提示词对用户进行提示。

通过在右侧属性配置面板中找到效验规则，点击下面“增加效验”按钮，勾选“正则”。

注意： 正则表达式直接书写具体的表达式内容即可，不要写一般js中前后的/。以下是几个常见的正则写法：


1. 必须全部为数字
^\d+$
2. 不能包含数字
^\D+$

正则表达式效验在配置中的实际内容格式为:

"rules": [
		{
			"vtype": 1,
			"pattern": "^\\D+$",
			"script": "",
			"message": "姓名中不能带有数字"
		}
	]

其中正则表达式的效验类型 vtype = 1 。

# 3、表达式效验

在表单中经常会有组件之间关联的效验方式，譬如当用户信息采集是，选择证件类型时选择了身份证，则身份证号码必填还要符合一定规则，当选择护照时，身份证号码这时候可能需要隐藏或者不进行必填效验（隐藏请参考后面的动态隐藏配置）。

通过在右侧属性配置面板中找到效验规则，点击下面“增加效验”按钮，勾选“表达式”。

示例中对于当前身份证号码的表达式效验配置如下:

"rules": [
		{
			"required": false,
			"message": "",
			"trigger": [
				"blur"
			]
		},
		{
			"vtype": 2,
			"pattern": "^\\D+$",
			"script": "
				const idType = $.idType
				if(idType == 'card') {
					return /^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$/.test($.cardNo)
				}
				return true
			",
			"message": "身份证号码必须时18位数字数字"
		}
	]

其中表达式的效验类型 vtype = 2 。

# 数据配置

数据配置目前主要是针对select、checkbox、radio、cascader组件，这些组件除了静态数据配置以外，还可以接收外部api和数据字典配置。

← 组件说明二次开发 →