记录下vue表单验证

公共common文件夹下建立validate.js

/* 是否邮编*/
export function validateMail(rule, value,callback) {
  const reg =/^[1-9][0-9]{5}$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的邮编'));
    } else {
      callback();
    }
  }
}

/* 是否手机号码或者固话*/
export function validatePhoneTwo(rule, value, callback) {
  const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
  if (value == '' || value == undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的电话号码或者固话号码'));
    } else {
      callback();
    }
  }
}
/* 是否固话*/
export function validateTelphone(rule, value,callback) {
  const reg =/0\d{2}-\d{7,8}/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'));
    } else {
      callback();
    }
  }
}
/* 是否手机号码*/
export function validatePhone(rule, value,callback) {
  const reg =/^[1][3,4,5,7,8][0-9]{9}$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的电话号码'));
    } else {
      callback();
    }
  }
}
/* 是否身份证号码*/
export function validateIdNo(rule, value,callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('请输入正确的身份证号码'));
    } else {
      callback();
    }
  }
}

/* 是否邮箱*/
export function validateEMail2(rule, value,callback) {
  const reg =/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else{
    if (!reg.test(value)){
      callback(new Error('请输入正确的邮箱地址'));
    } else {
      callback();
    }
  }
}

在自己所需的.vue文件中引入全部，或者按需引入

import {validateIdNo,validatePhone,validateEMail2,validateMail} from './validate.js'

 

在template中绑定rules,prop写rules里对应的值,如下

<el-form ref="role" :model="role" label-width="120px" :rules="rules">
  <el-form-item label="来信人" prop="fromName">
    <el-input v-model="role.fromName"></el-input>
  </el-form-item>

  <el-form-item label="邮箱" prop="email">
    <el-input type="email" v-model="role.email"></el-input>
  </el-form-item>

  <el-form-item label="来信目的" prop="objectiveType">
    <el-select v-model="role.objectiveType" class="handle-select mr10">
      <el-option v-for="item in purposeList" :key="item.id" :label="item.dict.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="手机号" prop="phone">
    <el-input v-model="role.phone"></el-input>
  </el-form-item>

  <el-form-item label="固定电话" prop="fixedPhone">
    <el-input v-model="role.fixedPhone"></el-input>
  </el-form-item>

  <el-form-item label="地址" prop="address">
    <el-input v-model="role.address"></el-input>
  </el-form-item>

  <el-form-item label="邮编" prop="postcode">
    <el-input v-model="role.postcode"></el-input>
  </el-form-item>

  <el-form-item label="标题" prop="title">
    <el-input v-model="role.title"></el-input>
  </el-form-item>

  <el-form-item label="内容" prop="content">
    <el-input   type="textarea" :rows="3" v-model="role.content"></el-input>
  </el-form-item>

  <el-form-item label="是否公开" prop="isPublic">
    <el-select v-model="role.isPublic" class="handle-select mr10">
      <el-option key="1" label="公开" value="1"></el-option>
      <el-option key="2" label="不公开" value="0"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="选择部门" prop="deptId">
<el-cascader
      :options="sponsor"
change-on-select
      :show-all-levels="false"
v-model="role.deptId"
placeholder="选择部门"
></el-cascader>
</el-form-item>
<el-form-item label="来信人身份证" prop="fromIdCard">
<el-input v-model="role.fromIdCard"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitFormAdd('role')">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</el-form-item>
</el-form>

rules写在data里,完成

rules: {
  fromName: [
    { required: true, message: "请输入来信人", trigger: "blur" }
  ],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" },{validator:validateEMail2,trigger:"blur"}],
  objectiveType: [
    { required: true, message: "请输入来信目的", trigger: "blur" }
  ],
  phone: [
    { required: true, message: "请输入来信人手机号", trigger: "blur" },{validator:validatePhone,trigger:"blur"}
  ],
  // fixedPhone: [{ required: true, message: "请输入来信人固定电话", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  postcode: [{ required: true, message: "请输入邮编", trigger: "blur" },{validator:validateMail,trigger:"blur"}],
  title: [{ required: true, message: "请输入来信题目", trigger: "blur" }],
  content: [
    { required: true, message: "请输入来信内容", trigger: "blur" }
  ],
  isPublic: [{ required: true, message: "必填选项", trigger: "blur" }],
  status: [{ required: true, message: "选择状态", trigger: "blur" }],
  deptId: [
    { required: true, message: "请输入来信部门id", trigger: "blur" }
  ],
  fromIdCard: [
    { required: true, message: "请输入来信人身份证号", trigger: "blur" },{validator:validateIdNo,trigger:"blur"}
  ]
}