当前位置:网站首页>Form validation of uniapp
Form validation of uniapp
2022-07-07 02:52:00 【I must win this time】
Take a look back. , Usually we use element-ui How to verify the form when
<template>
<div class="">
<el-form ref="form" :rules="rules" :model="form">
<el-form-item label=" full name " prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label=" Age " prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="fn"> preservation </el-button>
</div>
</template>
<script>
export default {
data() {
return {
form:{
name:'',
age:''
},
rules:{
name: [{ required: true, message: ' Required ', trigger: 'blur' }],
age: [{ required: true, message: ' Required ', trigger: 'blur' }]
}
}
},
name: '',
methods: {
fn(){
this.$refs.form.validate((result)=>{
if (result) {
console.log(' Logical processing after verification ');
}
else{
console.log(' Logical processing after verification failure ');
}
})
}
}
}
</script>
<style scoped>
</style>
(1) stay el-form Things bound on
1.ref Get form call viliadte Method to do global verification
2.:rules Validation rule
3.:model Bind associated data
(2) stay el-form-item Bind something on the
1.label Related is the title
2.prop Bindings are associated fields
(3) stay el-input Things bound on
el-input, Bind two-way bind the data to be associated
uniapp Form validation for
1.uni-forms Need to pass through rules Property passes in the agreed validation rules
<!-- rules See the complete example below for details -->
<uni-forms ref="form" :rules="rules">
...
</uni-forms>
This and element-ui It's the same
2.uni-forms
Need to bind model
attribute , Value of the form key\value The object of composition .
<!-- formData、rules See the complete example below for details -->
<uni-forms ref="form" :model="formData" :rules="rules">
...
</uni-forms>
3.uni-forms-item
Need to set up name
The attribute is the current field name , Field is String|Array
type .
<!-- formData、rules See the complete example below for details -->
<uni-forms :modelValue="formData" :rules="rules">
<uni-forms-item label=" full name " name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder=" Please enter a name " />
</uni-forms-item>
<uni-forms-item required :name="['data','hobby']" label=" Hobby ">
<uni-data-checkbox multiple v-model="formData.data.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
there name amount to element-ui Inside prop
4. Rule validation
rules: {
// Yes name Field must be verified
name: {
rules: [{
required: true,
errorMessage: ' Please enter a name ',
},
{
minLength: 3,
maxLength: 5,
errorMessage: ' The length of the name is {minLength} To {maxLength} Characters ',
}
]
},
// Yes email Field must be verified
email: {
rules: [{
format: 'email',
errorMessage: ' Please enter the correct email address ',
}]
}
}
You can see it here uni One more rules.
Others can be viewed on the official website .
边栏推荐
猜你喜欢
慧通编程入门课程 - 2A闯关
牛客编程题--必刷101之双指针篇
导数、偏导数、方向导数
MySQL is an optimization artifact to improve the efficiency of massive data query
Statistics of radar data in nuscenes data set
数字滚动增加效果
Es6中Promise的使用
A complete tutorial for getting started with redis: RDB persistence
基于ensp防火墙双击热备二层网络规划与设计
Fundamentals of process management
随机推荐
Install redis from zero
Andrews - multimedia programming
换个姿势做运维!GOPS 2022 · 深圳站精彩内容抢先看!
ODBC database connection of MFC windows programming [147] (with source code)
Static proxy of proxy mode
[secretly kill little partner pytorch20 days] - [Day1] - [example of structured data modeling process]
The third season of ape table school is about to launch, opening a new vision for developers under the wave of going to sea
牛客编程题--必刷101之双指针篇
写作系列之contribution
普通测试年薪15w,测试开发年薪30w+,二者差距在哪?
Code debugging core step memory
The annual salary of general test is 15W, and the annual salary of test and development is 30w+. What is the difference between the two?
Unity custom webgl packaging template
The panel floating with the mouse in unity can adapt to the size of text content
Es6中Promise的使用
Babbitt | metauniverse daily must read: is IP authorization the way to break the circle of NFT? What are the difficulties? How should holder choose the cooperation platform
MySQL is an optimization artifact to improve the efficiency of massive data query
wzoi 1~200
Cloud Mail . NET Edition
Unity webgl adaptive web page size