当前位置:   article > 正文

vue 表单校验不通过时拦截提交表单_vue3的el-form的rules怎么阻止提交

vue3的el-form的rules怎么阻止提交

上代码:

  1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  2. <el-form-item label="名称" prop="name">
  3. <el-input type="textarea" v-model="ruleForm.name"></el-input>
  4. </el-form-item>
  5. <el-form-item>
  6. <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  7. </el-form-item>
  8. </el-form>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. ruleForm: {
  14. name: ''
  15. },
  16. rules: {
  17. name: [
  18. { required: true, message: '请输入活动名称', trigger: 'blur' },
  19. { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  20. ]
  21. }
  22. };
  23. },
  24. methods: {
  25. submitForm(formName) {
  26. this.$refs[formName].validate((valid) => { //开启校验
  27. if (valid) { // 如果校验通过,请求接口,允许提交表单
  28. alert('submit!');
  29. } else { //校验不通过
  30. return false;
  31. }
  32. });
  33. }
  34. }
  35. }
  36. </script>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/115789
推荐阅读
相关标签