elment ui表单验证

最新推荐文章于 2023-09-11 20:42:03 发布

原创最新推荐文章于 2023-09-11 20:42:03 发布 · 592 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #前端

基础知识专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了表单验证中常用的规则，包括必填项、正则表达式验证、字符串长度限制等，并提供了自定义验证方法及整体验证的两种实现方式。

表单验证常用规则

required  为true 必填
pattern  正则验证
min   字符串的最小长度
max    字符串的最大长度 
validator 自定义函数来完成校验
trigger  校验的触发方式  值可为change值改变/blur失去焦点
message  验证不满足提示消息

规则使用

1.使用自带规则校验

//这是结构
<el-from :rules="rules" ref="formName">
    <el-form-item prop="name"></el-form-item>
</el-from>

//这里是规则
data() {
    return {
      rules: {
        name: [   //给from表单中prop为name的input设置规则
          { required: true, message: '请输入活动名称', trigger: 'blur' }, //必填
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, //长度3-5
          {
            pattern: /^1[3,4,5,6,7,9,8]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur',  //正则校验
          },
        ],
      },
    }
  },

2.自定义验证

validator是一个函数，有三个参数（rule当前规则，value 当前值,callback回调函数）,用于自定义规则

//规则定义
data(){
//规则函数
var checkMobile = function (rule, value, callback) {
  value.charAt(2) === '9'  //验证第三位数是否为9
        ? callback()   //是则放行
        : callback(new Error('手机号第三位必须是9'))  //否则错误提醒
}
return {
    rules:[
      name:[
          {
            validator: checkMobile, //格式为 属性名:规则函数名
            trigger: 'blur' //触发方式
          },
        ],
      ]
    ]
 } 
}

提交时的整体验证

使用validate方法,validate方法可以传两个参数，第一个是校验的结果的布尔值，第二个是整个form表单的数据

用法1:回调形式

 submitForm(formName) {
 //this.$refs[formName]为el-form的ref
      this.$refs[formName].validate((isOk,value) => { //isOk为返回的验证结果,value为表单数据
        if (isOk) {
          console.log('成功')
        } else {
          console.log('失败')
        }
      })

    },

用法二: promise.then().catch()的用法

 submitForm(formName) {
      this.$refs[formName].validate().then(() => {
          console.log('成功')
        })
        .catch(() => {
          console.log('失败')
        })
    },