vue elementUI如何自定义表单验证规则

2020-11-10   阅读:2845   类型:前端   分类:Vue    标签: Vue

一、elementUI自带了一部分表单验证规则,本文讲解如何使用自定义验证规则来完成密码的二次验证。

1.1、首先添加验证邮箱和电话规则和正则表达式

// 验证邮箱的规则
        var checkEmail = (rule, value, cb) => {
            // 邮箱正则表达式
            const regEmail =  /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if(regEmail.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }
 
         // 验证手机号的规则
        var checkTel = (rule, value, cb) => {
            const regTel = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
            if(regTel.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的电话'))
        }

1.2、添加表单验证规则对象,validator绑定checkEmail和checkTel验证规则

//添加表单验证规则对象
  addFormRules: {
   email: [
      {required: true, message: '请输入邮箱',trigger: 'blur'},
      {validator: checkEmail, trigger: 'blur'}
      ],
   tel: [
      {required: true, message: '请输入电话',trigger: 'blur'},
      {validator: checkTel, trigger: 'blur'}
      ]
 }

完整代码演示:

验证错误

image.png

验证通过

image.png

二、表单代码:

<el-form :model="addForm" :rules="addFormRules" ref="addFormRref" label-width="100px">
    <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email"></el-input>
     </el-form-item>
     <el-form-item label="电话" prop="tel">
        <el-input v-model="addForm.tel"></el-input>
     </el-form-item>
</el-form>

三、data方法代码

    data(){
        // 验证邮箱的规则
        var checkEmail = (rule, value, cb) => {
            // 邮箱正则表达式
            const regEmail =  /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if(regEmail.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }
 
         // 验证手机号的规则
        var checkTel = (rule, value, cb) => {
            const regTel = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
            if(regTel.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的电话'))
        }
        return {
            // 获取用户列表的参数对象
            queryInfo: {
                query: '',
                // 当前的页数
                pagenum: 1,
                // 当前每页显示多少条数据
                pagesize: 10
            },
            UserList: [],
            total: 0,
            // 控制添加用户对话框的显示和隐藏
            addDialogVisible: false,
            //添加用户的表单数据
            addForm: {
                email: '',
                tel: ''
            },
            //添加表单验证规则对象
            addFormRules: {
                email: [
                    {required: true, message: '请输入邮箱',trigger: 'blur'},
                    {validator: checkEmail, trigger: 'blur'}
                ],
                tel: [
                    {required: true, message: '请输入电话',trigger: 'blur'},
                    {validator: checkTel, trigger: 'blur'}
                ]
            }
        }
},


腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/503.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×