前端开发中经常会遇见表单验证，接下来我们说一说表单验证怎么实现的，本文章主要基于elementUI+vue框架，当然中间的验证JS都可使用。

---

前言

本章主要写手机号验证、邮箱验证、身份证验证以及实现动态必填项，感兴趣就继续向下看吧

---

一、新建文件

1.手机号验证

1.1 追求简单请在输入框中写上下方圈出的属性，表示只能输入数字。

1.2 接下来就是规范输入的电话格式，此处使用了正则表达式（elementUI表单的验证使用prop来指定验证的规则）：。

//需要在return里面写上验证规则
//required:指定输入框是否必填（true\false）   
//validator:指定自定义的验证规则
//trigger:指定何时执行验证规则（blur\change）
//详情可参考官网：https://element.eleme.io/#/zh-CN/component/form
rules: {
	 mobile: [ { required: false, validator: checkPhone, trigger: "blur" }],
}

1.3 指定了验证规则现在就来写具体的验证规则，使用正则验证：

//在data中写入以下方法：
        var checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
            setTimeout(() => {
                if (value) {
                    if (phoneReg.test(value)) {
                        callback();
                    } else {
                        callback(new Error("电话号码格式不正确"));
                    }
                } else {
                    callback();
                }
            }, 100);
        };

2.判断身份证号码

一般身份证为15或18位，或者17位+X/x，所以这里有两种方法，任里选择，代码如下（示例）：

//第一种
//数字+字母+15、18
export function certificateNumber(string, type) {
  if (string) {
    if (/^[A-Za-z0-9]+$/.test(string) && (string.length == 15 || string.length == 18)) {
      return
    } else {
      return Toast('证件号码不合规！')
    }
  }
}
//第二种
// 身份证号码的验证
export function checkIdNum(rule, value, callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    if (!reg.test(value)) {
      return Toast('证件号码格式有误')
    }
  }
}

3.验证邮箱格式

邮箱一般是数字/英文 + @ +后缀，例如:wangxing@qq.com(这里省略了1.1 、1.2，原理相同，修改prop和指定的验证方法名就行了，这里就不一一赘述 )：

  var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('请输入邮箱'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }

4.动态设置表单必填与否

有些时候我们会遇到同一个输入框在不同状态下可能是必填，也可能不是必填，所以要动态得改变必填属性，这里以密码为例，新增时密码为必填，修改时密码为非必填，flag需要在data里面定义，新增时为true,修改时为false，话不多说，上代码：

//html
  <el-form label-width="120px"
               :model="resetForm"
               :rules="rules"
               ref="resetForm">
    <el-form-item label="密码"
                      maxlength="20"
                      prop="password"
                      :required="isRequired">
          <el-input v-model="resetForm.password"
                    type="password"
                    clearable
                    placeholder="请输入密码"></el-input>
        </el-form-item>
   </el-form>

//data里面得
  var checkPassword = (rule, value, callback) => {
      if (this.isRequired) {
        if (value) {
          callback()
        } else {
          callback(new Error('请输入密码'))
        }
      } else {
        callback()
      }
    }
     rules: {
        password: [{ validator: checkPassword }],
      },
    //监听flag得变化改变必填与否
      computed: {
    isRequired() {
      return this.flag
    }
  },

对应的我在index.js文件最后还要输入，代码如下：

export default {
  checkId: [{ required: false, validator: checkIdNum, trigger: 'blur' }],
  chenckPolicyName: [{ required: false, validator: policyNumber, trigger: 'blur' }],
  chenckCerNumber: [{ required: false, validator: certificateNumber, trigger: 'blur' }],
}

2.页面中的使用

代码如下（示例）：

<template>
<div>
 <van-cell-group class="form">
        <van-field v-model="number"
                   maxlength="18"
                   label="身份证号码"
                   :rules="rulesUtils.chenckPolicyName"
                   placeholder="身份证号码"
                   clearable />
   </van-cell-group >
</div>
import rules from '@/util/index'
export default {
  data() {
    return {
      rulesUtils: rules,
      }

---

总结

1.定义方法并设置验证规则 2.引入文件并定义字段 3.使用规则