uniapp的表单验证

回顾一下,平常我们在使用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。

其他可以见官网进行查看。