フォーム送信は非常に一般的な機能です. この記事は uniapp+uview2.0を ベースにフォームの共通属性検証処理を実装しています. 使用するコンポーネントは u-form と Form-item. 基本的な手順は以下のとおりです.
このコンポーネントは一般的にフォーム検証に使用されます. 各フォームフィールドは u-form-item で構成されており, u-input, u-checkbox, u-radio, u-switch などをフォームフィールドに配置することができます.
フォーム グループでは、モデル パラメーターを介してオブジェクトがバインドされ、このオブジェクトのプロパティは、各 u-form-item 内のコンポーネントの対応する変数です。
フォーム検証とバインド フォーム ルールには ref 操作が必要なため、フォーム コンポーネントの ref="form1" 属性を宣言する必要があります。
u-from-item に含まれる入力や無線などのその他のコンポーネントについては、それぞれのコンポーネントの関連ドキュメントを参照してください。
uフォームアイテム
このコンポーネントは一般に Form コンポーネントと一緒に使用する必要があります, または Input やその他のコンポーネントと一緒に単独で使用することもできます. このコンポーネントには多くのパラメータがあるため, ここではパラメータの簡単な紹介のみを行います. 残りについては, を参照してください.下部の API の説明:
prop is the attribute field in the model passed into the Form component. フォームの検証が必要な場合、この属性は必須です。
labelPosition は、左と上にある左の「ラベル」の配置を構成できます。
borderBottom フォーム フィールドの下線を表示するかどうか入力コンポーネントに境界線が設定されている場合、このプロパティを false に設定して、デフォルトの下線を非表示にすることができます。
フォーム フィールドに左右のアイコンまたは小さな画像を設定する場合は、 leftIcon および rightIcon パラメータを使用して実現できます。
以下は、基本的な使用方法を紹介する簡単なデモです. これで、基本的なユーザー ニックネーム、アバター、誕生日、およびプロファイル情報を含むユーザー情報フォーム情報が表示されます. 次に、各フィールドを確認する必要があります. [送信] をクリックしたときの例外プロンプト情報は次のとおりです。
コードの内容:
<template>
<view>
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
<u-form-item label="昵称" prop="userInfo.userName" borderBottom ref="item1">
<u--input v-model="model1.userInfo.userName" border="none"></u--input>
</u-form-item>
<u-form-item label="头像" prop="userInfo.userImg" borderBottom ref="item1">
<u-avatar :src="model1.userInfo.userImg" shape="circle" v-model="model1.userInfo.userImg"
@click="chooseTheImg()"></u-avatar>
</u-form-item>
<u-form-item label="性别" prop="userInfo.gender" borderBottom @click="showGender = true; hideKeyboard()"
ref="item1">
<u--input v-model="model1.userInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="生日" prop="userInfo.birthday" borderBottom @click="showBirthday = true; hideKeyboard()"
ref="item1">
<u--input v-model="model1.userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="简介" prop="userInfo.intro" borderBottom ref="item3">
<u--textarea placeholder="不低于3个字" v-model="model1.userInfo.intro" count></u--textarea>
</u-form-item>
</u--form>
<u-button @click="submit">提交</u-button>
<u-action-sheet :show="showGender" :actions="actions" title="请选择性别" description="如果选择保密会报错"
@close="showGender = false;genderClose()" @select="genderSelect()">
</u-action-sheet>
<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
</view>
</template>
<script>
export default {
data() {
return {
showGender: false, // 是否显示性别选择
showBirthday: false, // 是否展示生日选择
model1: {
userInfo: {
userName: 'uView UI',
gender: '',
userImg: '/static/logo.png',
birthday: '',
intro: '',
}
},
actions: [{
name: '男',
},
{
name: '女',
},
{
name: '保密',
}
],
rules: {
'userInfo.userName': {
type: 'string',
required: true,
message: '请填写昵称',
trigger: ['blur', 'change']
},
'userInfo.gender': {
type: 'string',
max: 1,
required: true,
message: '请选择男或女',
trigger: ['blur', 'change']
},
'userInfo.userImg': {
type: 'string',
required: true,
message: '请上传头像',
trigger: ['blur', 'change']
},
'userInfo.birthday': {
type: 'string',
required: true,
message: '请选择生日',
trigger: ['change']
},
'userInfo.intro': {
type: 'string',
required: true,
message: '请填写简介',
trigger: ['change']
}
},
radio: '',
switchVal: false
};
},
methods: {
// 隐藏键盘
hideKeyboard() {
uni.hideKeyboard()
},
//选择图片
chooseTheImg() {
uni.chooseImage({
count: 1, //图片可选择数量
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera', '海报图库'], //album 从相册选图，camera 使用相机，默认二者都有。
success: res => {
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
console.log('本地地址', imgFiles)
this.uploadTheImg(imgFiles)
}
})
},
//上传图片
uploadTheImg(imgFiles) {
uni.uploadFile({
url: `XXXXXX`, //后端用于处理图片并返回图片地址的接口
header: {
"Content-Type": "multipart/form-data", // formdata提交格式
},
filePath: imgFiles[0],
name: 'uploadfile', // 默认
formData: {
// 其他的formdata参数
fileType: '2',
uid: '10001',
fileContainerName: 'default'
},
success: res => {
let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式，打印data如下图
if (data.code == 200) {
console.log(data.msg) //图片地址
}
},
fail: () => {
}
})
},
// 显示性别列表并校验性别是否为那女
genderSelect(e) {
this.model1.userInfo.gender = e.name
this.$refs.form1.validateField('userInfo.gender')
// 校验头像是否上传
// this.$refs.form1.validateField('userInfo.userImg')
},
// 性别选择关闭,校验是否选择性别
genderClose() {
this.$refs.form1.validateField('userInfo.gender')
},
// 生日选择关闭时校验生日格式以及是否为空
birthdayConfirm(e) {
this.showBirthday = false
this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
this.$refs.form1.validateField('userInfo.birthday')
},
// 生日列表关闭时校验是否为空
birthdayClose() {
this.showBirthday = false
this.$refs.form1.validateField('userInfo.birthday')
},
submit() {
this.$refs.form1.validate().then(res => {
console.log("提交表单信息:" + JSON.stringify(this.model1.userInfo))
// uni.$u.toast('校验通过')
// 调用服务端入表接口
}).catch(errors => {
console.log("失败信息:" + JSON.stringify(errors))
// uni.$u.toast('校验失败')
})
}
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.form1.setRules(this.rules)
}
};
</script>
<style lang="scss">
</style>
ルールの説明:
検証ルールはu--form、コンポーネントからルール名を指定する必要があります。ここではrules、data属性のルールを使用して、フォームの各属性の検証内容を次のように定義します。
trigger{String | Array}: 検証をトリガーする方法は 2 つあります。
change: フィールドの値が変化したときにチェックする blur: 入力ボックスがフォーカスを失ったときにトリガーする 両方のメソッドを同時にリッスンする場合は、配列の形式で記述する必要があります: ['change', 'blur']
型{String}
これらのルールなどの組み込み検証ルール 要件を満たすことができない場合は、通常のマッチングを使用するか、uView 独自の検証ルールと組み合わせたバリデータ カスタム メソッドを使用できます。string: 文字列型でなければならない、デフォルト型 number: 数値型でなければならない boolean: ブール型でなければならない
method: 関数型でなければならない regexp:
正規表現型でなければならない、ここでいう規則性とはフィールドの内容が正規表現かどうかを判断することを指す、このルールを使用してフィールド値を一致
させる代わりに
date: 日付である必要があります url の種類: url である必要があります hex の種類: 16 進の種類のメールである必要があります
種類の種類が必要です any: 任意の種類が
必要です ブール値 (必須かどうか)、このパラメーターを構成すると、左側に必要なアスタリスクが表示されません必要に応じて、入力ボックスの u-form-item の必要な値を true に設定してください。注: swiper タグでアスタリスクを表示する場合は、swiper-item の最初のルート ノードに一定のマージンを与える必要があります。スタイルpattern では、このパラメーターの値が /\d+/ のような正規表現である必要があります。"/\d+/" のように引用符を付けない場合、コンポーネントはフィールドに対して通常の判断を行い、結果を返します。
min 最小値。フィールド タイプが文字列または配列の場合、文字列の長さと配列の長さ (length) が min と比較されます。フィールドが値の場合、直接 min と比較されます。 .
max 最大値です。ルールは min パラメータと同じです。
len は長さを指定し、ルールは min と同じで、優先度は min と max よりも高くなります。
type: 'enum' で使用される、enum{Array} で指定された値
whitespace{Boolean} フィールド値の内容がすべてスペースの場合、required: true チェックをデフォルトで渡すことはできません. 許可する場合は、このパラメーターを true に設定する必要がありますtransform{関数}, 検証前の値を変換. 関数のパラメータは現在の値であり, 戻り値は変更された値です. パラメータは次のとおりです:
value: 現在の検証フィールドの値 message 検証が失敗したときのプロンプト メッセージ
validator{Function}: カスタム同期検証関数。パラメーターは次のとおりです。
rule: rules の現在の検証フィールドに対応する検証ルール value: 現在の検証フィールドの値
callback: 検証が完了したときのコールバック。通常、コールバックを実行する必要はなく、true (検証に合格) または false (検証) を返します。 failed ) to
asyncValidator{Function}: カスタム非同期検証関数。パラメーターは次のとおりです。rule: rules の現在の検証フィールドに対応する検証ルール value: 現在の検証フィールドの値
callback: 非同期操作 (バックエンドからのデータ検証の要求など) の実行後、検証が完了したときのコールバック。失敗した場合、Callback(new
Error('prompt error message')) が必要です。検証に合格した場合は、callback() を実行するだけです
this.$refs.form1.validateField('userInfo.gender')フォームフィールドの検証処理に使用
this.$refs.form1.validate()フォーム送信時の各フィールドの検証処理に使用
補足：
fromフォームの入力と左のラベルの距離が離れすぎて対応できない問題: 直接変更するだけです; またu-form-item、境界線を追加する場合は、customStyle 属性を使用して例を追加できます:label-widthu-input
<u-input placeholder="请输入密码" customStyle="border: 5rpx solid #36373d;border-radius: 20rpx;"></u-input>
以上がuview2.0を使ったフォーム送信の検証実装スキームです. 役に立ったと感じたらコメント欄にいいねやブックマークをお願いします!