关于html5:动态实现elementui不同用户elform中的输入框elinput校验项不同

4次阅读

共计 2464 个字符，预计需要花费 7 分钟才能阅读完成。

对于输入框校验这个问题，其实是陈词滥调的问题。相干的工具包有很多，如果咱们应用饿了么 UI，也能够用 el-form 中的简略的校验。一般来说如果应用 elementui 的话，就大概率是做后盾管理系统的，说道后盾管理系统，就要说道权限问题。即：不同的用户看到的、可操作的不同。后盾管理系统的权限问题本篇不做赘述。次要说其中一个小场景： 不同的用户登录这个零碎后，都会看到同样的 el-form 表单，然而必填项却不同 废话不多说上效果图

年龄和他乡必填项

技能和幻想必填项

html 代码图示

html 代码

<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="姓名">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" :prop="userOne.age"> <!-- 用户一的必填项独自配置 -->
            <el-input v-model="ruleForm.age"></el-input> 
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="他乡" :prop="userOne.home"> <!-- 用户一的必填项独自配置 -->
            <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="喜好">
            <el-input v-model="ruleForm.like"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="技能" :prop="userTwo.skill"> <!-- 用户二的必填项独自配置 -->
            <el-input v-model="ruleForm.skill"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="幻想" :prop="userTwo.dream"> <!-- 用户二的必填项独自配置 -->
            <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')"> 提交表单 </el-button>
    </div>
  </div>
</template>

js 局部

<script>
export default {
  name: "app",
  data() {
    return {
      ruleForm: {
        name: "",
        age:"",
        home:"",
        like:"",
        skill:"",
        dream:""
      },
      // 第一步 与 el-form-item 中的 prop 校验谁对应能力去做管制，全副配置一下
      userOne:{
        age:"age",
        home:"home"
      },
      // 第二步，不同的用户角色都要与之对应 只保留登录用户的配置，未登录用户的配置清空
      userTwo:{
        skill:"skill",
        dream:"dream"
      },
      // 第三步，然而所有的校验规定都要提前写上
      rules: {age: [{ required: true, message: "请填写年龄", trigger: "blur"}],
        home: [{required: true, message: "请填写籍贯", trigger: "blur"}],
        skill: [{required: true, message: "请填写技能", trigger: "blur"}],
        dream: [{required: true, message: "请填写幻想", trigger: "blur"}],
      },
    };
  },
  mounted() {
    /*
      第四步：假如咱们在用户登录的时候把用户的身份标识存到 sessionStorage 中去了。那么在对应页面初始加载的时候
          咱们就就从 sessionStoarge 取出来对应用户身份标识，看一下是哪个用户，不同的用户，就让 el-form 里的
          el-form-item 上的 prop 对应出现和置为空。然而校验规定必须全副写上，做到出现谁，就校验谁
          比方这样的语句 let wihchUser = sessionStorage.getItem("whichUser")
    */ 
       
    /* 这里模仿不同用户 */ 
    // let wihchUser = "userOne"
    let wihchUser = "userTwo"
    
    if(wihchUser == "userOne"){
      // 非此用户的清空，此用户的留着即可
      this.userTwo = ""}else if(wihchUser =="userTwo"){this.userOne = ""}
  },
  methods: {onSubmit(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log("提交表单");
        } else {console.log("有必填项未填写");
          return false;
        }
      });
    },
  },
};
</script>

最终成果就是不同用户不同的必填项未填写，就会进行不同的校验和提醒