uniapp表單校驗(yàn)超詳細(xì)講解
uni-forms表單校驗(yàn)
1、uni-forms 需要通過(guò)rules屬性傳入約定的校驗(yàn)規(guī)則。
2、uni-forms 需要綁定model屬性，值為表單的key/value組成的對(duì)象
3、uni-forms-item 需要設(shè)置name 屬性為當(dāng)前字段名，字段為String|Array類(lèi)型
4、只要使用的組件不管內(nèi)置組件還是三方組件，只需綁定v-model，無(wú)需其他操作
5、如果使用原生checkbox或三方組件不支持v-model等，只需要給罪案綁定binddata方法即可出發(fā)表單校驗(yàn)，無(wú)需綁定事件到methods中
6、binddata('name',$event.detail.value,'form')方法接受三個(gè)值，
第一個(gè)參數(shù)傳入當(dāng)前表單組件所在的name，同當(dāng)前父組件uni-forms-item 綁定屬性name的值
第二個(gè)參數(shù)傳入需要校驗(yàn)的值，內(nèi)置 組件可以通過(guò)$event.detail.value 獲取到組件的返回值，自定義組件傳入需要校驗(yàn)的值即可
第三個(gè)參數(shù)傳入uni-forms組件綁定屬性ref的值，通常在多表單的時(shí)候需要傳入，用來(lái)區(qū)分表單，如頁(yè)面中僅有一個(gè)uni-forms可忽略
7、如果內(nèi)置binddata方法無(wú)法滿(mǎn)足需求，在當(dāng)前頁(yè)面的methods中復(fù)寫(xiě)此方法即可，復(fù)寫(xiě)此方法需要調(diào)用uni-forms的setValue來(lái)觸發(fā)表單校驗(yàn)
<template>
<view>
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="請(qǐng)輸入姓名" />
</uni-forms-item>
<uni-forms-item label="郵箱" name="email">
<input class="input" v-model="formData.email" type="text" placeholder="請(qǐng)輸入用戶(hù)名" @input="binddata('email',$event.detail.value)" />
</uni-forms-item>
</uni-forms>
<button @click="submit">Submit</button>
</view>
</template>
<script>
export default {
data() {
return {
// 表單數(shù)據(jù)
formData: {
name: 'LiMing',
email: 'dcloud@email.com'
},
rules: {
// 對(duì)name字段進(jìn)行必填驗(yàn)證
name: {
rules: [{
required: true,
errorMessage: '請(qǐng)輸入姓名',
},
{
minLength: 3,
maxLength: 5,
errorMessage: '姓名長(zhǎng)度在 {minLength} 到 {maxLength} 個(gè)字符',
}
]
},
// 對(duì)email字段進(jìn)行必填驗(yàn)證
email: {
rules: [{
format: 'email',
errorMessage: '請(qǐng)輸入正確的郵箱地址',
}]
}
}
}
},
methods: {
/**
* 復(fù)寫(xiě) binddata 方法，如果只是為了校驗(yàn)，無(wú)復(fù)雜自定義操作，可忽略此方法
* @param {String} name 字段名稱(chēng)
* @param {String} value 表單域的值
*/
// binddata(name,value){
// 通過(guò) input 事件設(shè)置表單指定 name 的值
// this.$refs.form.setValue(name, value)
// },
// 觸發(fā)提交表單
submit() {
this.$refs.form.validate().then(res=>{
console.log('表單數(shù)據(jù)信息：', res);
}).catch(err =>{
console.log('表單錯(cuò)誤信息：', err);
})
}
}
}
</script>校驗(yàn)規(guī)則說(shuō)明
校驗(yàn)規(guī)則接受一個(gè)Object類(lèi)型的值，通過(guò)傳入不同的規(guī)則來(lái)表示每個(gè)表單域的值該如何校驗(yàn)
對(duì)象的key表示當(dāng)前表單域的字段名，value為具體的校驗(yàn)規(guī)則
以下為value所包含的內(nèi)容
屬性名 | 類(lèi)型 | 說(shuō)明 |
rules | Array | 校驗(yàn)規(guī)則，下方rules屬性說(shuō)明 |
validateTrigger | String | 表單校驗(yàn)時(shí)機(jī)【1.4.0】已廢棄 |
label | String | 當(dāng)前表單域的字段中文名，多用于errMessage的顯示，可以不填 |
rules: {
// 對(duì)name字段進(jìn)行必填驗(yàn)證
name: {
// name 字段的校驗(yàn)規(guī)則
rules:[
// 校驗(yàn) name 不能為空
{
required: true,
errorMessage: '請(qǐng)?zhí)顚?xiě)姓名',
},
// 對(duì)name字段進(jìn)行長(zhǎng)度驗(yàn)證
{
minLength: 3,
maxLength: 5,
errorMessage: '{label}長(zhǎng)度在 {minLength} 到 {maxLength} 個(gè)字符',
}
],
// 當(dāng)前表單域的字段中文名，可不填寫(xiě)
label:'姓名',
validateTrigger:'submit'
}
}rules 屬性說(shuō)明
每一個(gè)驗(yàn)證規(guī)則中，可以配置多個(gè)屬性，下面是一些常見(jiàn)規(guī)則屬性
屬性名 | 類(lèi)型 | 默認(rèn)值 | 可選值 | 說(shuō)明 |
required | Boolean | - | - | 是否必填，配置此參數(shù)不會(huì)顯示輸入框左邊的必填星號(hào)，如需要，請(qǐng)配置uni-forms-item組件的的required為true |
range | Array | - | - | 數(shù)組至少要有一個(gè)元素，且數(shù)組內(nèi)的每一個(gè)元素都是唯一的。 |
format | String | - | - | 內(nèi)置校驗(yàn)規(guī)則，如這些規(guī)則無(wú)法滿(mǎn)足需求，可以使用正則匹配或者自定義規(guī)則 |
pattern | RegExp | - | - | 正則表達(dá)式，注意事項(xiàng)見(jiàn)下方說(shuō)明 |
maximum | Number | - | - | 校驗(yàn)最大值(大于) |
minimum | Number | - | - | 校驗(yàn)最小值(小于) |
maxLength | Number | - | - | 校驗(yàn)數(shù)據(jù)最大長(zhǎng)度 |
errorMessage | String | - | - | 校驗(yàn)失敗提示信息語(yǔ)，可添加屬性占位符，當(dāng)前表格內(nèi)屬性都可用作占位符 |
validateFunction | Function | - | - | 自定義校驗(yàn)規(guī)則 |
format屬性值說(shuō)明
屬性名 | 說(shuō)明 |
string | 必須是 string 類(lèi)型，默認(rèn)類(lèi)型 |
number | 必須是 number 類(lèi)型 |
boolean | 必須是 boolean 類(lèi)型 |
array | 必須是 array 類(lèi)型 |
object | 必須是 object 類(lèi)型 |
url | 必須是 url 類(lèi)型 |
必須是 email 類(lèi)型 |
validateFunction 自定義校驗(yàn)規(guī)則使用說(shuō)明
validateFunction 方法返回四個(gè)參數(shù) validateFunction:function(rule,value,data,callback){} ，當(dāng)然返回參數(shù)名開(kāi)發(fā)者可以自定義：
rule : 當(dāng)前校驗(yàn)字段在 rules 中所對(duì)應(yīng)的校驗(yàn)規(guī)則
value : 當(dāng)前校驗(yàn)字段的值
data : 所有校驗(yàn)字段的字段和值的對(duì)象
callback : 校驗(yàn)完成時(shí)的回調(diào)，一般無(wú)需執(zhí)行callback，返回true(校驗(yàn)通過(guò))或者false(校驗(yàn)失敗)即可 ，如果需要顯示不同的 errMessage，如果校驗(yàn)不通過(guò)需要執(zhí)行 callback('提示錯(cuò)誤信息')，如果校驗(yàn)通過(guò)，執(zhí)行callback()即可
<template>
<view>
<uni-forms ref="form" :modelValue="formData">
<uni-forms-item label="興趣愛(ài)好" required name="hobby">
<uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" />
</uni-forms-item>
</uni-forms>
<button class="button" @click="submit">校驗(yàn)表單</button>
</view>
</template>
<script>
export default {
data() {
return {
formData:{
},
rules: {
hobby: {
rules: [{
required: true,
errorMessage: '請(qǐng)選擇興趣',
},{
validateFunction:function(rule,value,data,callback){
if (value.length < 2) {
callback('請(qǐng)至少勾選兩個(gè)興趣愛(ài)好')
}
return true
}
}]
}
}
}
},
onReady() {
// 需要在onReady中設(shè)置規(guī)則
this.$refs.form.setRules(this.rules)
},
methods: {
submit(form) {
this.$refs.form.validate().then(res=>{
console.log('表單數(shù)據(jù)信息：', res);
}).catch(err =>{
console.log('表單錯(cuò)誤信息：', err);
})
}
}
}
</script>validateFunction 異步校驗(yàn)
上面的自定義校驗(yàn)方式為同步校驗(yàn) ，如果需要異步校驗(yàn)，validateFunction 需要返回一個(gè) Promise ，校驗(yàn)不通過(guò) 執(zhí)行 reject(new Error('錯(cuò)誤信息')) 返回對(duì)應(yīng)的錯(cuò)誤信息，如果校驗(yàn)通過(guò)則直接執(zhí)行 resolve() 即可，在異步校驗(yàn)方法中，不需要使用 callback 。
<template>
<view>
<uni-forms :modelValue="formData" ref="form">
<uni-forms-item name="age" label="年齡">
<uni-easyinput v-model="formData.age" type="text" placeholder="請(qǐng)輸入年齡" />
</uni-forms-item>
</uni-forms>
<button class="button" @click="submit">校驗(yàn)表單</button>
</view>
</template>
<script>
export default {
data() {
return {
formData:{
age:''
},
rules: {
age: {
rules: [{
required: true,
errorMessage: '請(qǐng)輸入年齡',
},{
validateFunction: (rule, value, data, callback) => {
// 異步需要返回 Promise 對(duì)象
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value > 10 ) {
// 通過(guò)返回 resolve
resolve()
} else {
// 不通過(guò)返回 reject(new Error('錯(cuò)誤信息'))
reject(new Error('年齡必須大于十歲'))
}
}, 2000)
})
}
}]
}
}
}
},
onReady() {
// 需要在onReady中設(shè)置規(guī)則
this.$refs.form.setRules(this.rules)
},
methods: {
/**
* 表單提交
* @param {Object} event
*/
submit() {
uni.showLoading()
this.$refs.form.validate().then(res => {
uni.hideLoading()
console.log('表單數(shù)據(jù)信息：', res);
}).catch(err => {
uni.hideLoading()
console.log('表單錯(cuò)誤信息：', err);
})
}
}
}
</script>動(dòng)態(tài)表單校驗(yàn)
多用于同一個(gè)字段需要添加多次的場(chǎng)景，如需要?jiǎng)討B(tài)創(chuàng)建多個(gè)域名參與檢驗(yàn)。
- 在 formData 中定義個(gè)變量用來(lái)接受同一個(gè)字段的多個(gè)結(jié)果。
dynamicFormData: { email: '', // domains 字段下會(huì)有多個(gè)結(jié)果 domains: [] } - 使用 uni-forms-item 的 rules 屬性定義單個(gè)表單域的校驗(yàn)規(guī)則。
<uni-forms-item :label="item.label+' '+index" required :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" :key="item.id"> ... </uni-forms-item> - name 需要?jiǎng)討B(tài)指定，動(dòng)態(tài)表單推薦使用 Array 類(lèi)型，內(nèi)容從左到右為綁定值的調(diào)用鏈。['domains',index,'value'] 等同于 dynamicFormData.domains[index].value
<uni-forms-item required :label="item.label+' '+index" :name="['domains',index,'value']" :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" :key="item.id" > ... </uni-forms-item> - 需要綁定值的組件的 v-model 也需要?jiǎng)討B(tài)指定 dynamicFormData.domains[index].value
<uni-forms-item required :label="item.label+' '+index" :name="['domains',index,'value']" :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" :key="item.id" > <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="請(qǐng)輸入域名" /> </uni-forms-item>完整實(shí)例
<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData"> <uni-forms-item label="郵箱" required name="email"> <uni-easyinput v-model="dynamicFormData.email" placeholder="請(qǐng)輸入姓名" /> </uni-forms-item> <template v-for="(item,index) in dynamicFormData.domains"> <uni-forms-item :label="item.label+' '+index" required :rules="[{'required': true,errorMessage: '域名項(xiàng)必填'}]" :key="item.id" :name="['domains',index,'value']"> <view class="form-item"> <uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="請(qǐng)輸入域名" /> <button class="button" size="mini" type="default" @click="del(item.id)">刪除</button> </view> </uni-forms-item> </template> </uni-forms> <view class="button-group"> <button type="primary" size="mini" @click="add">新增域名</button> <button type="primary" size="mini" @click="submit('dynamicForm')">提交</button> </view> <script> export default { data() { return { // 數(shù)據(jù)源 dynamicFormData: { email: '', domains: [] }, // 規(guī)則 dynamicRules: { email: { rules: [{ required: true, errorMessage: '域名不能為空' }, { format: 'email', errorMessage: '域名格式錯(cuò)誤' }] } } } }, methods: { // 新增表單域 add() { this.dynamicFormData.domains.push({ label: '域名', value:'', id: Date.now() }) }, // 刪除表單域 del(id) { let index = this.dynamicLists.findIndex(v => v.id === id) this.dynamicLists.splice(index, 1) }, // 提交 submit(ref) { this.$refs[ref].validate((err,value)=>{ console.log(err,value); }) }, } } </script>表單校驗(yàn)時(shí)機(jī)說(shuō)明
如果需要子表單需要單獨(dú)的校驗(yàn)時(shí)機(jī)，可以使用 uni-forms-item 的 rules 屬性和 onFieldChange 配合
<template> <view> <uni-forms ref="form" :modelValue="formData" validate-trigger="bind"> <uni-forms-item name="age" label="年齡"> <!-- uni-easyinput 的校驗(yàn)時(shí)機(jī)是數(shù)據(jù)發(fā)生變化， 即觸發(fā) input 時(shí) --> <uni-easyinput v-model="formData.age" type="text" placeholder="請(qǐng)輸入年齡" /> </uni-forms-item> <uni-forms-item ref="input" name="email" label="郵箱"> <!-- input 的校驗(yàn)時(shí)機(jī) --> <input v-model="formData.email" @blur="(e)=>$refs.input.onFieldChange($event.detail.value)" /> </uni-forms-item> <button class="button" @click="submit">校驗(yàn)表單</button> </uni-forms> </view> </template>【1.4.0后此規(guī)則已不生效】對(duì)于表單校驗(yàn)時(shí)機(jī)，同時(shí)只會(huì)有一個(gè) validateTrigger 發(fā)生作用，它的作用權(quán)重為
規(guī)則 > uni-forms-item > uni-forms
如果規(guī)則里配置 validateTrigger ，則優(yōu)先使用規(guī)則里的 validateTrigger 屬性來(lái)決定表單校驗(yàn)時(shí)機(jī)
如果規(guī)則里沒(méi)有配置 validateTrigger ，則優(yōu)先使用 uni-forms-item 的 validateTrigger 屬性來(lái)決定表單校驗(yàn)時(shí)機(jī)
如果 uni-forms-item 組件里沒(méi)有配置 validateTrigger ，則優(yōu)先使用 uni-forms 的 validateTrigger 屬性來(lái)決定表單校驗(yàn)時(shí)機(jī)
以此類(lèi)推，如果都沒(méi)有使用 validateTrigger 屬性，則會(huì)使用 uni-forms 的 validateTrigger 屬性默認(rèn)值來(lái)決定表單校驗(yàn)時(shí)機(jī)
API
Forms Props
屬性名
類(lèi)型
默認(rèn)值
可選值
說(shuō)明
兼容說(shuō)明
model
Object
-
-
表單數(shù)據(jù)
1.4.0 新增
rules
Object
-
-
表單校驗(yàn)規(guī)則
validateTrigger
String
submit
bind/submit/blur
表單校驗(yàn)時(shí)機(jī),blur僅在 uni-easyinput 中生效
1.4.0 新增 blur 值
label-position
String
left
top/left
label 位置
label-width
String/Number
75
-
label 寬度，單位 px
label-align
String
left
left/center/right
label 居中方式
err-show-type
String
undertext
undertext/toast/modal
表單錯(cuò)誤信息提示方式
border
Boolean
false
-
是否顯示分格線
value
Object
-
-
表單數(shù)據(jù)，兼容vue2
即將棄用，請(qǐng)使用 model 代替
modelValue
Object
-
-
表單數(shù)據(jù)，兼容vue3
即將棄用，請(qǐng)使用 model 代替
Forms Events
事件稱(chēng)名
說(shuō)明
@validate
任意表單項(xiàng)被校驗(yàn)后觸發(fā)，返回表單校驗(yàn)信息
Forms Methods
方法稱(chēng)名
說(shuō)明
兼容說(shuō)明
setRules
動(dòng)態(tài)設(shè)置表單規(guī)則
validate
對(duì)整個(gè)表單進(jìn)行校驗(yàn)的方法，會(huì)返回一個(gè) promise
validateField
部分表單進(jìn)行校驗(yàn)
clearValidate
移除表單的校驗(yàn)結(jié)果
submit
對(duì)整個(gè)表單進(jìn)行校驗(yàn)的方法，會(huì)返回一個(gè) promise
即將棄用，請(qǐng)使用validate代替
setValue
設(shè)置表單某一項(xiàng) name 的對(duì)應(yīng)值，通常在 uni-forms-item 和自定表單組件中使用
即將棄用，請(qǐng)使用 onFieldChange 兼容相關(guān)功能
resetFields
重置表單, 需要把uni-forms的modelValue屬性改為v-model,且對(duì)內(nèi)置組件可能不生效
1.4.0 已棄用
validate(keepItem:Array,callback:Function) 方法說(shuō)明
validate 方法是對(duì)整個(gè)表單進(jìn)行校驗(yàn)，方法接受兩個(gè)參數(shù)
參數(shù)稱(chēng)名
類(lèi)型
說(shuō)明
keepItem
Array
保留不參與校驗(yàn)的字段
callback
Function
校驗(yàn)完成返回函數(shù)
校驗(yàn)成功后，校驗(yàn)對(duì)象只保留指定了name的字段（只要 uni-forms-item 綁定了 name，哪怕不校驗(yàn)，也會(huì)返回），如果需要保留其他字段，則需要 keepItem 屬性
<template> <view> <uni-forms ref="form" :modelValue="formData"> <uni-forms-item name="age" label="年齡"> <uni-easyinput v-model="formData.age" type="text" placeholder="請(qǐng)輸入年齡" /> </uni-forms-item> <button class="button" @click="submit">校驗(yàn)表單</button> </uni-forms> </view> </template> <script> export default { data() { return { formData:{ age:'' }, rules: { // ... } } }, onLoad(){ this.formData.id = 'testId' }, methods: { submit() { // 在 onLoad 生命周期中，formData添加了一個(gè) id 字段 ，此時(shí)這個(gè)字段是不參數(shù)校驗(yàn)的，所以結(jié)果中不返回 // 在 validate(['id']) 方法中，指定第一個(gè)參數(shù) ，即可返回id字段 this.$refs.form.validate(['id'],(err,formData)=>{ if(!err){ console.log('success',formData) } }) } } } </script>validate 方法還可以返回一個(gè) Promise 對(duì)象，如果使用了 callback 則Promise 返回 null，validate 方法會(huì)優(yōu)先使用 callback。
callback 方法會(huì)返回兩個(gè)返回值 :
第一個(gè)返回值為檢驗(yàn)結(jié)果，如果校驗(yàn)失敗，則返回失敗信息，如果成功，返回 null
第二個(gè)返回值校驗(yàn)數(shù)據(jù)
// 使用 callback // 如果不需要 keepItem 參數(shù) ，則可以省略 this.$refs.form.validate((err,formData)=>{ // 如果校驗(yàn)成功 ，err 返回 null if(!err){ console.log('success',formData) return } console.log('error',err) }).then(res=>{ // res 返回 null }) // 使用 Promise // 對(duì)整個(gè)表單進(jìn)行校驗(yàn)，返回一個(gè) Promise this.$refs.form.validate().then((res)=>{ // 成功返回，res 為表單數(shù)據(jù) // 其他邏輯處理 // ... }).catch((err)=>{ // 表單校驗(yàn)驗(yàn)失敗，err 為具體錯(cuò)誤信息 // 其他邏輯處理 // ... })setValue(name:String,value:any) 方法說(shuō)明
setValue 方法通常用于內(nèi)置組件或三方組件返回值的校驗(yàn)，因?yàn)閡ni-esayinput 等 uni 開(kāi)頭的組件內(nèi)置了對(duì) uni-forms的支持，所以這些組件返回的值可以直接使用，但是比如像input 這些內(nèi)置組件值的變化，無(wú)法及時(shí)通知 uni-forms ，從而無(wú)法正常的校驗(yàn)，這時(shí)就需要我們手動(dòng)將這些值加入到uni-forms的校驗(yàn)。
setValue 方法接受兩個(gè)參數(shù)：
name: 表單域?qū)?yīng)的name
value: 表單域?qū)?yīng)的值
<template> <view> <uni-forms ref="form" :modelValue="formData"> <uni-forms-item name="age" label="年齡"> <input v-model="formData.age" @input="setValue('age',formData.age)"> </uni-forms-item> <button class="button" @click="submit">校驗(yàn)表單</button> </uni-forms> </view> </template> <script> export default { data() { return { formData:{ age:'' }, rules: { // ... } } }, methods: { setValue(name,value){ // 設(shè)置表單某項(xiàng)對(duì)應(yīng)得值來(lái)觸發(fā)表單校驗(yàn) // 接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為表單域的 name ，第二個(gè)參數(shù)為表單域的值 this.$refs.form.setValue(name,value) }, submit() { this.$refs.form.validate(['id'],(err,formData)=>{ if(!err){ console.log('success',formData) } }) } } } </script>其他方法說(shuō)明
// 設(shè)置規(guī)則 this.$refs.form.setRules({ //... }) // 部分表單進(jìn)行校驗(yàn)，接受一個(gè)參數(shù)，類(lèi)型為 String 或 Array ，只校驗(yàn)傳入 name 表單域的值 this.$refs.form.validateField(['name', 'email']).then((res)=>{ // 成功返回，res 為對(duì)應(yīng)表單數(shù)據(jù) // 其他邏輯處理 // ... }).catch((err)=>{ // 表單校驗(yàn)驗(yàn)失敗，err 為具體錯(cuò)誤信息 // 其他邏輯處理 // ... }) // 移除表單校驗(yàn)，接受一個(gè)參數(shù)，類(lèi)型為 String 或 Array ，只移除傳入 name 表單域的值，如果不傳入?yún)?shù)，則移除所有 this.$refs.form.clearValidate(['name', 'email'])FormsItem Props
屬性名
類(lèi)型
默認(rèn)值
可選值
說(shuō)明
兼容說(shuō)明
name
String/Array
-
-
表單域的屬性名，在使用校驗(yàn)規(guī)則時(shí)必填
rules
Object
-
-
表單校驗(yàn)規(guī)則
required
Boolean
false
-
label 右邊顯示紅色"*"號(hào)，樣式顯示不會(huì)對(duì)校驗(yàn)規(guī)則產(chǎn)生效果
label
String
-
-
輸入框左邊的文字提示
label-width
Number
70
-
label的寬度，單位px
error-message
String
-
-
顯示的錯(cuò)誤提示內(nèi)容，如果為空字符串或者false，則不顯示錯(cuò)誤信息
label-align
String
left
left/center/right
label的文字對(duì)齊方式
label-position
String
left
top/left
label的文字的位置
1.4.0已棄用 ，統(tǒng)一使用 uni-forms 的對(duì)齊方式
validateTrigger
String
submit
bind/submit
表單校驗(yàn)時(shí)機(jī)
1.4.0已棄用，統(tǒng)一使用 uni-forms 的校驗(yàn)時(shí)機(jī)
left-icon
String
-
-
label左邊的圖標(biāo)，限uni-ui的圖標(biāo)名稱(chēng)
1.4.0已棄用 ，請(qǐng)使用 #label 插槽實(shí)現(xiàn)相關(guān)功能
icon-color
String
#606266
-
左邊通過(guò)icon配置的圖標(biāo)的顏色
1.4.0已棄用 ，請(qǐng)使用 #label 插槽實(shí)現(xiàn)相關(guān)功
FormsItem Methods
方法稱(chēng)名
說(shuō)明
兼容說(shuō)明
setRules
動(dòng)態(tài)設(shè)置表單規(guī)則
onFieldChange
校驗(yàn)子表單
1.4.0新增
FormsItem Slots
插槽名
說(shuō)明
default
默認(rèn)插槽
label
label插槽，自定義label顯示內(nèi)容
示例
<template> <view class="container"> <uni-card :is-shadow="false" is-full> <text class="uni-h6">uni-forms 組件一般由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗(yàn)、提交數(shù)據(jù)。</text> </uni-card> <uni-section title="基本用法" type="line"> <view class="example"> <!-- 基礎(chǔ)用法，不包含校驗(yàn)規(guī)則 --> <uni-forms ref="baseForm" :modelValue="baseFormData"> <uni-forms-item label="姓名" required> <uni-easyinput v-model="baseFormData.name" placeholder="請(qǐng)輸入姓名" /> </uni-forms-item> <uni-forms-item label="年齡" required> <uni-easyinput v-model="baseFormData.age" placeholder="請(qǐng)輸入年齡" /> </uni-forms-item> <uni-forms-item label="性別" required> <uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" /> </uni-forms-item> <uni-forms-item label="興趣愛(ài)好" required> <uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" /> </uni-forms-item> <uni-forms-item label="自我介紹"> <uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="請(qǐng)輸入自我介紹" /> </uni-forms-item> <uni-forms-item label="日期時(shí)間"> <uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/> </uni-forms-item> </uni-forms> </view> </uni-section> <uni-section title="對(duì)齊方式" type="line"> <view class="example"> <view class="segmented-control"> <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"> </uni-segmented-control> </view> <!-- 展示不同的排列方式 --> <uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment"> <uni-forms-item label="姓名" required> <uni-easyinput v-model="baseFormData.name" placeholder="請(qǐng)輸入姓名" /> </uni-forms-item> <uni-forms-item label="年齡" required> <uni-easyinput v-model="baseFormData.age" placeholder="請(qǐng)輸入年齡" /> </uni-forms-item> </uni-forms> </view> </uni-section> <uni-section title="表單校驗(yàn)" type="line"> <view class="example"> <!-- 基礎(chǔ)表單校驗(yàn) --> <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData"> <uni-forms-item label="姓名" required name="name"> <uni-easyinput v-model="valiFormData.name" placeholder="請(qǐng)輸入姓名" /> </uni-forms-item> <uni-forms-item label="年齡" required name="age"> <uni-easyinput v-model="valiFormData.age" placeholder="請(qǐng)輸入年齡" /> </uni-forms-item> <uni-forms-item label="自我介紹" name="introduction"> <uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="請(qǐng)輸入自我介紹" /> </uni-forms-item> </uni-forms> <button type="primary" @click="submit('valiForm')">提交</button> </view> </uni-section> <uni-section title="自定義校驗(yàn)規(guī)則" type="line"> <view class="example"> <!-- 自定義表單校驗(yàn) --> <uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData"> <uni-forms-item label="姓名" required name="name"> <uni-easyinput v-model="customFormData.name" placeholder="請(qǐng)輸入姓名" /> </uni-forms-item> <uni-forms-item label="年齡" required name="age"> <uni-easyinput v-model="customFormData.age" placeholder="請(qǐng)輸入年齡" /> </uni-forms-item> <uni-forms-item label="興趣愛(ài)好" required name="hobby"> <uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" /> </uni-forms-item> </uni-forms> <button type="primary" @click="submit('customForm')">提交</button> </view> </uni-section> <uni-section title="動(dòng)態(tài)表單" type="line"> <view class="example"> <!-- 動(dòng)態(tài)表單校驗(yàn) --> <uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData"> <uni-forms-item label="郵箱" required name="email"> <uni-easyinput v-model="dynamicFormData.email" placeholder="請(qǐng)輸入姓名" /> </uni-forms-item> <uni-forms-item v-for="(item,index) in dynamicLists" :key="item.id" :label="item.label+' '+index" required :rules="item.rules" :name="'domains[' + item.id + ']'"> <view class="form-item"> <uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="請(qǐng)輸入域名" /> <button class="button" size="mini" type="default" @click="del(item.id)">刪除</button> </view> </uni-forms-item> </uni-forms> <view class="button-group"> <button type="primary" size="mini" @click="add">新增域名</button> <button type="primary" size="mini" @click="submit('dynamicForm')">提交</button> </view> </view> </uni-section> </view> </template> <script> export default { data() { return { // 基礎(chǔ)表單數(shù)據(jù) baseFormData: { name: '', age: '', introduction: '', sex: 2, hobby: [5], datetimesingle: 1627529992399 }, // 表單數(shù)據(jù) alignmentFormData: { name: '', age: '', }, // 單選數(shù)據(jù)源 sexs: [{ text: '男', value: 0 }, { text: '女', value: 1 }, { text: '保密', value: 2 }], // 多選數(shù)據(jù)源 hobbys: [{ text: '跑步', value: 0 }, { text: '游泳', value: 1 }, { text: '繪畫(huà)', value: 2 }, { text: '足球', value: 3 }, { text: '籃球', value: 4 }, { text: '其他', value: 5 }], // 分段器數(shù)據(jù) current: 0, items: ['左對(duì)齊', '頂部對(duì)齊'], // 校驗(yàn)表單數(shù)據(jù) valiFormData: { name: '', age: '', introduction: '', }, // 校驗(yàn)規(guī)則 rules: { name: { rules: [{ required: true, errorMessage: '姓名不能為空' }] }, age: { rules: [{ required: true, errorMessage: '年齡不能為空' }, { format: 'number', errorMessage: '年齡只能輸入數(shù)字' }] } }, // 自定義表單數(shù)據(jù) customFormData: { name: '', age: '', hobby: [] }, // 自定義表單校驗(yàn)規(guī)則 customRules: { name: { rules: [{ required: true, errorMessage: '姓名不能為空' }] }, age: { rules: [{ required: true, errorMessage: '年齡不能為空' }] }, hobby: { rules: [{ format: 'array' }, { validateFunction: function(rule, value, data, callback) { if (value.length < 2) { callback('請(qǐng)至少勾選兩個(gè)興趣愛(ài)好') } return true } } ] } }, dynamicFormData: { email: '', domains: {} }, dynamicLists: [], dynamicRules: { email: { rules: [{ required: true, errorMessage: '域名不能為空' }, { format: 'email', errorMessage: '域名格式錯(cuò)誤' }] } } } }, computed: { // 處理表單排列切換 alignment() { if (this.current === 0) return 'left' if (this.current === 1) return 'top' return 'left' } }, onLoad() {}, onReady() { // 設(shè)置自定義表單校驗(yàn)規(guī)則，必須在節(jié)點(diǎn)渲染完畢后執(zhí)行 this.$refs.customForm.setRules(this.customRules) }, methods: { onClickItem(e) { console.log(e); this.current = e.currentIndex }, add() { this.dynamicLists.push({ label: '域名', rules: [{ 'required': true, errorMessage: '域名項(xiàng)必填' }], id: Date.now() }) }, del(id) { let index = this.dynamicLists.findIndex(v => v.id === id) this.dynamicLists.splice(index, 1) }, submit(ref) { this.$refs[ref].validate().then(res => { console.log('success', res); uni.showToast({ title: `校驗(yàn)通過(guò)` }) }).catch(err => { console.log('err', err); }) }, } } </script> <style lang="scss"> .example { padding: 15px; background-color: #fff; } .segmented-control { margin-bottom: 15px; } .button-group { margin-top: 15px; display: flex; justify-content: space-around; } .form-item { display: flex; align-items: center; } .button { display: flex; align-items: center; height: 35px; margin-left: 10px; } </style>
總結(jié)
到此這篇關(guān)于uniapp表單校驗(yàn)的文章就介紹到這了,更多相關(guān)uniapp表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)?lái)一篇老生常談js中0到底是 true 還是 false。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)
這篇文章主要介紹了微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
jquery下onpropertychange事件的綁定方法
用了onchange事件，但是在輸入的時(shí)候，用Javascript計(jì)算出并填值的那一列并不會(huì)響應(yīng)onchange 事件。2010-08-08
這篇文章主要介紹了微信js-sdk地理位置接口用法,結(jié)合實(shí)例形式分析了js-sdk地理位置接口的定義與簡(jiǎn)單使用方法,需要的朋友可以參考下2016-10-10
這篇文章主要給大家介紹了關(guān)于使用JS獲取當(dāng)前地理位置的2種方法,獲取當(dāng)前位置在實(shí)際場(chǎng)景中非常有用,比如定位用戶(hù)的位置,為其推薦周邊的商家和服務(wù)等,需要的朋友可以參考下2023-11-11
JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法,每種方式通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
javascript實(shí)現(xiàn)簡(jiǎn)單查找與替換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單查找與替換的方法,涉及javascript針對(duì)頁(yè)面查找與替換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
基于代數(shù)方程庫(kù)Algebra.js解二元一次方程功能示例
這篇文章主要介紹了基于代數(shù)方程庫(kù)Algebra.js解二元一次方程功能,結(jié)合具體實(shí)例形式分析了方程庫(kù)Algebra.js計(jì)算方程的具體使用技巧,需要的朋友可以參考下2017-06-06
本節(jié)實(shí)例給出一個(gè)獲取瀏覽器當(dāng)前窗口大小的方法。當(dāng)瀏覽器窗口大小變化時(shí)，顯示的值會(huì)隨時(shí)變化2011-12-12
Eclipse去除js(JavaScript)驗(yàn)證錯(cuò)誤
這篇文章主要是對(duì)Eclipse去除js(JavaScript)驗(yàn)證錯(cuò)誤進(jìn)行了介紹。在Eclipse中，js文件常常會(huì)報(bào)錯(cuò)。可以通過(guò)如下幾個(gè)步驟解決2014-02-02