Vue ElementUI是基于Vue.js開發的一套UI組件庫。在Vue ElementUI中，它的表單校驗是非常方便的。這個校驗功能可以幫助程序員在前端代碼實現一些常用的表單驗證功能，如：必填、長度、最大值、最小值、正則等類型。

const validateForm = {
data() {
return {
form: {
username: '',
age: 0
},
rules: {
username: [{
required: true, //必填
message: '請輸入用戶名',
trigger: 'blur'
}, {
min: 3,
max: 10,
message: '長度在 3 到 10 個字符',
trigger: 'blur'
}],
age: [{
type: 'number',
min: 18,
message: '年齡不能小于18歲',
trigger: 'blur'
}]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid =>{
if (valid) {
alert('submit!');
} else {
alert('驗證失敗');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};

以上代碼展示了校驗的一些常見功能，如必填、長度、最大值、最小值、正則等。Vue ElementUI中校驗規則的配置有兩種方法：數組形式和對象形式?？梢詾槊總€表單域指定一組校驗規則，或者為所有表單域指定一個校驗規則。

值得注意的是，表單校驗只有在Form組件的item子組件中才有效。表單組件中的每個元素都需要設置一個prop屬性，值為表單域字段名。同時在校驗規則中也需要設置一個key值與prop屬性相同，value則是校驗內容。