elementUI表单验证非常方便,我们直奔主题:

<template>
<el-form ref="orderForm" :model="orderForm" :rules="addRules" label-width="100px">
<el-form-item label="联系人:" prop="contact">
<el-input v-model="orderForm.contact" type="text" placeholder="请输入联系人名称"></el-input>
</el-form-item>
<el-form-item label="联系电话:" prop="phone">
<el-input v-model="orderForm.phone" type="text" placeholder="请输入联系电话"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
let validateContact = (rules, value, callback) => {
if (value === '') {
callback(new Error('请输入联系人姓名'));
} else {
// 中文或英文、数字正则
let regExpr = /^[a-zA-Z0-9 \u4e00-\u9fa5]+$/;
if(!regExpr.test(value)){
callback(new Error('联系人输入不正确'));
} else if(value && value.trim().length>30) {
callback(new Error('长度超出限制'));
} else {
this.correct = true; // 标记contact是否校验通过
callback();
}
}
};
let validPhone = (rules, value, callback) => {
if (value === '') {
callback(new Error('请输入手机号'));
} else {
if(value){
value = value.trim();
}
let TEL_REGEXP = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
if(TEL_REGEXP.test(value)) {
callback(new Error('手机号格式不正确'));
} else {
this.phoneCorrect = true; // 标记手机号码校验正确
callback();
}
}
};
return {
orderForm: {
contact: "",
phone: "",
},
addRules: {
contact: [{ required: true, validator: validateContact, trigger: 'blur'}],
phone: [{required: true, validator: validPhone, trigger: 'blur'}],
},
correct: false, // 校验是否正确
phoneCorrect: false, // 校验手机号码是否正确
}
}
}
</script>

1、验证表单中的某个字段:

// 验证contact字段
this.$refs.orderForm.validateField("contact", () => {
console.log(this.correct);
});
// 验证phone字段
this.$refs.orderForm.validateField("phone", () => {
console.log(this.phoneCorrect);
});

2、验证整个表单:(在提交订单前验证)

this.$refs.orderForm.validate(function (valid){
if(valid){
// TO DO
}
});

3、表单重置:

this.$refs.orderForm.resetFields();

elementUI表单验证的更多相关文章

  1. ElementUI表单验证使用

    1.设计校验方式: 我们表单验证的rules一般封装一个单独的js文件,比如我之前写的这个博客: ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证 可以修改下:公共的校验 ...

  2. element-ui表单验证(电话,邮箱)

    element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...

  3. ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题

    试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...

  4. ElementUi 表单验证失败后 页面滚动到表单验证失败位置

    1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...

  5. element-UI表单验证

    转载自: 一.简单逻辑验证(直接使用rules) 实现思路 •html中给el-form增加 :rules="rules"•html中在el-form-item 中增加属性 pro ...

  6. element-ui表单验证无效解决

    最近在项目中遇到了一个需求,需要动态增减表单元素,同时给新增的表单元素增加校验规则. element-ui官网给出了解决方案:点击新增按钮时,向循环渲染的数组中push新的对象,数据驱动视图,通过增加 ...

  7. 关于element-ui表单验证(自定义验证规则)

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-widt ...

  8. Element-UI 表单验证规则rules 配置参数说明

    官方文档 : https://github.com/yiminghe/async-validator

  9. ElementUi rules表单验证

    ElementUi 表单验证 工作中常用到的JS验证 可以在pattern中书写正则,并且配合elementUI进行表单验证. pattern 属性规定用于验证输入字段的模式.模式指的是正则表达式. ...

随机推荐

  1. IDEA使用本机指定的java环境

    IDEA使用本机指定的java环境     原文链接:https://my.oschina.net/ElEGenT/blog/3053147 idea 的安装包内有自己的jre. idea 默认使用自 ...

  2. IDEA Git 修改后的文件无法Commit

    转自:https://blog.csdn.net/moneyshi/article/details/81298861 因对IDEA使用不熟,在使用和配置GIT的时候,可能哪里配置错误,导致我一直无法使 ...

  3. Spring cloud微服务安全实战-5-8实现基于session的SSO(认证服务器的session有效期)

    认证服务器 session的有效期. 也就是认证服务器上的session的有效期 生成环境下,认证服务器一定是一个集群.集群.那么session一定是要在所有的服务器之间进行共享的.最简单的方式是用S ...

  4. 安卓 android studio 报错 Unknown host 'jcenter.bintray.com'. You may need to adjust the proxy settings in Gradle.

    报错截图: 问题原因:因为build.gradle中jcenter()或者maven()被墙了,所以会出现这种情况. 解决方案:(我的gradle版本是:classpath 'com.android. ...

  5. python 判断文件是否存在和删除文件的api (其中判断文件在不在让想起这个可以强兼容jenkins工作目录那个问题)

    判断文件在不在的api: os即operating system(操作系统),Python 的 os 模块封装了常见的文件和目录操作. os.path模块主要用于文件的属性获取,exists是“存在” ...

  6. 使用Commons math做数值计算

    使用Commons math做数值计算 觉得有用的话,欢迎一起讨论相互学习~Follow Me 最近使用jmetal做多目标的时候,想用一些简单的方法求最大值最小值方差和协方差矩阵,但是原生代码真的是 ...

  7. Game and Application Protocol

    This privacy policy details the information collected by the team ("we" or "our" ...

  8. 一秒解决--------No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?

    在打war包时候遇到错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.6.0:compile (d ...

  9. iOS 多线程的简单理解(2) 队列 :串行 ,并行,MainQueue,GlobalQueue

    多线程队列是装载线程任务的队形结构.(系统以先进先出的方式调度队列中的任务执行 FIFO).在GCD中有两种队列: 串行队列.并发队列. 队列 :串行队列.并发队列,全局主对列,全局并发队列 2.1. ...

  10. colaboratory安装指定版本的tensorflow

    查看当前安装的tensorflow版本 !pip show tensorflow 安装指定版本 !pip install tensorflow==2.0 这速度,香不香.