2021-10-15 验证form表单的内容是否已存在数据库

最新推荐文章于 2023-05-11 15:45:56 发布
最新推荐文章于 2023-05-11 15:45:56 发布
阅读量390 收藏
点赞数
分类专栏： javaScript 文章标签： big data javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TWenYuan/article/details/120782027
版权

验证form表单的内容是否已存在数据库

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    :show-close="false"
    :lock-scroll="false"
  >
    <dv-border-box-10
      ref="dv"
      :backgroundColor="chartBackgroundColor"
      :color="['white', 'white']"
    >
      <div style="padding: 30px; margin: 0px 30px">
        <i class="el-icon-close" @click="cancel"></i>
        <el-form :model="form" ref="form" label-width="160px" :rules="rules">
          <div class="title">
            隧道配置
            <el-form-item label="源设备" prop="sourceId">
              <el-select
                v-model="value1"
                placeholder="请选择"
                @change="change1"
              >
                <el-option
                  v-for="item in sourceId"
                  :key="item['res-id']"
                  :label="item.name"
                  :value="item['res-id']"
                  :disabled="item['res-id'] === value2"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <hr />
            <el-row>
              <el-form-item label="源端点IP类型" prop="IPtype">
                <el-input v-model="value" type="text"></el-input>
                <!-- <el-select v-model="value" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
              <el-form-item label="源端点IP地址" prop="ipname">
                <el-input v-model="ipname1"></el-input>
              </el-form-item>
            </el-row>

            <hr />
            <el-form-item label="目的设备" prop="destinationId">
              <el-select
                v-model="value2"
                placeholder="请选择"
                @change="change2"
              >
                <el-option
                  v-for="item in destinationId"
                  :key="item['res-id']"
                  :label="item.name"
                  :value="item['res-id']"
                  :disabled="item['res-id'] === value1"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <hr />
            <el-row>
              <el-form-item label="目的节点IP类型" prop="IPtype">
                <el-input v-model="value" type="text"></el-input>
                <!-- <el-select v-model="value3" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
              <el-form-item label="目的节点IP地址" prop="sourceIp2">
                <el-input v-model="ipname2"></el-input>
              </el-form-item>
            </el-row>
            <hr />
            <el-form-item label="自动生成隧道名称">
              <el-input v-model="appName" disabled></el-input>
            </el-form-item>
            <el-form-item label="隧道ID" prop="destNode">
              <el-input v-model="destNode"></el-input>
            </el-form-item>
            <el-form-item label="隧道别名" prop="othername">
              <el-input v-model="othername"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="text">
              <el-input v-model="text"></el-input>
            </el-form-item>
          </div>
          <hr />
        </el-form>

        <!--    按钮-->
        <el-row>
          <el-col :span="2" :offset="9">
            <el-button type="primary" style="width: 100%" @click="submit"
              >创建</el-button
            >
          </el-col>
          <el-col :span="2" :offset="2">
            <el-button style="width: 100%" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-10>
  </el-dialog>
</template>

<script>
import guid from "../../../utils/guid";
import formatter from "../../../utils/formatter";
import apis from "../../../apis";

