回顾一下,app开发定制公司平常我们在使用的时候app开发定制公司是如何进行表单验证的
- <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)在上绑定的东西
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。
其他可以见官网进行查看。