表单提交没反应 Java

Question

昨天的问题已经加了console.log去查，发现点击按钮后只有‘submit被调用’显示，而bookForm的数据没显示 数据不是已经绑定了吗

查了一下 就是表单校验没通过 我把if（valid）改成if（！valid）就能看到表单信息了，为什么表单不通过呢

这是控制台日志

 <el-form
      :model="bookForm"
      :rules="rules"
      ref="bookForm"
      label-width="100px"
      class="bookForm-container"
      style="width:880px"
      >
      <el-form-item label="书名"   prop="bookName">
        <el-input v-model="bookForm.bookName"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="bookForm.author"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publish">
        <el-input v-model="bookForm.publish"></el-input>
      </el-form-item>

      <el-form-item label="序号" prop="bookId">
        <el-input v-model="bookForm.bookId" auto-complete="off"></el-input>
      </el-form-item>

       <el-form-item label="价格" prop="price">
        <el-input v-model="bookForm.price" placeholder='包含小数点后两位'></el-input>
      </el-form-item>
      <el-form-item label="入库日期" required >
        <el-col >
          <el-form-item prop="inputDate">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="bookForm.inputDate"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"
          >确认入库</el-button>
      </el-form-item>
    </el-form>
  </el-container>
    
  </div>
  </body>
</template>

<script>
export default {
  name: "book",
  data() {
      return {
        bookForm: {
          bookName: '',
          author: '',
          publish: '',
          price:'',
          bookId: '',
          inputDate: ''
        },
        rules: {
        bookName: [
          { required: true, message: "请输入书名", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
        ],
         author: [
          { required: true, message: "请输入作者", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
        ],
         publish: [
          { required: true, message: "请输入出版社", trigger: "blur" },
          { min: 4, max: 30, message: "长度在 4 到 30个字符", trigger: "blur" },
        ],
         price: [
          { required: true, message: "请输入价格，包含小数点后两位", trigger: "blur", validator:(rule,value,callback)=>{
            if(value===''||(!/^[1-9]{2,3}\.{1}\d{2}$/.test(value))){
              callback.$message.error('请输入正确的价格')
            }
          } },
          { min: 4, max: 6, message: "长度在 4 到 6 个字符", trigger: "blur" },
          
        ],
           bookId: [
          { required: true, message: "请输入序号", trigger: "blur" },
          { min: 10, max: 10, message: "长度为10个字符", trigger: "blur" },
        ],
      
        inputDate: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
        
      };
    },

/*JSON.stringify(this.bookForm)*/
    methods: {
 
      submitForm() {
        console.log('submit 被调用了')
        this.$refs.bookForm.validate((valid) => {
          if (valid) {
            console.log(this.bookForm)
           this.axios.post('http://localhost:8080/book/add', this.bookForm).then((res=>{
            if(res.data.code===1){
           this.$message.success("入库成功")
       
            }else{
               this.$message.error("入库失败")
            }
           })) 
           
          } else {
            this.$message.error("未通过，入库失败")
            
          }
        });
      },
- 

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的链接内容，这是一个关于Java前端开发的问题，具体是关于表单提交没有反应的问题。从给出的代码片段来看，这是一个使用Vue.js框架和Element UI库的前端表单提交示例。用户遇到了点击提交按钮后，表单数据没有显示的问题。

首先，我们来分析可能的问题所在：

1. 表单验证：在submitForm方法中，使用了this.$refs.bookForm.validate()来进行表单验证。如果表单验证没有通过，将不会执行后续的提交逻辑。

2. 数据绑定：代码中使用了v-model来实现数据的双向绑定，理论上应该能够正确绑定表单数据。

3. 控制台输出：用户提到使用了console.log进行调试，但只有“submit被调用”显示，而没有表单数据。

基于以上信息，以下是一些可能的解决方案和示例代码：

解决方案一：检查表单数据绑定

确保v-model绑定的变量bookForm在组件的data函数中被正确返回。

data() {
  return {
    bookForm: {
      bookName: '',
      author: '',
      publish: '',
      bookId: '',
      price: '',
      inputDate: '',
    },
    // 其他代码...
  };
},

解决方案二：检查表单验证规则

确保表单验证规则正确无误，特别是对于价格的验证，需要确保输入的格式正确。

rules: {
  // 其他表单项的验证规则...
  price: [
    { required: true, message: "请输入价格，包含小数点后两位", trigger: "blur", validator: (rule, value, callback) => {
      if (value === '' || !/^[1-9]{1,3}(\.\d{2})?$/.test(value)) {
        callback(new Error('请输入正确的价格'));
      } else {
        callback();
      }
    } },
    // 其他验证规则...
  ],
  // 其他表单项的验证规则...
},

解决方案三：检查提交逻辑

在submitForm方法中，确保当表单验证通过后，使用axios正确发送请求。

methods: {
  submitForm() {
    console.log('submit 被调用了');
    this.$refs.bookForm.validate((valid) => {
      if (valid) {
        console.log(this.bookForm); // 这里应该打印出表单数据
        this.axios.post('http://localhost:8080/book/add', this.bookForm)
          .then((res) => {
            if (res.data.code === 1) {
              this.$message.success("入库成功");
            } else {
              this.$message.error("入库失败");
            }
          })
          .catch((error) => {
            console.error("提交失败: ", error);
            this.$message.error("提交失败");
          });
      } else {
        this.$message.error("未通过验证，入库失败");
        return false;
      }
    });
  },
  // 其他方法...
},

解决方案四：检查网络请求

确保后端服务正在运行，并且可以接收请求。检查axios.post中的URL是否正确，以及后端服务是否能够处理该请求。

如果以上解决方案仍然无法解决问题，可能需要进一步检查Vue实例的创建和挂载过程，以及Element UI的版本是否与Vue.js版本兼容。此外，检查浏览器的开发者工具中的网络请求和控制台输出，可能会提供更多关于问题的线索。