在vue中使用正则表达式与表单校验

创建校验规则

在src目录下创建util/Regexp.js文件，添加需要的校验规则：

/**
 * @description 验证手机号是否是有效手机号
 * @param {String} telephone 需要验证的手机号码
 * @returns {Boolean}
 * @see https://blog.youkuaiyun.com/u011415782/article/details/85601655
 */
const TEL_REG_EXP = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;

function isTelephoneValid(telephone) {
    return TEL_REG_EXP.test(telephone);
}

/**
 * @description 验证邮箱是否为有效邮箱格式
 * @param {String} email 需要验证的邮箱
 * @returns {Boolean}
 * @see https://www.cnblogs.com/stellar/p/5888163.html
 */
const EMAIL_REG_EXP = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
// var str = new RegExp("w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*");
function isEmailValid(email) {
    return EMAIL_REG_EXP.test(email);
}

/**
 * @description 验证密码是否为有效密码格式
 * @param {String} password 需要验证的密码
 * @returns {Boolean}
 * @see https://deerchao.cn/tutorials/regex/common.htm
 */
const PAW_REG_EXP = /(?=^.{6,12}$)[0-9A-Za-z]+/;

function isPwdValid(password) {
    return PAW_REG_EXP.test(password);
}

/**
 * @description 验证验证码是否为有效验证码格式
 * @param {String} code 验证码
 * @returns {Boolean}
 * @see https://binghe.blog.youkuaiyun.com/article/details/116778918
 */
const CODE_REG_EXP = /^\d{6}$/;

function isCodeValid(code) {
    return CODE_REG_EXP.test(code);
}

export default {
    isTelephoneValid,
    isEmailValid,
    isPwdValid,
    isCodeValid,
}

直接使用正则表达式

在需要使用的文件中引入Regexp.js文件，通过对应方法名进行校验：

<template>
    <div class="backg">
        <div id="title">大熊猫野外成长信息管理系统</div>
        <div>
            <el-card class="box-card">
                <div class="cardtitle">重置密码</div>
                <el-input
                    placeholder="输入邮箱地址"
                    v-model="mailbox"
                    clearable
                    class="inp"
                >
                    <i slot="prefix" class="el-input__icon el-icon-message"></i>
                </el-input>
                <div class="yzmd">
                    <el-input
                        placeholder="邮箱验证码"
                        v-model="code"
                        class="yzm"
                    >
                        <i
                            slot="prefix"
                            class="el-input__icon el-icon-postcard"
                        ></i>
                    </el-input>
                    <el-button
                        type="primary"
                        size="small"
                        round
                        @click="getCode"
                        >获取验证码</el-button
                    >
                </div>
                <el-input
                    placeholder="输入新密码"
                    v-model="password"
                    show-password
                    class="inp"
                >
                    <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
                <el-button
                    type="info"
                    size="small"
                    round
                    @click="submitValidate"
                    >重置密码</el-button
                >
            </el-card>
        </div>
    </div>
</template>

<script>
import Regexp from "@/util/Regexp";

export default {
    data() {
        return {
            mailbox: "",
            code: "",
            password: "",
        };
    },
    methods: {
        // 验证表单
        submitValidate() {
            if (!Regexp.isEmailValid(this.mailbox)) {
                this.$notify.error({
                    title: "邮箱错误",
                    message: "邮箱格式不正确",
                });
                return;
            }
            if (!Regexp.isCodeValid(this.code)) {
                this.$notify.error({
                    title: "验证码错误",
                    message: "验证码为六位纯数字",
                });
                return;
            }
            if (!Regexp.isPwdValid(this.password)) {
                this.$notify.error({
                    title: "密码格式有误",
                    message: "密码需输入6-12位数字与字母的组合",
                });
                return;
            }
        },
    },
};
</script>

利用el-form校验表单

在需要使用的文件中引入Regexp.js文件，通过el-form设置rules，通过对应方法名进行校验：

表单代码：（这里的提交按钮没放出来，实际是要写的）

<el-form
    :model="personForm"
    :rules="personRules"
    ref="personForm"
    label-width="100px"
    class="demo-ruleForm"
    size="mini"
>
    <el-form-item label="姓名" prop="name">
        <el-input v-model="personForm.name"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
        <el-input v-model="personForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
        <el-input v-model="personForm.email"></el-input>
    </el-form-item>
</el-form>
<el-button
    type="primary"
    size="small"
    @click="submitForm('personForm')"
    >确 定</el-button
>

数据：

trigger：blur-失去焦点时触发，change-数据改变时触发

required：用于表单验证

messager：提示语

min、max：最小与最大长度

data() {
    var validateName = (rule, value, callback) => {
        if (value === "" || value === " ") {
            callback(new Error("姓名不能为空"));
        } else if (value.length > 10) {
            callback(new Error("姓名长度不能超过10字符"));
        } else {
            callback();
        }
    };
    var validatePhone = (rule, value, callback) => {
        if (value === "" || value === " ") {
            callback(new Error("请输入手机号"));
        } else if (!Regexp.isTelephoneValid(value)) {
            callback(new Error("手机格式不正确"));
        } else {
            callback();
        }
    };
    var validateEmail = (rule, value, callback) => {
        if (value === "" || value === " ") {
            callback(new Error("请输入邮箱地址"));
        } else if (!Regexp.isEmailValid(value)) {
            callback(new Error("邮箱格式不正确"));
        } else {
            callback();
        }
    };
    return {
        personForm: {
            name: "",
            phone: "",
            email: "",
        },
        personRules: {
            name: [
                {
                    required: true,
                    validator: validateName,
                    trigger: "blur",
                },
            ],
            phone: [
                {
                    required: true,
                    validator: validatePhone,
                    trigger: "blur",
                },
            ],
            email: [
                {
                    required: true,
                    validator: validateEmail,
                    trigger: "blur",
                },
            ],
        },
    };
},

调用方法：

// 提交表单并校验
submitForm(formName) {
    this.$refs[formName].validate((valid) => {
        if (valid) {
            alert("submit!");
        } else {
            console.log("error submit!!");
            return false;
        }
    });
},
// 重置表单
resetForm(formName) {
    this.$refs[formName].resetFields();
},

一些工具

手机号：手机号段正则表达式 (2019-01 最新)_moTzxx的博客-优快云博客

常用正则表达式：常用正则表达式

一个关于正则表达式基础的网站：正则表达式30分钟入门教程