VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）

步骤：

封装验证规则：

export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/return reg.test(phone)
}

表单中定义验证：

     <el-dialog title="新增用户" :visible.sync="dialogFormVisible"><el-form ref="ruleForm" :inline="true" :model="form" :rules="rules" size="small"><el-form-item label="电话" prop="phone"><el-input v-model.number="form.phone" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button size="mini" @click="dialogFormVisible = false">取 消</el-button><el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button></div></el-dialog>

组件中引入封装好的验证规则：

import { isvalidPhone } from '@/utils/validate'

自定义验证：

data() {// 自定义验证const validPhone = (rule, value, callback) => {if (!value) {callback(new Error('请输入电话号码'))} else if (!isvalidPhone(value)) { //判断用户输入的值是否符合规则callback(new Error('请输入正确的11位手机号码'))} else {callback()}}return {dialogFormVisible: false,form: {phone: null},rules: {phone: [{ required: true, trigger: 'blur', validator: validPhone } //写入验证器]}}
}

点击按钮进行校验：

methods: {// 表单验证submitForm(formName) {this.$refs[formName].validate((valid) => { //重点是ref绑定必须一致if (valid) {alert('submit!')this.dialogFormVisible = false} else {console.log('error submit!!')return false}})}
}

看效果：
电话号码为空时

电话号码格式错误时

后续会一直更新各种常见验证，关注一下了解更多。

VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）相关推荐

修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
前言本以为可以稳稳当当的工作.安安心心的写文章,结果我做了一件非常疯狂的事情,换新工作一周后辞了--然后去了另外一家公司 - - #,理由就不详说了,总之现在是每天加班到8-9点,虽然如此但是这个团 ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
ajax提交，form表单提交，onsubmit=return checksubmit()提交验证
Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交一.Url参数提交数据 ...
iview form 表单自定义参数验证 validate
需求,使用的是iview框架的Form组件,一般简单input类型数据,使用简单的验证配置就可以达到效果.如官方的写法. iview 表单验证地址 https://www.iviewui.com/c ...
IView的Form表单自定义验证需注意事项
写自定义验证时,除需要Form中的ref.rules.model和FormItem中的prop数据结构的高度对应外,还要注意,在绑定model中的对应prop之前,还需要清理ref中的fields.否 ...

VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）

步骤：

VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）相关推荐

最新文章

热门文章