1. 一. 低代码 - 基于MongoDB的自定义表单系统
最近上线了一个小型SAAS系统，基于SpringCloud Alibaba，阿里云Serverless部署。系统的核心就是围绕自定义表单展开各种业务，之前对自定义表单的各种方案做过一些调研和对比，苦于没有找到一个比较成熟且“聪明”的方案。最终衡量利弊和开发效率之后，决定尝试一下MongoDB + 前端表单设计的方案。业务核心以外的其他模块Mq，Activiti等等都是一些成熟的方案。
就自定义表单这一块内容，从用户的角度，在表单设计页面用前端工具咔咔连拖带拽设计出一个表单，提交保存之后立马就可以用了，感受还是不错的。
背后要做的事情还挺多，简单罗列一下，后面分几篇文逐个记录一下。
1. 数据类型和数据校验的问题。
2. 多步骤表单、付款步骤以及各步骤的先决条件设置
3. 如何支持Excel的导入，导入模板的管理及校验方式
……
一、表单的定义
现在使用前端进行自定义表单拖拽配置的工具很多，我用的Avue，有一些坑，不过能凑活用。后台所作的工作就是根据解析用户定义的表单配置（JSON格式），把字段、字段类型、校验规则、正则规则、是否必须等等属性全部解析出来保存好，作为后续校验用户提交数据的依据。
2. 前端开发应该知道的几个CSS网页表单布局技巧
1、绝对定位
在绝大过程中，想确定一个元素在网站当中的固定位置，绝对定位是实现这个方式的解决办法。在网页当中，绝对定位可精确的控制元素在网页当中的位置，我们可使用顶部、底部、左侧和右侧，附上一个像素值来控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS设置一个元素的位置从浏览器的顶部和右边保持50px。你也可以在div内使用绝对定位。
2、覆盖所有样式
写CSS的时候都应该知道，当你想给一个元素添加一个新的CSS样式，但这个样式之前已经被定义过了。此时我们可以采用！important来定义。
例如，如果我想在我的网站的特定部分的H3标题是红色而不是黄色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情况，一般会分成文本居中和DIV的内容居中。
文本居中
文本居中使用text-align：center; 。如果想让文本在左右两侧，可以使用左侧或右侧。
DIV内容
DIV内容居中跟文本居中不一样。CSS可以这样定义：
#div1 { display: block; margin: auto; width: anything under 100% }
把宽度设置为“100％以下”的原因是因为如果它是100％宽度，那么如果是全宽度，并且不需要居中。最好有一个固定的宽度，如60％或550像素等。
4、垂直对齐（对于一行文本）
要使菜单的高度和文本的行高一致，可以这么设置：
.nav li{line-height:50px; height:50px;}
5、悬停效果
这适用于按钮，文本链接，网站的部分，图标等等。如果你想做一个悬停效果，可以试试：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
这个功能可以让你的h2标签的颜色从黑色变成黄色。
6、悬停效果过渡
对于悬停效果，如使用菜单或网站上的图像，我们肯定不希望颜色快速贴近结果，所以我们可以通过使用时间变化来达到过渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
这就使得样式上的改变，可以是从黑色变黄色的过渡时间是0.5秒，而不是立即变成黄色。这使得悬停效果更加和谐而不会显得太突兀。
7、a标签的状态
我们在遇到a标签的时候，一定要给a标签做样式定义，否则特别容易造成用户在使用上的困惑。通过样式可以让用户知道这个链接是否被点击过，更利于用户体验。
a:link {color: blue; } a:visited {color: red; }
8、轻松调整图像大小以适应
说到这个样式，我之前不知道可以通过以下方式达到图片的自适应效果。作为一个新手，我相信这个效果肯定有很多人都想做，当然，我提供的方法也只是其中的一种：
img {max-width:100%;height:auto;}
这个样式意味着最大的图像可能是100％，并根据图像宽度自动计算高度。在某些情况下，您可能还必须指定宽度为100％。
9、父级元素和子元素
如果ni不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器：
h1 > strong {color:red;}
特殊情况下你可能会想定义第N个子元素的样式，这样就可以用到下面这个样式：li:nth-child(n)
具体的使用方法可以去w3school上看。
10、将CSS应用于多个类或选择器
如果你想要在所有图片，博客部分和侧边栏上添加相同的边框。你不必写出相同的CSS样式重复3次。只需列出这些项目，用逗号分隔：
.blog,img,.sidebar {border: 1px solid #000;}
3. 组件分享之前端组件——用于自定义表单的前端组件form-create
近期正在探索前端碧明、后端、系统端各类常用组件与工具，对其一些常见悔宴告的组件进行再祥穗次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
本次分享一款用于自定义表单的前端组件 form-create ，它可以通过JSON生成动态呈现、数据收集、验证和提交功能。支持3个UI框架，并支持生成任何Vue组件。内置20种常用表单组件和自定义组件，无论多么复杂的表单都可以轻松处理。
根据自己使用的 UI 安装对应的版本
iview
view-design
element-ui
ant-design-vue
iview
element-ui
ant-design-vue
NodeJs:
iview
element-ui
ant-design-vue
更多内容可以参考其官方的 REAMDE
4. 背景： 前端表单页面，在一个input输入框需要输入多个url。 问题： 之前我想用分号进行分隔，然后在js中
最好的解决办法就是采用多个输入框。
理论上说，不管你输入的分隔符是什么，URL中都可以含有、
5. HTML5 表单多条件验证问题
1.输入型控件
Input type
用途
说明
email
电子邮件地址文本框
url
网页URL文本框
number
数值的输入域
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
range
特定值的范围的数值，以滑动条显示
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
Date pickers
日期，时间选择器
仅Opera9+支持，包含date, month, week, time, datetime, datetime-local
search
用于搜索引擎，比如在站点顶部显示的搜索框
与普通文本框用法一样，只不过这样更语文化
color
颜色选择器
仅Opera支持
将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
如：
<p><label for="runnername">Runner:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" />
</p>
Runner:
2.2 autocomplete
其实在IE6中,autocomplete就已经实现，不过现在这一特性终于标准化了，浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用一保护用户敏感数据，避免本地浏览器对它们进行不安全的存储。
类型
作用
on
该字段无需保护，值可以被保存和恢复
off
该字段需要保护，值不可以保存
unspecified
包含<form>的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on
如：
<form action="" method="get" autocomplete="on">
Name:<input type="text" name="name" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。
2.3 autofocus
页面载入时，我们通过autofocus指定某个表单元素获得焦点，但每个页面只允许出现一个autofocus，如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下，使用使用autofocus会惹恼用户。
2.5 list特性和datalist
通过使用list，开发人员能够为某个输入型控件构造一个选值列表，其使用方法：
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Webpage:
请在Opera9+或Firefox10+浏览器中查看。
2.6 required
required 属性规定必须在提交之前填写输入域（不能为空）。它是表单验证最简单的一种方式方法，使用方法：
Name: <input type="text" name="usr_name" required="required" />
2.7 pattern
pattern 属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。使用方法：
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
2.8 novalidate
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
如：
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
3. 表单验证
表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化，让web应用更快的抛出错误，但它仍不能取代服务器端的验证，重要数据还要要依赖于服务器端的验证，因为前端验证是可以绕过的。
目前任何表单元素都有八种可能的验证约束条件：
名称
用途
用法
valueMissing
确保控件中的值已填写
将required属性设为true，
<input type="text"required="required"/>
typeMismatch
确保控件值与预期类型相匹配
<input type="email"/>
patternMismatch
根据pattern的正则表达式判断输入是否为合法格式
<input type="text" pattern="[0-9]{12}"/>
toolong
避免输入过多字符
设置maxLength，<textarea id="notes" name="notes" maxLength="100"></textarea>
rangeUnderflow
限制数值控件的最小值
设置min，<input type="number" min="0" value="20"/>
rangeOverflow
限制数值控件的最大值
设置max，<input type="number" max="100" value="20"/>
stepMismatch
确保输入值符合min,max,step的设置
设置max min step，<input type="number" min="0" max="100" step="10" value="20"/>
customError
处理应用代码明确设置能计算产生错误
例如验证两次输入的密码是否一致，等会DEMO细说
下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看：
源代码：
<form name="register1" id="register1">
<p><label for="runnername">RunnerName:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>
</p>
<p><label for="phone">Tel #:</label>
<input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"
placeholder="xxx-xxxx-xxxx"/></p>
<p><label for="emailaddress">E-mail:</label>
<input id="emailaddress" name="emailaddress" type="email"
placeholder="For confirmation only"/></p>
<p><label for="dob">DOB:</label>
<input id="dob" name="dob" type="date"
placeholder="MM/DD/YYYY"/></p>
<p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
<p><label for="style">Shirt style:</label>
<input id="style" name="style" type="text" list="stylelist" title="Years of participation"
autocomplete="off"/></p>
<datalist id="stylelist">
<option value="White" label="1st Year"/>
<option value="Gray" label="2nd - 4th Year"/>
<option value="Navy" label="Veteran (5+ Years)"/>
</datalist>
<fieldset>
<legend>Expectations:</legend>
<p>
<label for="confidence">Confidence:</label>
<input id="confidence" name="level" type="range"
onchange="setConfidence(this.value)"
min="0" max="100" step="5" value="0"/>
<span id="confidenceDisplay">0%</span></p>
<p><label for="notes">Notes:</label>
<textarea id="notes" name="notes" maxLength="100"></textarea></p>
</fieldset>
<p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
</form>