表單驗證

時間 2019-11-26

標籤表單驗證欄目 HTML 简体版

原文原文鏈接


  <style type="text/css">
        /* el-form-item__content 是input外層最大的div*/ .huo-dong .el-form-item__content{ width: 217px; } </style>

<body>
  <div id="app">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          
        <el-form-item label="活動名稱" prop="name" class="huo-dong">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        
        <el-form-item label="活動區域" prop="region">
           <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
            <el-option label="區域一" value="shanghai"></el-option>
            <el-option label="區域二" value="beijing"></el-option>
           </el-select>
        </el-form-item>
            
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">當即建立</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
   </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({ el: '#app', data() { return { ruleForm: { name: '', region: '', }, rules: { name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' } ], region: [ { required: true, message: '請選擇活動區域', trigger: 'change' } ], } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }) </script>

 總結表單驗證： prop 表單域 model 字段，在使用 validate、resetFields 方法的狀況下，該屬性是必填的。（重要） 在element-ui中 蒐集表單 都是放在一個對象（ruleForm）裏面的哦。有利於維護和保存。 ref="ruleForm" ruleForm是蒐集數據的哪個對象 label-width="80px" 表示label的寬度 <el-button @click="resetForm('ruleForm')">重置</el-button> ruleForm是蒐集數據的哪個對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。