Element Plus is a Vue 3 UI library which help developers and UI designers quickly build apps and components. Most of the parts of the library coming from the Chinese contributor and has large user base.

Element Plus is a good choice when developing web and desktop apps.

el-form

el-form is the form component, which is capable of perform validation based on custom rules. Let's quickly setup a validation on form.

What we need ?

  • Form Model
  • Validation rules
  • Validation handler

Template form

Our form simply accept a email and check whether it is blank or not, on the click of a subscription button also we used a handler (template ref) to reset the form.

  <el-form         label-width="80px"         size="mini"         ref="ruleForm"         :model="ruleForm"         :rules="rules"       >         <el-form-item label="User Id" prop="email">           <el-input type="text" placeholder="Email" v-model="ruleForm.email"></el-input>         </el-form-item>           <el-form-item>           <el-button type="primary" @click="submitForm">Login</el-button>           <el-button @click="resetForm">Reset</el-button>         </el-form-item>       </el-form>

Rules and Model

 <script lang="ts"> export default {   data() {     return {       ruleForm: {         email: "",       },       rules: {         email: {           required: true,           message: "Please enter real email",           trigger: "blur",         },       },     };   },   methods: {     onSubmit() {},     submitForm() {       this.$refs.ruleForm.validate((valid: any) => {         if (valid) {           alert("submit!");         } else {           alert("error submit!!");           return false;         }       });     },     resetForm() {       this.$refs.ruleForm.resetFields();     },   }, }; </script>

In the above we created ruleForm model and a set of rules for it. Element-plus validate the rules on the call of validate and display message inline of below the fields.

 This free site is ad-supported. Learn more
​