Problem description

On the input box check this problem, in fact, is a platitude. There are a number of toolkits available, but if we use the Ele. me UI, we can also use the simple validation in El-Form. In general, if you’re using elementUI, you’re probably doing a back end management system, and when it comes to back end management systems, you’re talking about permissions. That is, different users see and can operate differently. The permissions of the background management system are not described here. Here’s one small scenario: when different users log in to the system, they see the same El-Form, but the required fields are different

As soon as the user sees it

Age and hometown are mandatory

User two sees it

Skills and dreams required

The implementation code

HTML code diagramThe HTML code

<template>
  <div id="app">
    <el-form
      :model="ruleForm" :rules="rules"
      ref="ruleForm" label-width="100px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="Name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Age" :prop="userOne.age"> <! -- User 1 must be configured separately -->
            <el-input v-model="ruleForm.age"></el-input> 
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Home" :prop="userOne.home"> <! -- User 1 must be configured separately -->
            <el-input v-model="ruleForm.home"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="Hobby">
            <el-input v-model="ruleForm.like"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Skills" :prop="userTwo.skill"> <! -- User 2 must be configured separately -->
            <el-input v-model="ruleForm.skill"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Dream" :prop="userTwo.dream"> <! -- User 2 must be configured separately -->
            <el-input v-model="ruleForm.dream"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="onSubmit('ruleForm')">Submit the form</el-button>
    </div>
  </div>
</template>
Copy the code

Js part

<script>
export default {
  name: "app".data() {
    return {
      ruleForm: {
        name: "".age:"".home:"".like:"".skill:"".dream:""
      },
      // Check prop with el-form-item to see who can do the control
      userOne: {age:"age".home:"home"
      },
      // In the second step, only the configurations of logged-in users should be reserved for different user roles. The configurations of unlogged-in users should be cleared
      userTwo: {skill:"skill".dream:"dream"
      },
      // Step 3, but all validation rules must be written in advance
      rules: {
        age: [{ required: true.message: "Please state your age".trigger: "blur"}].home: [{ required: true.message: "State your native place".trigger: "blur"}].skill: [{ required: true.message: "Please fill in skills".trigger: "blur"}].dream: [{ required: true.message: "Fill in your dream".trigger: "blur"}],}}; },mounted() {
    /* Step 4: Assume that the user id is stored in sessionStorage when the user logs in. So at the initial load of the corresponding page we take the corresponding user identity from sessionStoarge, see which user, different user, and let the prop on the El-Form-Item in the el-Form render and set null accordingly. The checkrule must be executed completely, which executes whoever it renders, such as let wihchUser = sessionStorage.getitem ("whichUser") */ 
   	
    /* Here simulate different users */ 
    // let wihchUser = "userOne"
    let wihchUser = "userTwo"
    
    if(wihchUser == "userOne") {// If the user is not the user, the user can keep it
      this.userTwo = ""
    }else if(wihchUser == "userTwo") {this.userOne = ""}},methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) = > {
        if (valid) {
          console.log("Submit the form");
        } else {
          console.log("There are mandatory fields left unfilled.");
          return false; }}); ,}}}; </script>Copy the code

conclusion

The end result is that different users will get different checksum prompts if the required fields are not filled in

In the same words, problems provide a way of thinking, when we programmers face a specific problem, there are ideas, easy to do.