elementUi 校验邮箱、手机号、身份证、是否正确

Element UI 提供了表单验证的功能，你可以使用 el-form 和 el-form-item 组件来创建表单，并通过 rules 属性来指定验证规则。以下是验证邮箱、手机号、身份证号的示例代码：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="120px">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="idCard">
      <el-input v-model="form.idCard"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          phone: '',
          idCard: ''
        },
        rules: {
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            alert('验证通过');
          } else {
            console.log('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有三个字段的表单：email、phone 和 idCard。每个字段都有相应的验证规则，其中邮箱需要是合法的邮箱格式，手机号需要是合法的中国大陆手机号，身份证号需要是合法的中国大陆身份证号。如果输入的内容不符合规则，则会弹出相应的错误信息。