el-form表单验证

最新推荐文章于 2024-04-12 16:19:47 发布

蟑螂大道

最新推荐文章于 2024-04-12 16:19:47 发布

阅读量103

点赞数

分类专栏： Element-UI 文章标签： javascript 前端 vue.js elementui 前端框架

本文链接：https://blog.csdn.net/qq_43551056/article/details/130455695

版权

Element-UI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

登录界面

在这里插入图片描述

添加校验方法

给el-form指定表单数据ruleForm和校验规则rules

<el-form :model="ruleForm" :rules="rules"></el-form>

给el-item添加prop

<el-form-item prop="phone"></el-form-item>

给el-input添加v-model

<el-input v-model="ruleForm.phone"></el-input>

在data定义表单数据ruleForm

 ruleForm: {
   name: '',
   password: ''
 }

在data定义表单校验规则rules

rules: {
   phone: [
     { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
     { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: ['blur'] }
   ],
 }

登录页面

<template>
  <div class="outer">
    <el-card class="box-card">
      <!-- el-form   label-width设置label的宽度   -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width='120px'>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="ruleForm.code"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        password: ''
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: ['blur'] }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: ['blur', 'change'] },

          // 方式1 正则表达式验证
          // { pattern: /^\d{6}$/, message: "验证码格式不正确", trigger: ['blur', 'change'] },

          // 方式2 自定义验证
          { validator: this.checkCode, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    // 自定义验证
    checkCode(rule, value, callback) {
      if (!/^\d{6}$/.test(value)) {
        callback(new Error('验证码格式不正确'))
      } else {
        callback()
      }
    },

    // 提交表单 表单验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

</script>
<style lang="less">
.outer {
  display: flex;
  width: 100%;
  height: 90vh;
  justify-content: center;
  align-items: center;

  .box-card {
    width: 500px;
    text-align: center;
  }
}
</style>