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

element-ui Form表单验证

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

这个表单里还加入了一下其他组件配合使用,这里为了简洁,就不放那么多代码,如果你刚好有用到其他功能的可以留言发其他功能的源码

// 这是HTML部分
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
    <el-form-item label="联系电话:" prop="buyerPhone" required>
        <el-input v-model="ruleForm.buyerPhone"></el-input>
    </el-form-item>
    <el-form-item label="Email:" prop="buyerEmail" required>
        <el-input v-model="ruleForm.buyerEmail"></el-input>
    </el-form-item>
</el-form>
// 这是js部分
data () {
  var checkPhone = (rule, value, callback) => {
    const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
    if (!value) {
      return callback(new Error(‘电话号码不能为空‘))
    }
    setTimeout(() => {
      // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
      // 所以我就在前面加了一个+实现隐式转换

      if (!Number.isInteger(+value)) {
        callback(new Error(‘请输入数字值‘))
      } else {
        if (phoneReg.test(value)) {
          callback()
        } else {
          callback(new Error(‘电话号码格式不正确‘))
        }
      }
    }, 100)
  }
  var checkEmail = (rule, value, callback) => {
    const mailReg = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    if (!value) {
      return callback(new Error(‘邮箱不能为空‘))
    }
    setTimeout(() => {
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error(‘请输入正确的邮箱格式‘))
      }
    }, 100)
  }
return {
  ruleForm: {
    buyerPhone: 13833334444,
    buyerEmail: ‘[email protected]‘
  },
  rules: {
    buyerPhone: [
      { validator: checkPhone, trigger: ‘blur‘ }
    ],
    buyerEmail: [
      { validator: checkEmail, trigger: ‘blur‘ }
    ]
  }
}

原文地址:https://www.cnblogs.com/steamed-twisted-roll/p/9214745.html

时间: 2024-10-07 07:59:39

element-ui表单验证(电话,邮箱)的相关文章

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat

[Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model="editform" 不能使用v-model="editform"), 同时v-model="multipleSelectionStudent" 的multipleSelectionStudent一定一定一定要在editform对象中, 而例子中v-model=

vue开源Element UI表单设计及代码生成器

在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库   https://github.com/JakHuang/form-generator 码云仓库  https://gitee.com/mrhj/form-generator 演示地址 https://mrhj.gitee

(vue.js)element ui 表单重置

el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :model="addServiceData" ref="addServiceForm"> <el-form-item label="手机号" prop="mobile"> <el-input v-model=&

jquery validate强大的jquery表单验证插件

jquery.validate.js使用之自定义表单验证规则 //邮箱 表单验证规则 jQuery.validator.addMethod("mail", function (value, element) { var mail = /^[a-z0-9._%-][email protected]([a-z0-9-]+\.)+[a-z]{2,4}$/; return this.optional(element) || (mail.test(value)); }, "邮箱格式不对

表单 验证,手机 ,QQ,电子邮箱,数字,邮政编码,身份证,手机号 &amp; 电话

好吧写一个自己的表单验证,临时的. 后面还更新:现在依赖jq //表单验证 function testInput(o,attr,yfn,nfn,run){ var re = { 'age' :/^[^0]\d{0,2}$/, 'null' :/\s/, 'qq' : /^[1-9][0-9]{4,9}$/, //QQ 'email' : /^\[email protected][a-z0-9]+(\.[a-z]+){1,3}$/, //电子邮箱 'number': /^\d+$/, //数字 '

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option

amaze UI 如何添加原生表单验证

这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是amaze的 事例太少了,导致入坑,下面把我的解决方法分享给大家 正常情况下载添加amaze验证很简单,在form 后面添加 data-am-validator form id="doc-vldX" action="" class="am-form" da

表单验证-邮箱验证

邮箱验证 1.使用function函数实现 注:需要在代码<input>的标签中加入属性:onblur="loginEmailBlur(this.value)" function loginEmailBlur(strEmail) { var loginEmail = $.trim($("input[name='email']").val()); if (loginEmail == null || loginEmail == '邮箱' || loginEm