export default {
  name: "Tunnel",
  data() {
    return {
      // 表单
      form: {
        "tunnel-id": "",
        "tunnel-number": "",
        "tunnel-name": "",
        "tunnel-alis-name": "",
        description: "",
        createTime: "",
        updateTime: "",
        "mpls-te-tunnel-id": "",
        "source-point": {
          "src-node-id": "",
          "node-name": "",
          "point-ip": "",
          "point-ip-family": "",
          "point-mask": "",
        },
        "destination-point": {
          "src-node-id": "",
          "node-name": "",
          "point-ip": "",
          "point-ip-family": "",
          "point-mask": "",
        },
      },
      mask1: "",
      mask2: "",
      text: "",
      othername: "",
      destNode: "",
      value1: "",
      appName: "",
      sourceId: [],
      newNode: [],
      destinationId: [],
      value2: "",
      value: "IPv4",
      value3: "",
      sourceIp1: "",
      sourceIp2: "",
      ipname1: "",
      ipname2: "",
      nodename1: "",
      nodename2: "",
      options: [
        {
          value: "IPv4",
          label: "",
        },
      ],
      dialogVisible: false,
      rendered: false,
      chartBackgroundColor: "rgba(0,0,0,0.7)",

      // 检查规则
      rules: {
        // destNode: [{ required: true, message: "请输入隧道ID" }],
      },
    };
  },
  computed: {
    node() {
      return this.$store.getters.node;
    },
    nodeEnable() {
      return this.$store.getters.nodeEnable;
    },
    tunnel() {
      return this.$store.getters.tunnel;
    },
  },
  watch: {
    node(_new) {
      this.sourceId = _new;
      this.destinationId = _new;
      console.log(this.sourceId);
    },
    tunnel(_new) {
      this.oldtunnel = _new;
      console.log(this.oldtunnel);
    },
  },

  methods: {
    // 提交
    submit(value) {
      //发起请求前进行内容检查
      this.$refs.form.validate((valid) => {
        if (valid) {

          this.form["tunnel-id"] = this.form["tunnel-id"] ? this.form["tunnel-id"] : guid.createGuid();
          this.form.createTime = formatter.date(new Date());
          this.form.updateTime = formatter.date(new Date());
          this.form["tunnel-number"] = parseInt(this.destNode);
          this.form["mpls-te-tunnel-id"] = parseInt(this.destNode);
          this.form["tunnel-name"] = this.appName;
          this.form["tunnel-alis-name"] = this.othername;
          this.form["description"] = this.text;
          this.form["destination-point"]["node-name"] = this.nodename2;
          this.form["destination-point"]["point-ip-family"] = this.value;
          this.form["destination-point"]["point-ip"] = this.ipname2;
          this.form["destination-point"]["src-node-id"] = this.value2;
          this.form["destination-point"]["point-mask"] = this.mask2;
          this.form["source-point"]["node-name"] = this.nodename1;
          this.form["source-point"]["point-ip-family"] = this.value3;
          this.form["source-point"]["point-ip"] = this.ipname1;
          this.form["source-point"]["src-node-id"] = this.value1;
          this.form["source-point"]["point-mask"] = this.mask1;
          let southData = JSON.parse(JSON.stringify(this.form));
          
          //方法一：用遍历find（）命令找到符合条件的元素
          // this.tunnel === this.$store.getters.tunnel === this.oldtunnel
          // let tar = this.tunnel.find(t => t['tunnel-name'] === this.form['tunnel-name'])
          // if (tar) {
                      //如果获取到的数据库中的this.tunnel的['tunnel-name']与准备提交的this.form['tunnel-name']相同，则不进行提交下发，如果不是，进行下一步的提交
          //   // 重复
          //   this.$message.warning("已存在相同隧道");
          // } else {
          //   // 不重复
          //   apis
          //     .getNodeSsh(this.form["source-point"]["src-node-id"])
          //     .then((res) => {
          //       // 获取源设备ssh
          //       let ssh = res.data.server[0];
          //       southData["ssh-connect"] = {
          //         ip: ssh.ip,
          //         port: ssh.port,
          //         ipFamily: ssh["ip-family"],
          //         userName: ssh["current-ssh-user"].userName,
          //         password: ssh["current-ssh-user"].password,
          //         encryptType: ssh["current-ssh-user"].encryptType,
          //       };

          //       this.$axios
          //         .all([
          //           apis.updateTunnel(this.form["tunnel-id"], {
          //             tunnel: this.form,
          //           }),
          //           apis.updateTunnelSouth({ tunnels: [southData] }),
          //         ])
          //         .then(
          //           this.$axios.spread((res, resSouth) => {
          //             apis.getTunnel().then((res) => {
          //               this.$store.commit(
          //                 "updateTunnel",
          //                 res.data["tunnel-config"].tunnel
          //               );
          //               this.cancel();
          //               this.reset();
          //               this.$message.success("创建成功");
          //             });
          //           })
          //         )
          //         .catch((err) => {
          //           if (err.response) {
          //             this.$message.error(
          //               err.response.status + " " + err.response.statusText
          //             );
          //           } else {
          //             this.$message.error("Timeout");
          //           }
          //         });
          //     });
          // }
          // }


          //方法二：用for（）循环遍历
          //首先定义一个标识符：flag    flag的值只有true和false
        let flag = false;

        for (let i = 0; i < this.oldtunnel.length; i++) {
        //如果有重复，则标识为真，命令不再进行下去
          if (this.oldtunnel[i]["tunnel-name"] === this.form["tunnel-name"]) {
            flag = true;
            break;
          }
        }
        //如果标识为真，弹出警告信息，否则进行下面的命令
        if (flag) {
          // 重复
          this.$message.warning("已存在相同隧道");
        } else {
          // 不重复
            apis
              .getNodeSsh(this.form["source-point"]["src-node-id"])
              .then((res) => {
                // 获取源设备ssh
                let ssh = res.data.server[0];
                southData["ssh-connect"] = {
                  ip: ssh.ip,
                  port: ssh.port,
                  ipFamily: ssh["ip-family"],
                  userName: ssh["current-ssh-user"].userName,
                  password: ssh["current-ssh-user"].password,
                  encryptType: ssh["current-ssh-user"].encryptType,
                };

                this.$axios
                  .all([
                    apis.updateTunnel(this.form["tunnel-id"], {
                      tunnel: this.form,
                    }),
                    apis.updateTunnelSouth({ tunnels: [southData] }),
                  ])
                  .then(
                    this.$axios.spread((res, resSouth) => {
                      apis.getTunnel().then((res) => {
                        this.$store.commit(
                          "updateTunnel",
                          res.data["tunnel-config"].tunnel
                        );
                        this.cancel();
                        this.reset();
                        this.$message.success("创建成功");
                      });
                    })
                  )
                  .catch((err) => {
                    if (err.response) {
                      this.$message.error(
                        err.response.status + " " + err.response.statusText
                      );
                    } else {
                      this.$message.error("Timeout");
                    }
                  });
              });
          }
        }
      });
    },
    // 重置
    reset() {
      this.value1 = "";
      this.value = "";
      this.ipname1 = "";
      this.value2 = "";
      this.value3 = "";
      this.ipname2 = "";
      this.appName = "";
      this.destNode = "";
      this.othername = "";
      this.text = "";
      this.$refs.form.resetFields();
    },
    show() {
      this.dialogVisible = true;
      if (this.rendered) {
        this.$refs.dv.initWH();
      }
      this.rendered = true;
    },
    cancel() {
      this.dialogVisible = false;
      this.reset();
    },
    change1(value) {
      let tar = this.nodeEnable.find((element) => element["node-id"] === value);
      // console.log(tar);
      if (tar) {
        this.nodename1 = this.node.find(
          (element) => element["res-id"] === value
        ).name;
        this.ipname1 = tar["default-virtual-intf"].ip;
        this.appName =
          this.nodename1 +
          "@" +
          this.ipname1 +
          "=" +
          this.nodename2 +
          "@" +
          this.ipname2;
        this.mask1 = tar["default-virtual-intf"].mask;
      } else {
        console.log("配置未找到");
      }
    },
    change2(value) {
      let tar = this.nodeEnable.find((element) => element["node-id"] === value);
      if (tar) {
        this.nodename2 = this.node.find(
          (element) => element["res-id"] === value
        ).name;
        this.ipname2 = tar["default-virtual-intf"].ip;
        this.appName =
          this.nodename1 +
          "@" +
          this.ipname1 +
          "=" +
          this.nodename2 +
          "@" +
          this.ipname2;
        this.mask2 = tar["default-virtual-intf"].mask;
      } else {
        console.log("配置未找到");
      }
    },

    //  change3(){
    //    let tar = this.oldtunnel.find((element)=>element['tunnel-name'] !== this.appName)
    //    if(tar){
    //        this.submit()
    //    }else{
    //      console.log('一样');
    //    }
    //  }
  },
};
</script>

