elementUI中 form表单自定义验证方法

news/2024/7/10 0:27:58 标签: vue, elementui

一、在form表单中经常去验证一些内容,有的是只比较简单的一些提示,有的则是需要自定义,实现方法如下:

<template>
<el-form :model="ruleForm2" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
  <el-form-item label="类型名称" prop="drinkCategoryName">
    <el-input v-model="dataForm.drinkCategoryName" placeholder="请输入饮品类型名称"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
	<el-input v-model.number="ruleForm2.age"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      //判断类型名称是否重复
      var validatePass = (rule, value, callback) => {
        let params = {
          name: value
        }
        this.$api.get(url),params).then(res => {
          if(res && res.data.code === 0){
            callback() //验证通过
          }else{
           callback(new Error('名称不能重复哦~')) //没有验证通过
          }
        })
      }
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          drinkCategoryName: '',
          pass: '',
          checkPass: '',
          age: ''
        },
        dataRule: {
          drinkCategoryName: [
            { required: true, message: '类型名称不能为空', trigger: 'blur' },
            { validator:validatePass,trigger:'blur'}
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
    // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.getInit()
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }
	}
  }
</script>

需要注意的是:
①、定义form表单中的对象变量 :model
②、如果需要验证的话在表单中定义验证对象以及验证规则 :rules
③、如果定义了验证某个字段需要验证的话,需要在el-form-item中定义prop对应的字段名
④、如果是自定义验证规则需要在data里面去定义


http://www.niftyadmin.cn/n/1770321.html

相关文章

elementUi 按钮点击之后取消状态

elementUi 中的按钮&#xff0c;点击操作之后按钮的状态会一直存在&#xff0c;如果想要取消的话就手动触发一下&#xff0c;如下&#xff1a; let target evt.target; if(target.nodeName "SPAN"){target evt.target.parentNode;}target.blur();点击的时候去执行…

ElementUI Message提醒框点击多次只显示一个

点击按钮message提示&#xff0c;点击多次就会出现多个&#xff0c;这个时候需要手动去关闭一下message所有的实例&#xff0c;如下&#xff1a; this.$message.closeAll(); //手动关闭所有实例 this.$message({message: 您还没有选中哦~,type: warning });

vue 项目build后背景图路径不对的问题

1、用css写背景图样式是以相对路径来写的 .details-share{position: fixed;top: 0;left: 0;width: 100%;height: 114px;background: url("../assets/images/share.png");background-size: 100%; }当使用npm run dev命令本地访问的时候&#xff0c;背景图片是正常显示…

uni-app 封装uni.request

1、首先建立一个文件夹&#xff0c;然后新建一个api.js&#xff0c;js中这样来定义&#xff0c;如下&#xff1a; //const baseUrl http://XXXX.com const request (url , date {}, type GET, header { }) > {return new Promise((resolve, reject) > {uni.req…

Ajax之同步请求和异步请求的区别?使用场景?

一、区别 ①、异步&#xff1a; 在异步模式下&#xff0c;当我们使用AJAX发送完请求后&#xff0c;可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求&#xff0c;但是因为我们采用了异步执行方式&#xff0c;所有包含AJAX请求代码的函数中的剩余…

uni-app 中将改成异步请求同步化操作

在uni-app中&#xff0c;uni.request等许多接口都是异步的&#xff0c;有时候需要等接口返回数据后在执行下一步的操作&#xff0c;这个时候我们就用到了异步请求同步化操作。 解决方法&#xff1a; 总体思路就是使用async await&#xff0c;使异步问题同步化。需要 注意 的…

JSON.parse() 和 JSON.stringify()的用法

1、JSON.parse()用于将字符串解析成json对象&#xff1a;如下 2、JSON.stringify()用于将对象解析成字符串&#xff1a;如下&#xff1a;

vue+elementUI el-form 查询导致页面刷新

1、列表点击查询条件返回具体的内容&#xff0c;当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新&#xff0c;并没有去查询&#xff0c;很是费解&#xff0c;其他页面就没有这种情况&#xff0c;然而最后发现导致问题发生的原因竟是当表单只有一个文本框时&#xff…