zoukankan      html  css  js  c++  java
  • 表单验证

    
      <style type="text/css">
            /*  el-form-item__content 是input外层最大的div*/
            .huo-dong .el-form-item__content{
                 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是搜集数据的哪一个对象
          

  • 相关阅读:
    net core 使用 rabbitmq
    asp.net core WebApi 返回 HttpResponseMessage
    asp.net core 2.1 WebApi 快速入门
    JQuery EasyUI combobox动态添加option
    php截取字符去掉最后一个字符
    JQuery EasyUI Combobox的onChange事件
    对于不返回任何键列信息的 selectcommand 不支持 updatecommand 的动态 sql 生成
    Access2007 操作或事件已被禁用模式阻止解决办法
    Easyui 中 Tabsr的常用方法
    Win 7 IE11不能下载文件,右键另存为也不行
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11931529.html
Copyright © 2011-2022 走看看