vue element组件表单姓名、手机号、邮箱正则验证

最新推荐文章于 2023-02-21 17:57:33 发布

原创最新推荐文章于 2023-02-21 17:57:33 发布 · 置顶 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #大前端 #vue #javascript

本文介绍了如何在Vue Element UI框架下进行表单验证，特别是针对姓名、手机号码和电子邮件地址的正则表达式验证。通过实例代码，详细解析了在vue.js项目中如何设置和使用这些验证规则，确保用户输入的数据符合规范。

<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm">
      <el-form-item label="你的姓名" prop="uname">
        <el-input
          v-model="ruleForm.uname"
        ></el-input>
      </el-form-item>
      <el-form-item label="你的电话" prop="phone">
        <el-input
          v-model="ruleForm.phone"
        ></el-input>
      </el-form-item>
      <el-form-item label="你的邮箱" prop="mailbox">
        <el-input
          v-model="ruleForm.mailbox"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    var checkName = (rule, value, cb) => {
      //验证名字的正则表达式
      const regName = /^([\\u4e00-\\u9fa5]{1,20}|[a-zA-Z\\.\\s]{1,20})$/;
      if (regName.test(value)) {
        //正确的名字
        return cb();
      }
      cb(new Error("请输入正确的名字"));
    };
    var checkMobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不可为空"));
      } else {
        if (value !== "") {
          var reg = /^1[3-9]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error("请输入有效的手机号码"));
          }
        }
        callback();
      }
    };
    var checkEmail = (rule, value, cb) => {
      //验证邮箱的正则表达式
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (regEmail.test(value)) {
        //合法的邮箱
        return cb();
      }
      cb(new Error("请输入合法的邮箱"));
    };
    return {
      ruleForm: {
      },
      rules: {
        uname: [
          { required: true, message: "请输入名字", trigger: "blur" },
          {
            validator: checkName,
            min: 2,
            max: 5,
            message: "请输入正确的名字",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
            validator: checkMobile,
            min: 11,
            max: 11,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        mailbox: [
          { required: true, message: "请输入你的邮箱", trigger: "blur" },
          {
            validator: checkEmail,
            min: 9,
            max: 18,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],

      },
    };
  },
  methods: {
    resetForm(formName) {
      //重置
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("提交成功!");
          this.$router.go(-2);
        } else {
          alert("你没有写完!!");
          this.$refs[formName].resetFields();
        }
      });
    },
  },
};
</script>