账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui中的验证规则改为点击提交进行验证
    26
    0

    现在的是input中会根据事件change去不停请求数据,要改为点击提交按钮再去请求数据,我把trigger中的change换成了blur,点击提交,如果信息重复能正确提示,但是如果信息是不重复的,需要点击两次提交才能正确的进行后面的操作(分析原因:第一次点击提交的时候,是让input失去焦点),不符合需求,卡了好久不知道怎么改。

    <el-dialog title="提交并保存为素材" width="30%" :visible.sync="dialog.dialogFormVisible">
          <el-form :model="dialog" ref="dialogForm" size="small" :rules="dialog.rules" @submit.native.prevent>
            <el-form-item label="页面素材名称" prop="name">
              <el-input :maxlength="20" v-model="dialog.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitMater">提交</el-button>
            <el-button size="small" @click="dialog.dialogFormVisible = false">取消</el-button>
          </div>
        </el-dialog>

    data() {
          let sendFlag = 0;
          let checkDialogForm = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('素材名称不能为空'));
            }
            this.materialname = value;
            let postData = Object.assign({}, this.postUser, {
              'materialname': value
            });
            if (sendFlag === 0) {
              sendFlag = 1;
              checkModularNameApi(postData)
                .then((res) => {
                  sendFlag = 0;
                  if (res.data.result === 0) {
                    callback();
                  } else {
                    callback(new Error(res.data.message));
                  }
                })
                .catch(() => {
                  sendFlag = 0;
                })
            }
          };
          return {
            noticeFlag: false,
            showNotice: false,
            txtIndex: 0,
            picIndex: 0,
            btnIndex: 0,
            dialog: {
              dialogFormVisible: false,
              dialogCancelVisible: false,
              name: '',
              rules: {
                name: [
                  {max: 20, message: '长度在20个字符以内', trigger: 'blur'},
                  {message: '不允许输入特殊字符(\'"\\)', trigger: 'blur', pattern: /^[^'"\\]+$/g},
                  {validator: checkDialogForm, trigger: 'blur'}
                ]
              }
            },

    提交的函数

     submitMater() {
              checkDialogForm();
            this.$refs['dialogForm'].validate((valid) => {
              if (valid) {
                this.dialog.dialogFormVisible = false;
                //提交并保存为素材
                let postData = Object.assign({}, this.postUser, {
                  "templateid": this.templateid,
                  'materialname': this.materialname,
                  'pvendorid': this.product.pvendorid,
                  'prstypeid': this.product.prstypeid,
                  'userid': this.product.userid,
                  'modules': this.list,
                  'id': this.submitid,
                  'wxShare': this.wxShare,
                  'savetime': this.savetime,
                  'ccodecheckpop': this.ccodecheckpop,
                  'wxAppCheckResult': this.checkresultlist
                });
                if (this.submitstatus === 'detail') {
                  updateMaterialApi(postData)
                    .then((res) => {
                      if (res.data.result === 0) {
                        this.$router.push(`/productlist/${this.product.pvendorid}`)
                      } else {
                        this.$message({
                          message: res.data.message,
                          type: 'error'
                        });
                      }
                    })
                    .catch((err) => {
                      this.$message({
                        message: err,
                        type: 'error'
                      });
                    });
                } else {
                  addMaterialApi(postData)
                    .then((res) => {
                      if (res.data.result === 0) {
                        this.$router.push(`/productlist/${this.product.pvendorid}`)
                      } else {
                        this.$message({
                          message: res.data.message,
                          type: 'error'
                        });
                      }
                    })
                    .catch((err) => {
                      this.$message({
                        message: err,
                        type: 'error'
                      });
                    });
                }
              } else {
                return false;
              }
            });
          }

    求帮助QAQ

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益