How to use Vue and Element-UI for data verification and form validation

How to use Vue and Element-UI for data verification and form validation

Introduction:
In the process of web application development, form validation is a very important part. It ensures that user-entered data conforms to the expected format and requirements, thereby improving application stability and data accuracy. Vue.js is a very popular JavaScript framework at present, and Element-UI is a set of UI component libraries based on Vue.js, which provides a wealth of form components and verification methods to facilitate developers to perform form verification. This article will introduce how to use Vue and Element-UI for data verification and form validation, and attach corresponding code examples.

1. Install Element-UI and configure the Vue project
First, we need to install Element-UI and configure the Vue project. You can install Element-UI through the following command:

npm install element-ui --save

Then, introduce Element-UI in the main.js file:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Basic usage of form verification
Element-UI Provides a series of verification methods and instructions to easily complete form verification. The following is a simple example that shows how to use Element-UI for basic form validation:

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度在3到10个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

In the above code, we use the el-form component to wrap two el-form-item components, where el -input is the input box component provided by Element-UI. Through two-way binding of the v-model instruction and form data, the synchronous update of the input box and form data is realized.

In the data option, we define the data and validation rules of the form. Validation rules are passed to the el-form component through the rules attribute, specifying the validation rules for each field. In the above example, we defined required rules and length rules for the username and password fields.

In the submitForm method, we call the this.$refs.form.validate method for form verification. This method will return a Boolean value indicating whether the form validation passes. If the verification passes, we can submit the form data; if the verification fails, we can prevent the form from being submitted.

In the resetForm method, we use the this.$refs.form.resetFields method to reset the form data.

The above is the basic usage of using Element-UI for form verification.

3. Customized verification rules
In addition to using the verification rules provided by Element-UI, we can also customize verification rules. The following is an example of a custom mobile phone number verification rule:

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: this.validatePhone, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      const reg = /^1[3|4|5|7|8][0-9]d{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('手机号码格式不正确'));
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

In the above code, we specify the verification method validatePhone using the validator attribute by adding a custom verification rule. In the validatePhone method, we use regular expressions to determine whether the mobile phone number meets the requirements. If the verification passes, we call callback(); if the verification fails, we call callback(new Error('Mobile phone number format is incorrect')).

Through the above code examples, we can see that Vue and Element-UI provide a complete set of form validation mechanisms that can meet most validation needs. Using Vue and Element-UI for data verification and form validation can make our development work more efficient and simpler. I hope this article can help you, thank you for reading!

The above is the detailed content of How to use Vue and Element-UI for data verification and form validation. For more information, please follow other related articles on the PHP Chinese website!