element form表单生成验证信息
混入里面加入
import validator from '@/utils/el-validator'
// 生成验证信息表单信息 rulesFn(data) { const rules = {} data.forEach(element => { if (element.required) { rules[element.prop] = [] const rulesList = { required: true, message: `${element.label}不能为空`, trigger: 'blur' } if (element.type === 'input') { rulesList.trigger = 'blur' } if (element.type === 'select' || element.type === 'selectCode' || element.type === 'radio') { rulesList.trigger = 'change' } rules[element.prop].push(rulesList) // 加入正则效验 if (element.regexp) { rules[element.prop].push( { required: 'true', message: `请输入正确的${element.label}`, trigger: 'blur', validator: validator, regexp: element.regexp } ) } } }) return rules }
循环表格数据
使用数据加入验证
export const ReviewDatas = [
{ label: '电话', prop: 'aab015', required: true, //是否必填 regexp: 'phoneAndTel', // 如果需要正则则加入对应的正则类型 type: 'input' } ]
页面中需要添加
<FormItems ref="ref" :rules="rulesFn(ReviewDatas)" :model="ReviewForm" :items-datas="ReviewDatas" :form-datas="ReviewForm" :is-grid="false" />
FormItems 是通过element自己封装的组件
import validator from '@/utils/el-validator' 内容
export default function validator(rule, value, callback) { if (!value && !rule.required) { callback() } if (regexping(rule.regexp, value)) { callback() } else { return callback(new Error(errText)) } } var errText = '' function regexping(regexp, value) { if (regexp) { let reg if (regexp === 'cn') { // 中文 reg = /^[\u0391-\uFFE5]+$/ errText = '仅允许中文汉字' } else if (regexp === 'en') { // 英文字母 reg = /^[a-zA-Z]+$/ errText = '仅允许英文字母' } else if (regexp === 'passOne') { // 英文或数字 最多20位 reg = /^[a-zA-Z]|[0-9]{6,20}$/ errText = '仅允许英文或数字' } else if (regexp === 'En+Number') { // 任意英文+数字 reg = /^[a-zA-Z0-9]+$/ errText = '仅允许英文及数字' } else if (regexp === 'decimal') { // 小数浮点数类型 reg = /^\d+(\.\d+)?$/ errText = '必须是小数' } else if (regexp === 'integer') { // 整数类型 - 正负都可以 reg = /^-?[1-9]\d+$/ errText = '必须是整数' } else if (regexp === '+integer') { // 整数类型 - 正数 reg = /^[0-9]*[1-9][0-9]*$/ errText = '必须是正整数' } else if (regexp === '0+integer') { // 0+正数 reg = /^(0|\+?[1-9][0-9]*)$/ errText = '必须是大于等于0的整数' } else if (regexp === 'number') { // 数字类型 reg = /^-?[0-9]\d+$/ errText = '必须是数字' } else if (regexp === 'email') { // 邮箱 reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/ errText = '邮箱格式错误' } else if (regexp === 'phone') { // 手机 18165221849 reg = /^1\d{10}$/ errText = '请输入正确的手机号' } else if (regexp === 'tel') { // 电话 0731-5632575 reg = /^0\d{2,3}-?\d{7,8}$/ errText = '必须是电话号码' } else if (regexp === 'phoneAndTel') { // 手机+电话 reg = /^1\d{10}$|^0\d{2,3}-?\d{7,8}$/ errText = '必须是手机或电话号码' } else if (regexp === 'postcode') { // 邮政编码 reg = /^\d{6}$/ errText = '请输入正确的邮编' } else if (regexp === 'http') { // http (支持 - :post,www,ip,http,https) reg = /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/ errText = '必须是正确url地址' } else if (regexp === 'ip') { // ip地址 reg = /(\d+)\.(\d+)\.(\d+)\.(\d+)/ errText = '必须是正确ip格式' } else if (regexp === 'identityCard') { // 身份证 reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ errText = '必须是正确身份证' } else if (regexp === '+num2') { // 保留两位小数 reg = /^\+?(\d*\.\d{2})$/ errText = '正数,保留两位小数' } else if (regexp === 'amt') { // //验证是,数字或 ,者两位小数,或者一位小数,整数 reg = /^\d+(\.\d{1,2})?$/ errText = '请输入正确的金额格式' } else if (regexp === 'socailcode') { // 验证:社会统一代码(18位英文或者数字) reg = /^[a-zA-Z0-9]{18}$/ errText = '必须是18位数字或者英文' } else if (regexp === 'otherCertificates') { // 验证:其它证件号码(小于等于18位进行校验,且只允许数字、字母、-、文中空格这4类字符) reg = /^[a-zA-Z0-9- ]{1,18}$/ errText = '必须是数字、字母、- 文中空格组成' } else if (regexp === 'bankcard') { // 验证:银行卡简单验证 reg = /^([1-9]{1})(\d{14}|\d{18})$/ errText = '请输入正确输入银行卡号' } else if (regexp === 'password') { reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}$/ errText = '请输入6位以上密码,并且包含数字、字母和特殊符号' } else if (regexp === 'socialCode') { reg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g errText = '请输入正确的统一社会信用代码' } else if (regexp === 'TelPhone') { reg = /0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/ errText = '请输入正确的座机号码' } else if (regexp === 'Certificates') { // 身份证+其他证件 reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)|^[a-zA-Z0-9- ]{1,18}$/ errText = '请输入正确的证件号码' } if (value && reg.test(value)) { // item 验证不通过 return true } else { return false } } else { return true } }