dingxin_toolbox_vue/src/views/update/index.vue

<script setup>
import {ref, reactive} from 'vue';
const cinemaSearch = reactive( {
  ip: '',
  version: '',
})
const ruleFormRef = ref()
const ip_validate = (rule, value, callback) => {
  const regex = new RegExp('(^((2[0-4]\\d.)|(25[0-5].)|(1\\d{2}.)|(\\d{1,2}.))((2[0-5]{2}.)|(1\\d{2}.)|(\\d{1,2}.){2})((1\\d{2})|(2[0-5]{2})|(\\d{1,2})))');
  if (!regex.test(value)) {
    callback(new Error('请输入正确的IP地址'))
  } else {
    callback()
  }
}

const ipRule = reactive({
  ip: [{validator: ip_validate, trigger: 'blur'}]
})

const submitSearch = (formData) => {
  console.log('至少执行了')
  console.log(formData)
  if (!formData)
    return formData.validate((valid) => {
      if (valid) {
        console.log('提交数据')
      }else{
        console.log('提交失败')
      }
    })
}

const resetSearch = (formData) => {
  if (!formData)
    return formData.resetFields()
}

</script>

<template>
<el-form
  ref="cinemaUpdate"
  :model="cinemaSearch"
  status-icon
  :rules="ipRule"
  label-width="120"
  class="cinema-search"
>
  <el-form-item label="影院IP" prop="ip">
    <el-input v-model="cinemaSearch.ip"></el-input>
  </el-form-item>
  <el-form-item label="版本" prop="ver">
    <el-input v-model="cinemaSearch.version"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitSearch(ruleFormRef)">搜索</el-button>
  </el-form-item>
  <el-form-item>
    <el-button @click="resetSearch(ruleFormRef)">重置</el-button>
  </el-form-item>
</el-form>
</template>

<style scoped>

</style>