vue -结合ElementUI和validate的表单验证

半开半落

已于 2022-04-21 16:30:30 修改

阅读量1.4k

点赞数

分类专栏：前端文章标签： javascript vue.js 大前端

于 2022-04-21 15:56:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44418100/article/details/124323371

版权

前端专栏收录该内容

35 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue.js应用中创建一个用于添加和修改客户配置的对话框，包括使用内置验证和自定义验证方法进行表单数据的校验。通过示例展示了如何定义验证规则、实现自定义的手机号验证，并提供了提交表单时的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写一个新增和修改共用的对话框,里面写表单

<!-- 添加或修改客户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" status-icon label-width="80px">
    <el-form-item label="客户名称" prop="client_name">
      <el-input v-model="form.client_name" placeholder="请输入客户名称" />
    </el-form-item>
    <el-form-item label="联系人" prop="man">
      <el-input v-model="form.man" placeholder="请输入联系人" />
    </el-form-item>
    <el-form-item label="电话" prop="phone">
     <el-input v-model.number="form.phone" placeholder="请输入电话" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

data(){return中写验证规则}:part1:普通验证

// 表单校验
rules: {
  client_name: [
    { required: true, message: "客户名称不能为空", trigger: "blur" }
  ],
  man: [
    { required: true, message: "联系人不能为空", trigger: "blur" }
  ],
  phone: [
    { required: true, message: "电话不能为空", trigger: "blur" }
  ]
}

part2:自定义表单验证

以校验手机号为例 data里写入validatephone的自定义校验方法

其中getTel方法为验证手机号地正则:

export function getTel(str) {
  const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  return reg.test(str);
}

data() {
  var validatephone = (rule, value, callback) => {
    if (!value) {
      return callback(new Error("电话不能为空"));
    }
    setTimeout(() => {
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        console.log(getTel(value));
        if (getTel(value) == false) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    }, 500);
  };
  return {...}
  }

return中的rules规则里用validator调用刚才在data中定义好方法对象validatephone

// 表单校验
rules: {
  client_name: [
    { required: true, message: "客户名称不能为空", trigger: "blur" }
  ],
  man: [
    { required: true, message: "联系人不能为空", trigger: "blur" }
  ],
  phone: [
    { required: true, validator: validatephone, trigger: "blur" }
  ]
}

methods中写提交的方法

submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          alert("提交调用新增的方法");
        } else {
          return false;
        }
      });
  }