表单验证

时间 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是搜集数据的哪个对象