vant的表单的label如何渲染html

vant的表单的label渲染html字段是可调用的，在模板中调用后会渲染成 HTML。假设视图函数通过 form 参数把 一个 NameForm 实例传入模板，在模板中可以生成一个简单的 HTML 表单，如下所示：

<form method="POST">

{{ form.hidden_tag() }}

{{ form.name.label }} {{ form.name() }}

{{ form.submit() }}

</form>

注意，除了 name 和 submit 字段，这个表单还有个 form.hidden_tag() 元素。这个元素生成 一个隐藏的字段，供 Flask-WTF 的 CSRF 防护机制使用。

当然，这种方式渲染出的表单还很简陋。调用字段时传入的任何关键字参数都将转换成字 段的 HTML 属性。例如，可以为字段指定 id 或 class 属性，然后为其定义 CSS 样式：

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。

官方地址： vant UI 组件库

将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

工具 ->构建 npm

效果：

内置样式：https://vant-contrib.gitee.io/vant-weapp/#/common

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。

在Vant中，表单验证有两种策略

1：直接用ui组件中form验证（比较麻烦）

2：收集到数据之后，自行验证（原理：利用field自带的属性）

第一步：给vant-field 添加error-message属性

第二步：准备数据

需要实时校验效果，给vant-field注册input事件，调用封装的方法即可

在点击登录（或者其他表单验证的场景中），可以先声明一个变量用来接收validate()的返回值，如果返回值是true，即发送请求，如果返回值是false，即表单填写不完整，不发送请求

/正则表达式/.test(this.mobile) 此语法是使用正则表达式判定该值是否满足条件

---