Uniappゼロベース開発学習記(7) - フォームコンポーネントの使い方を実践する
公式Webサイトのチュートリアルに従って、さまざまなフォームコンポーネントの使い方を練習し、フォームの作成を完了します。
1. フォームコンポーネントの構成
ログイン/登録/送信情報の生成などにさまざまなフォームコンポーネントを使用できますが、サーバースペースを購入しておらず、uni-cloudをまだ学習していないので、最初にフォームを送信するだけです。
2. フォームコンポーネントを使用してフォームを構築する
上記のすべてのフォーム コンポーネントを使用して学生登録情報のフォームを設計すると、次のような効果が得られます。
まずフォームを作成します。デフォルトの @submit、@reset の 2 つのイベント
<form @submit="formSubmit" @reset="formReset">
</form>
1. 入力コンポーネント
属性名は変数名を識別するために使用され、受け取った値は入力テキスト、プレースホルダーはプロンプト文字です。
注: フォームを送信するときは、ユーザー名、パスワード、電話番号、電子メールなどの入力形式の文字を確認する必要があります。hello uni-app の
を導入できます。グレースチェッカー.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>
スクリプトの送信イベントに形式チェックを追加します
ルール配列には複数のチェック タイプがあります:
名前: "username"、checkType : "string", checkRule: "3,10" -》 ユーザー名の長さ 3 ～ 10 を確認します
name: "password2", checkType: "same", checkRule: "password1" -》 パスワード 2 を確認します=password1
他のルール checkType は次のとおりです:
"int" は整数である必要があります
"between" between; "betweenD" ;2 つの数値の間;「betweenF」2 つの浮動小数点数の間;
「同じ」は同じでなければなりません; 「同じではありません」は異なっていなければなりません;
"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 protected]"、"性別": "男性"、"好き": ["読む"、"書く"]、"年齢": 20、"スイッチ": 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. checkbox-group コンポーネント
属性 name="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.button ボタンの送信とリセット
ボタンのプロパティには
タイプに青の「primary」と色のない「default」が含まれています。 ;警告「は赤です」
サイズには、デフォルト サイズのミニとスモール サイズがあります。1 行に複数を入力できます。
オープンタイプ 有効な値は多数あります。プラットフォームの種類に応じて、フォーカスが必要です。 説明を見る
ボタンには他にも多くの属性がありますが、これらはより重要なコントロールであり、ドキュメントと組み合わせて使用する必要があります。
<view class="uni-btn-v">
<button type= "primary" form-type="submit">注册</button>
<button type="default" form-type="reset">重置</button>
</view>