当前位置:网站首页>uniapp的表单验证
uniapp的表单验证
2022-07-06 19:21:00 【这次我一定要赢】
回顾一下,平常我们在使用element-ui的时候是如何进行表单验证的
<template>
<div class="">
<el-form ref="form" :rules="rules" :model="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="fn">保存</el-button>
</div>
</template>
<script>
export default {
data() {
return {
form:{
name:'',
age:''
},
rules:{
name: [{ required: true, message: '必填', trigger: 'blur' }],
age: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
name: '',
methods: {
fn(){
this.$refs.form.validate((result)=>{
if (result) {
console.log('验证通过后的逻辑处理');
}
else{
console.log('验证失败后的逻辑处理');
}
})
}
}
}
</script>
<style scoped>
</style>
(1)在el-form上绑定的东西
1.ref获取表单调用viliadte方法做全局的验证
2.:rules 验证规则
3.:model 绑定关联的数据
(2)在el-form-item上绑定东西
1.label关联的是标题
2.prop绑定是关联的字段
(3)在el-input上绑定的东西
el-input,绑定双向绑定要关联的数据
uniapp的表单验证
1.uni-forms需要通过rules属性传入约定的校验规则
<!-- rules 内容详见下方完整示例 -->
<uni-forms ref="form" :rules="rules">
...
</uni-forms>
这个和element-ui是一样的
2.uni-forms
需要绑定model
属性,值为表单的key\value 组成的对象。
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms ref="form" :model="formData" :rules="rules">
...
</uni-forms>
3.uni-forms-item
需要设置 name
属性为当前字段名,字段为 String|Array
类型。
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required :name="['data','hobby']" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.data.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
这里的name相当于element-ui里面的prop
4.规则验证
rules: {
// 对name字段进行必填验证
name: {
rules: [{
required: true,
errorMessage: '请输入姓名',
},
{
minLength: 3,
maxLength: 5,
errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
}
]
},
// 对email字段进行必填验证
email: {
rules: [{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
}]
}
}
这里可以看出来uni多加了一个rules。
其他可以见官网进行查看。
边栏推荐
- Oracle中日期的使用方法实例
- Wireshark installation
- Derivative, partial derivative, directional derivative
- Common fitting models and application methods of PCL
- Redis入门完整教程:复制配置
- C语言练习题_1
- Have fun | latest progress of "spacecraft program" activities
- Google Earth Engine(GEE)——Landsat 全球土地调查 1975年数据集
- 实施MES管理系统时,哪些管理点是需要注意的
- Convert widerperson dataset to Yolo format
猜你喜欢
Redis入门完整教程:复制配置
Dotconnect for DB2 Data Provider
换个姿势做运维!GOPS 2022 · 深圳站精彩内容抢先看!
导数、偏导数、方向导数
What management points should be paid attention to when implementing MES management system
Electrical engineering and automation
Apifox,你的API接口文档卷成这样了吗?
What are the characteristics of the operation and maintenance management system
Fundamentals of process management
从零安装Redis
随机推荐
[leetcode]Search for a Range
Summary of basic debugging steps of S120 driver
Redis入门完整教程:复制配置
ERROR: Could not find a version that satisfies the requirement xxxxx (from versions: none)解决办法
Web3's need for law
3 -- Xintang nuc980 kernel supports JFFS2, JFFS2 file system production, kernel mount JFFS2, uboot network port settings, and uboot supports TFTP
Wireshark installation
运维管理系统有哪些特色
[Mori city] random talk on GIS data (II)
Halcon instance to opencvsharp (C openCV) implementation -- bottle mouth defect detection (with source code)
fasterxml ToStringSerializerBase报错
Draco - gltf model compression tool
How to build a 32core raspberry pie cluster from 0 to 1
MATLB|具有储能的经济调度及机会约束和鲁棒优化
数字滚动增加效果
一本揭秘字节万台节点ClickHouse背后技术实现的白皮书来了!
Software testing -- common assertions of JMeter interface testing
CSDN 夏令营课程 项目分析
Have fun | latest progress of "spacecraft program" activities
从控制理论的角度谈数据分析