0
点赞
收藏
分享

微信扫一扫

Vue表单校验规则(rules验证规则)

数数扁桃 2022-04-13 阅读 128
vue.js

直接上代码

<div>
      <el-form 
      :model="ces" 
      :rules="loginFormRules" 
      ref="ruleFormaa">
          <el-form-item label="测试邮件校验" prop="email">
              测试校验规则用例
         <el-input v-model="ces.email" placeholder="请输入回答次数" style="width: 160px;"></el-input>
        </el-form-item>
         <el-form-item>
   		 <el-button type="primary" @click="submitFormaa('ruleFormaa')">提交</el-button>
         </el-form-item>
      </el-form>
</div>

校验data

    return {
      ces: {
        email: ''
      },
      loginFormRules: {
         email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ]
      }
    }
  },
  methods: {
  // 第一种方法要接收参数 并且$refs[formName]
      submitFormaa(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
      }
`

举报

相关推荐

0 条评论