Uniapp zero-based development study notes (7) - Practice using form components
Follow the tutorials on the official website, practice the use of various form components, and complete the production of a form.
1. Composition of form components
Various form components can be used to generate login/registration/submit information and other functions. Since I haven’t bought server space yet and haven’t learned uni-cloud yet, I just need to submit the form first.
2. Build a form using form components
Using all the above form components to design a form for student registration information, the effect is as follows:
First create the form, default @submit, @reset two events
<form @submit="formSubmit" @reset="formReset">
</form>
1. input component
The attribute name is used to identify the variable name, the received value is the input text, and the placeholder is the prompt character
Note: Consider When submitting the form, you need to verify the input format characters, such as user name, password, phone number, email, etc. You can introduce hello uni-app's
grace-checker.js
<view class="uni-input-wrapper">
用户名
<input class="uni-input" name="username" placeholder="请输入用户名" />
密码
<input class="uni-input" name="password1"
password type="text" placeholder="请输入密码" />
请再次输入密码
<input class="uni-input" name="password2"
password type="text" placeholder="请输入密码" />
手机号码
<input class="uni-input" name="cellphone" placeholder="请输入手机号" />
邮箱地址
<input class="uni-input" name="email" placeholder="请输入邮箱地址" />
</view>
Add format check in the submit event of the script
There are multiple check types in the rule array:
name: "username", checkType: "string", checkRule: "3,10" -》Verify username length 3-10
name: "password2", checkType: "same", checkRule: "password1" -》 Verify password2=password1
Other rules checkType are:
"int" must be an integer
"between" between; "betweenD"between two numbers; "betweenF"between two floating point numbers;
"same" must be the same; "notsame" must be different;< /span> "notnull"The return value is not empty; "in"The return value contains checkrule characters; "reg"Check according to the string format of checkRule;
"phoneno"Telephone format; "email"Mail format; "zipcode"Zip code format;
import graceChecker from "../../common/graceChecker.js"
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
//定义表单规则
var rule = [
{name:"username", checkType : "string", checkRule:"3,10", errorMsg:"用户名应为3-10个字符"},
{name:"password1",checkType : "string", checkRule:"6,10", errorMsg:"密码应为6-10个字符"},
{name:"password2",checkType : "same", checkRule:e.detail.value["password1"], errorMsg:"两次输入密码不同!"},
{name:"cellphone",checkType : "phoneno", errorMsg:"手机号格式不符合要求"},
{name:"email",checkType : "email", errorMsg:"邮箱格式不符合要求"}
];
//进行表单检查
var formData = e.detail.value;
var checkRes = graceChecker.check(formData, rule);
if(checkRes){
uni.showToast({title:"验证通过!", icon:"none"});
}else{
uni.showToast({ title: graceChecker.error, icon: "none" });
}
},
formReset: function(e) {
console.log('清空数据')
}
submit returns data
{"username":"werew","password1":"123456","password2":"123456","cellphone":"1321321321", "email": "[email protected]", "gender": "male", "loves": ["reading", "writing"], "age": 20, "switch": true, "citypicker": 1. "studyhistory": "xx unser"
2. input component
The attribute name="gender" is used to receive the selected value, and the returned value is usually index
<!-- 学习使用radio-group组件 -->
<view class="title">性别</view>
<radio-group name="gender">
<label>
<radio value="男" checked/><text>男</text>
</label>
<label>
<radio value="女" /><text>女</text>
</label>
</radio-group>
<!-- 学习使用radio-group组件完成 -->
3. checkbox-group component
The attribute name="loves" is used to receive the selected value
<view class="title">爱好</view>
<!-- 学习使用checkbox-group组件 -->
<view class="uni-form-item uni-column">
<checkbox-group name="loves">
<label><checkbox value="读书" /><text>读书</text></label>
<label><checkbox value="写字" /><text>写字</text></label>
<label><checkbox value="音乐" /><text>音乐</text></label>
<label><checkbox value="篮球" /><text>篮球</text></label>
</checkbox-group>
</view>
<!-- 学习使用checkbox-group组件完成 -->
4. slider component
<!-- 学习使用slider组件 -->
<view class="uni-form-item uni-column">
<slider value="20" name="age" show-value></slider>
</view>
<!-- 学习使用slider组件完成 -->
5. switch component
<!-- 学习使用switch组件 -->
<view class="title">是否参加兴趣班</view>
<view class="uni-form-item uni-column">
<view><switch name="switch" /></view>
</view>
<!-- 学习使用switch组件完成 -->
6. picker normal selector/date selector/event selector
<!-- 学习使用picker普通选择器组件 -->
<view class="title">城市</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker name="citypicker" @change="bindPickerChange" :value="index"
:range="city" range-key="name">
<view class="uni-input">{
{city[index].name}}</view>
</picker>
</view>
</view>
</view>
<!-- 学习使用picker普通选择器组件完成 -->
<!-- 学习使用picker日期选择器组件 -->
<view class="title">上学报到</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">日期</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{
{date}}</view>
</picker>
</view>
</view>
</view>
<!-- 学习使用picker日期选择器组件完成 -->
<!-- 学习使用picker时间选择器组件 -->
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">时间</view>
<view class="uni-list-cell-db">
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{
{time}}</view>
</picker>
</view>
</view>
</view>
<!-- 学习使用picker时间选择器组件完成 -->
The city picker needs to define a city array
The date and time need to introduce date and time variables, and define a function to get the year, month and day
Therefore in the script Add definition
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 10;
} else if (type === 'end') {
year = year + 10;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
export default {
data() {
return {
city:[{name:'武汉'},{name: '合肥'}, {name:'长沙'}, {name:'南昌'}],
index: 0,
date: getDate({
format: true
}),
startDate:getDate('start'),
endDate:getDate('end'),
time: '12:01',
placeholder: '开始输入...'
}
},
onLoad() {
},
methods: {
//城市选择器picker结果改变时，索引也改变
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.index = e.detail.value
},
//date变量获取picker的结果
bindDateChange: function(e) {
this.date = e.detail.value
},
//time变量获取picker的结果
bindTimeChange: function(e) {
this.time = e.detail.value
}
}
7. textarea text input area
textarea is a normal text input area that can input multiple lines of text
<!-- 学习使用textarea组件 -->
<view class="title">学习经历</view>
<view>
<view class="uni-textarea"><textarea @blur="bindTextAreaBlur" auto-height />
</view>
<view class="uni-textarea">
<textarea name="studyhistory" placeholder-style="color:#F76260" placeholder="请输入学习经历"/>
</view>
</view>
<!-- 学习使用textarea组件完成 -->
8. editor text editing area
editor is similar to the text input area, but can be undo
<!-- 学习使用editor组件 -->
<view class="title">获奖情况
<button type="warn" @tap="undo">撤销</button>
</view>
<view>
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
</view>
<!-- 学习使用editor组件完成 -->
Add response events to the script
onEditorReady() {
// #ifdef MP-BAIDU
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
// #endif
// #ifdef APP-PLUS || H5 ||MP-WEIXIN
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context
}).exec()
// #endif
},
undo() {
this.editorCtx.undo()
},
9.button button submission and reset
In the properties of button
type has "primary" with blue and "default" with no color "warn"is red'
size has the default size mini and small size. You can put several in one line.
open-type There are many valid values according to the platform type, so focus is needed. View instructions
There are many other attributes of buttons, which are more important controls and need to be used in conjunction with the documentation.
<view class="uni-btn-v">
<button type= "primary" form-type="submit">注册</button>
<button type="default" form-type="reset">重置</button>
</view>