유니앱 제로 기반 개발 연구 노트(7) - 폼 컴포넌트를 활용한 실습
공식 홈페이지의 튜토리얼을 따라하며 다양한 폼 컴포넌트의 사용법을 연습하고 폼 제작을 완성해 보세요.
1. 폼 컴포넌트의 구성
로그인/등록/제출 정보 생성 및 기타 기능을 생성하기 위해 다양한 폼 컴포넌트를 사용할 수 있는데 아직 서버 공간도 구매하지 않았고 유니클라우드도 배우지 않았기 때문에 먼저 폼만 제출하면 됩니다.
2. 양식 구성 요소를 사용하여 양식 작성
위의 모든 양식 구성 요소를 사용하여 학생 등록 정보 양식을 디자인하면 다음과 같은 효과가 있습니다.
먼저 양식을 생성하고 기본 @submit, @reset 두 가지 이벤트를 만듭니다.
<form @submit="formSubmit" @reset="formReset">
</form>
1. 입력 구성 요소
속성 이름은 변수 이름을 식별하는 데 사용되며 수신된 값은 입력 텍스트, 자리 표시자는 프롬프트 문자입니다.
참고: 고려사항 양식을 제출할 때 사용자 이름, 비밀번호, 전화번호, 이메일 등 입력 형식 문자를 확인해야 합니다. hello uni-app의
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>
스크립트 제출 이벤트에 형식 검사 추가
규칙 배열에는 여러 검사 유형이 있습니다:
name: "username", checkType : "string", checkRule: "3,10" -》사용자 이름 길이 3-10 확인
name: "password2", checkType: "same", checkRule: "password1" -》 비밀번호 확인2 =password1
다른 규칙 checkType은 다음과 같습니다:
"int"는 정수여야 합니다.
"between" between; "betweenD" ;두 숫자 사이; "betweenF"는 두 부동 소수점 숫자 사이;
"same"은 동일해야 하며 "notsame"은 달라야 합니다.
"phoneno" 전화 형식; "email" 메일 형식; "zipcode" 우편번호 형식;
"reg" checkRule의 문자열 형식에 따라 확인;
"in" 반환 값에 검사 규칙 문자가 포함되어 있습니다.
"notnull" 반환 값이 비어 있지 않습니다.
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('清空数据')
}
반환 데이터 제출
{"username":"werew","password1":"123456","password2":"123456","cellphone":"1321321321", "email": "[email protected]", "gender": "남성", "loves": ["reading", "writing"], "age": 20, "switch": true, "citypicker": 1. "studyhistory": "xx unser"
2. 입력 구성 요소
속성 name="gender"는 선택된 값을 수신하는 데 사용되며, 반환된 값은 일반적으로 인덱스입니다
<!-- 学习使用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. 체크박스 그룹 구성요소
속성 이름="loves"는 선택한 값을 받는 데 사용됩니다.
<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组件 -->
<view class="uni-form-item uni-column">
<slider value="20" name="age" show-value></slider>
</view>
<!-- 学习使用slider组件完成 -->
5. 스위치 구성 요소
<!-- 学习使用switch组件 -->
<view class="title">是否参加兴趣班</view>
<view class="uni-form-item uni-column">
<view><switch name="switch" /></view>
</view>
<!-- 学习使用switch组件完成 -->
6. 피커 일반 선택기/날짜 선택기/이벤트 선택기
<!-- 学习使用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时间选择器组件完成 -->
도시 선택기는 도시 배열을 정의해야 합니다
날짜와 시간은 날짜 및 시간 변수를 도입하고 연도, 월, 일을 가져오는 함수를 정의해야 합니다.
따라서 스크립트에 정의를 추가하세요
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 텍스트 입력 영역
textarea는 여러 줄의 텍스트를 입력할 수 있는 일반 텍스트 입력 영역입니다.
<!-- 学习使用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组件 -->
<view class="title">获奖情况
<button type="warn" @tap="undo">撤销</button>
</view>
<view>
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
</view>
<!-- 学习使用editor组件完成 -->
스크립트에 응답 이벤트 추가
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.버튼 버튼 제출 및 재설정
버튼 속성
유형에는 파란색이 있는 "기본"과 색상이 없는 "기본"이 있습니다 " ;warn'은 빨간색'
크기에는 기본 크기인 mini와 small이 있습니다. 여러 개를 한 줄에 입력할 수 있습니다.
open-type 유효한 값이 많이 있습니다. 플랫폼 유형에 따라 초점이 필요합니다. 지침 보기
버튼에는 다른 많은 속성이 있으며, 이는 더 중요한 컨트롤이며 문서와 함께 사용해야 합니다.
<view class="uni-btn-v">
<button type= "primary" form-type="submit">注册</button>
<button type="default" form-type="reset">重置</button>
</view>