Form validation of uniapp

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 .