<style scoped>
.title {
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 24px !important;
  font-weight: bold !important;
}

.el-icon-close {
  position: absolute;
  right: 30px;
  font-size: 16px;
  cursor: pointer;
}

.el-col-12 {
  width: 90%;
}

.el-input {
  width: 350px;
}

/deep/ .el-dialog {
  background-color: transparent;
}

/deep/ .el-dialog__body {
  padding: 0;
  background-color: transparent;
}

/deep/ .el-tabs__item {
  font-size: 24px !important;
}

/deep/ .el-input__inner {
  background-color: transparent !important;
}

/deep/ .el-textarea__inner {
  background-color: transparent !important;
}
</style>
TWenYuan
关注
专栏目录
el-form自定义表单验证 +离开页面前判断数据是否改动并提示
EnidChann的博客
11-11 2454
实现原理: 1.判断页面是否有数据改动, 可以在watch方法中深度监听form这个对象是否有改动. (这里要注意, isDataChangeCount之所以用Number来判断变化次数, 是因为页面加载完时, form会出现一次数据变化, 因此只用true和false来判断是不准确的) 2.在beforeRouteLeave方法里进行对isDataChangeCount的判断,进而实现对应的提示和操作 一个常规的表单验证 export default { data () { // 在这里声.
vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
weixin_40001967的博客
11-22 363
点击右上方红色按钮关注“web秀”，让你真正秀起来前言表单校验，在开发中是非常常见的，为了防止用户误操作，填写错误数据，亦或是防止用户恶意提交数据等，都需要前端同学来做一些简单的表单校验，虽然只是用来防君子的。今天就为大家推荐一款Vue表单校验插件：Vuerify。Vue表单校验插件Vuerify使用详细教程及示例什么是Vuerify？Vuerify 是一款轻量级的数据校验 Vue 插件，同时支持...
表单验证数据库数据是否存在
whoops_giggle的博客
04-10 404
var flag =true .ajax(url:"chaoke.do?method=isExit",dataType:"json",async:false,data:chaokeId:chaokeId1,beforeSend:function(),success:function(data)console.log(data);if(data.exit==false)flag=false;pare...
elemeng-ui 中el-form 表单如何校验
这可不是一般的博客，这是王维诗里的博客
06-07 438
elemeng-ui 中el-form 表单如何校验 为甚么要校验 表单校验可以提醒用户填写数据规则以确保用户提交数据的有效性，也可以防止用户因误操作、填写错误数据或者而已提交数据而占用服务器资源 Element UI校验规则 Element UI封装了组件el-form来收集、校验和提交数据，其中rules属性就是用来做数据校验的。Element UI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验，根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出messag
vue验证表中内容是否存在
weixin_50328560的博客
01-14 775
验证表中内容是否存在 data(){ rules: [ { required: true, message: '请输入供应商编码', trigger: 'blur' }, { max: 20, message: '最大长度在20个字符', trigger: 'blur' }, { validator: this.validatorCode, trigger: 'blur' } ] }, } 编码检查 // 编码检查 async val
Python代码源码-实操案例-框架案例-如何使用WTForms验证Form表单中的字段.zip
最新发布
02-22
这个压缩包文件"Python代码源码-实操案例-框架案例-如何使用WTForms验证Form表单中的字段.zip"显然是为了展示如何在实际项目中运用WTForms来验证表单字段，帮助开发者理解并掌握这一技术。下面我们将详细讨论WTForms...
Form-validation-using-[removed]使用JavaScript验证表单字段。检索值没有什么关系，数据库存储任务是验证所有表单字段
03-18
`validateForm()`函数将检查每个字段是否满足预设的验证规则。这些规则可能包括非空检查、长度限制、格式验证（如电子邮件或电话号码）等。以下是一个简单的验证示例： ```javascript function validateForm() { ...
Web开发-如何使用WTForms验证Form表单中的字段-Python实例源码.zip
12-13
本实例将详细讲解如何使用WTForms来验证Form表单中的字段，帮助你更好地理解和应用这一工具。 首先，你需要安装WTForms库。在命令行中输入以下命令进行安装： ```bash pip install WTForms ``` 安装完成后，可以...
自定义Django Form中choicefield下拉菜单选取数据库内容实例
09-17
在Django中，Form是处理用户输入数据的重要工具，它允许开发者自定义表单的结构、验证规则以及渲染方式。本篇文章将详细讲解如何在Django Form中自定义`ChoiceField`，使其下拉菜单的选项从数据库中动态获取。 首先...
利用ajax提交form表单到数据库详解(无刷新)
12-12
在本篇内容中，我们将详细探讨如何利用Ajax提交HTML表单到数据库，实现无刷新的交互体验。 传统的HTML表单提交方式是通过`<form>`元素的`action`属性指定处理表单数据的服务器端脚本，如PHP，然后通过`method`属性...
判断form表单里面的元素属性是否有数据_Flask表单验证
weixin_39630771的博客
11-30 603
wtf WTForms 1.什么是WTFormsWeb 网页一个重要的功能就是和客户端用户进行交互.在前端HTML 提供了一个form 标签,它是用于提供数据交互的接口.form 可以采用GET和POST 方式以Http请求消息的形式提交给后端服务器脚本(一般都是POST).在后端服务器基本必须捕捉用于提交的form 并做出验证判断.所以后端也相当于从新创建了表单.WTForms 提供了...
el-form表单项在添加前判断是否名称已存在
m0_46404694的博客
02-26 496
el-form表单项唯一 <el-form-item label="项目名称" prop="programName" v-if="crud.status.title.indexOf('新增') != -1" > <el-input v-model="form.programName" style="width: 300px" /> </el-
form表单调接口校验 比如后台验证用户名是否存在
LJJONESEED的博客
11-07 439
情景：输入用户名，判断用户名是否存在。
表单值是否存在，如果存在，则弹出信息，否则阻止表单提交 且不能为空格
mo19880126的博客
11-22 298
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script&gt; function validateForm() {     var x = document.forms["myForm"]["fname"].value;     if(x.indexO
form 提交验证数据库是否存在
weixin_42100915的博客
06-20 2267
第一种方式修改原码方式代码：def ajax(request): if request.method == 'GET': obj = forms.UserForm() return render(request,'ajax.html',{'obj':obj}) else: ret = {'status':False,'message'...
Django-组件拾遗
achen1112的博客
03-30 151
一 Django的model form组件 这是一个神奇的组件，通过名字我们可以看出来，这个组件的功能就是把model和form组合起来，先来一个简单的例子来看一下这个东西怎么用：比如我们的数据库中有这样一张学生表，字段有姓名，年龄，爱好，邮箱，电话，住址，注册时间等等一大堆信息，现在让你写一个创建学生的页面，你的后台应该怎么写呢？首先我们会在前端一个一个罗列出这些字段，让用户去填写，...
四【用django2.0来开发】后台会员管理(二) ModelForm表单的使用方法以及数据验证...
weixin_34337265的博客
10-31 456
上一节我们讲完了ModelAdmin的使用, 但是在操作中也发现, 新增编辑会员时, 我们无法验证数据是否正确, 比如 用户名、手机号、邮箱都应该是唯一的 用户名和密码长度的验证 编辑用户信息时不填写密码则不更新密码, 填写了则更新密码 自定义验证不通过的文案... 这些要求, 我们就必须得使用自定义的表单来完成了 项目地址:https://gitee.com/ccnv07/django_ex...
elementUI from表单必填项已有值但是提示信息还在
zhengyun1568的博客
11-18 6342
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-it
elementUI——el-form表单数据校验（包含数组循环）
weixin_42289080的博客
05-11 9278
prop需要对应到表单数据的具体的key，数组可通过索引锁定
django-ajax-form-validator实现Django表单内联验证教程
资源摘要信息:"django-ajax-form-validator是一个利用Django框架实现的表单验证功能，该项目的目的是在不复制逻辑到JavaScript的情况下，通过Ajax进行表单验证。AjaxFormView类位于src/core/mixins.py文件中，继承自...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值