微信小程序设置表单界面

问题

表单在小程序中非常常见，几乎每一个小程序都会有表单的界面。一些登录界面，身份验证界面，都是由表单来填写信息的。表单的内容有很多，提示性的输入框，手机号码短信验证的输入框以及错误提示输入框等。那么应该如何来设置一个完整的表单界面呢？

方法

不同的输入框类型构成了一个完整的表单，需要对不同的输入框进行设置。在json中对相关组件的引入，wxml中进行API的参数配置。 

1.在json中调用van-field组件。

代码示例：

"usingComponents": {     "van-field": "/dist/field/index" }

2.在wxml调用表单组件并对API参数的配置。

Value为当前输入的值，required设置表单必填星号，clearable设置是否启用清除控件，label输入框左侧的文本，placeholder输入框为空时的占位符，error将输入内容标红，border是否显示内边框。

代码示例：

<van-cell-group>   <van-field     value="{{ number }}"     required     clearable     label="学号"     icon="question-o"     placeholder="请输入学号"     bind:click-icon="onClickIcon"   /> </van-cell-group> <van-cell-group>   <van-field     value="{{ username }}"     label="用户名"     placeholder="请输入用户名"     error   />   <van-field     value="{{ phone }}"     label="手机号"     placeholder="请输入手机号"     error-message="手机号格式错误"     border="{{ false }}"   /> </van-cell-group> <van-cell-group>   <van-field     value="{{ sms }}"     center     clearable     label="短信验证码"     placeholder="请输入短信验证码"     border="{{ false }}"     use-button-slot   >     <button slot="button" size="mini" type="primary">发送验证码</button>   </van-field> </van-cell-group>

 

图 1 效果图

结语

设置表单的时候一定要根据不同的要求对API的参数进行配置。一个简单的输入框仅仅需要一个field标签就够了，但常见的输入框都是五花八门的，这些样式都是由表单的配置参数来设置的，这样就需要掌握熟悉这些参数的性质。