关于element Form表单的下拉框出现自动校验

最新推荐文章于 2025-05-09 16:10:23 发布

原创最新推荐文章于 2025-05-09 16:10:23 发布

· 4.9k 阅读

3 ·

版权

文章标签：

#html #javascript #html5

element 专栏收录该内容

8 篇文章

订阅专栏

关于element Form表单的下拉框出现自动校验

Form表单的校验一定要遵循文档的要求，不然就会出现自动校验或校验状态取消不了这种情况

 <el-form ref="Form" :model="Form" :rules="FormRules" label-width="100px" class="demo-ruleForm formMargin">
      
            <el-form-item label="所属单位："  class="fw60" prop="enterpriseNum"> 
              <el-input v-model="Form.enterpriseNum" placeholder="请输入所属单位"></el-		input>
            </el-form-item> 
            
            <div class="line">
                <el-form-item label="用户姓名："  class="fw48"  prop="name" >
                    <el-input v-model="Form.name" placeholder="输入用户姓名"></el-input>
                </el-form-item>

                <el-form-item label="用户职位："  class="fw48" >
                    <el-input v-model="Form.position" placeholder="输入用户职位"></el-input>
                </el-form-item>
            </div>

            <div class="line">
                <el-form-item label="登录账户："  class="fw48" prop="account" >
                    <el-input  type="text"   v-model="Form.account"  placeholder="请输入登录账户"></el-input>
                </el-form-item>

                <el-form-item label="登录密码："  class="fw48"  >
                    <el-input type="password" v-model="Form.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
            </div>
  
          <div class="line">  
            <el-form-item label="用户角色："  class="fw48"  prop="roleNum" >
              <el-select v-model="Form.roleNum" @change="roleChange"   placeholder="请选择用户角色" style='width:100%;'>
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
              </el-select>
            </el-form-item>   
        </div>  

            <el-form-item label="用户备注："  class="DrawerRight" >
                <el-input type="textarea" :rows="5" v-model="Form.notes" placeholder="请输入备注" resize="none"></el-input>
            </el-form-item>

              <el-form-item class="DrawerRight" style="display: flex;justify-content: flex-end;">
                <el-button class='edit_btns1' @click="submitForm('Form',3)" v-show="fl==2&&btnlist==1">保存</el-button>
                <el-button class='edit_btns1' @click="submitForm('Form',2)" v-show="fl==2&&btnlist==2">添加</el-button>
                <el-button type='info' plain @click="resetForm('Form')">重置</el-button>
              </el-form-item>
          </el-form>

在js中加入规则

 data () {
      return {
        Form:{
            "account":'',
            "name":'',
            "password":'',
            "unit":'',
            "position":'',
            "roleNum":'',
            "stateNum":'',
            "notes":'',
            "enterpriseNum":''
            // "enterpriseName":''
          },
          //校验规则
          FormRules:{
            enterpriseNum:[
              { required: true, message: '请输入所属单位', trigger: 'blur' }
            ],
            name:[
               { required: true, message: '输入用户姓名', trigger: 'blur' }
            ],
            account:[
              { required: true, message: '请输入登录账户', trigger: 'blur' }
            ],
            password:[
              { required: true, message: '请输入登密码', trigger: 'blur' }
            ],
            roleNum:[
               { required: true, message: '请选择用户角色', trigger: 'change' }
            ],
            stateNum:[
               { required: true, message: '请选择用用户状态', trigger: 'change' }
            ],
          },
      }
    },

最后。确认表单重置表单或打开表单时一定要把Form的内容置空
才能达到清除校验的效果

//打开表单
addmenu_btn(){
          let _this = this
          _this.$nextTick(()=>{
            _this.$refs['Form'].resetFields()//重置
         })
 			//清空Form数据
		  _this.Form={
              "account":'',
              "name":'',
              "password":'',
              "unit":'',
              "position":'',
              "roleNum":'',
              "stateNum":'',
              "notes":'',
              "enterpriseNum":''
        }
        },