标签：el 验证 表单 trigger blur message element

1：模板中配置

<el-form ref="log-form" :model="form" label-width="80px" class='form' :rules="formRules">
      <el-form-item label="用户名:" prop='name' class="label-font">
        <el-input v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop='password'>
        <el-input v-model="form.password" type='password'></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <!-- <el-button type="primary" @click="onSubmit">注册</el-button> -->

      </el-form-item>
    </el-form>

1. 给 el-from 组件绑定 model 为表单数据对象
2. 给需要验证的表单项 el-form-item 绑定 prop 属性
   1. 注意：prop 属性需要指定表单对象中的数据名称
3. 通过 el-from 组件的 rules 属性配置验证规则
4. ref 的作用主要用来获取表单组件手动触发验证

2：在 data 中定义验证规则

data () {
    return {
      form: {
        name: '',
        password: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 18, message: '长度在8到18之间', trigger: 'blur' }
        ]
      }
    }
  },

（3）在登录的时候调用验证

 

onSubmit () {
      // 验证数据
      this.$refs['log-form'].validate(valid => {
        // 如果验证失败，禁止提交
        if (!valid) {
          return
        }
        console.log('login')
        // this.login()
      })
    },

 

 

 

 

 

 

 

 

 

 

 

 

标签：el,验证,表单,trigger,blur,message,element
来源： https://www.cnblogs.com/Live-up-to-your-youth/p/15002739.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。