• The iView form validates the necessary Settings
We must add a ref to the Form tag, which is used to submit an instance of the Form. 4. Set the prop property for each Form item that needs validation to be consistent with the binding propertyCopy the code
  • Iview verifies multiple form issues
<template>
	<Form ref="addForm" :model="addForm" :rules="addFormValidate" >
		<FormItem label="Name" prop="name">
                    <Input v-model="addForm.name" />
                </FormItem>
	</Form>
	<Form ref="editForm" :model="editForm" :rules="editFormValidate" >
		<FormItem label="Name" prop="name">
                    <Input v-model="editForm.name" />
                </FormItem>
	</Form>
</template>
<script>
  export default {
	methods:{
	     this.$refs.addform.validate ((valid) => {// The first layer validates the first formif (valid) {
		  	this.$refs.editForm.validate((valid) => {// The second layer validates the second formif(valid){
		        		alert('Verification successful')
		      		 }
		    	 })
		    }
	     })
	}
  }
</script>
Copy the code
  • Iview custom form validation
<template>
	<Form ref="addForm" :model="addForm" :rules="ruleValidate" >
		<FormItem label="Name" prop="name">
                    <Input v-model="addForm.name" />
                </FormItem>
	</Form>
</template>
<script>
  export default {
	data() {
	    var validateName = function(rule, value, callback){
                 if(! value){return callback(new Error("Please enter a name"));
                 }else if(! /^[\u4e00-\u9fa5]+$/.test(value)){return callback(new Error("Please enter your name correctly."))}else{ callback(); }};return {
	    	addForm:{
	    		name:""
	    	}
	    	ruleValidate:{
                 name : [{validator : validateName , trigger : 'blur'}]
                }
	    }
        }
  }
</script>
Copy the code

Custom validation rules are written in data and called in the Return ruleValidate specified field validator. Trigger: trigger mechanism (the blur | change) the pattern: regular expression enum: verify whether fields exist equired: whether is empty (true | false) whitespace: white space characters (true | false)

  • Iview Type of form validation
String (string/default type) 2. number (number) 3. Boolean (Boolean type) 4. method (function) 5.floatFloating point number 6.integer(integer) 7.array 8.object 9.date 10.url 11.emailCopy the code