表单正则 基于 element UI 正则规则

正则校验，第一次用，记录一下，记性不好

http://element-cn.eleme.io/#/zh-CN/component/form  参考文档  element uI form表单 校验

第一种，允许中文逗号，英文逗号，换行输入

var val = value

.split(/[\n|\r\n|\,|\，]/)

.map(el => el.trim())

.filter(el => el !== "");

第二种，不允许特殊符号

let regEn = /[`~!@#$%^&*()_+<>?:"{}.\/;'[\]]/gi;

let regCn = /[·！#￥（——）：；“”‘、|《。》？、【】[\]]/gi;

第三种，允许大写字母和数字混合，或者纯数字，长度都是10位

reg = /^(?=.*?[A-Z])(?=.*?[0-9])[A-Z0-9]{10,10}$|^[0-9]{10,10}$/;

第四种，允许纯数字  12位

reg = /^[0-9]{12,12}$/;

第五种，允许纯数字  11位

reg = /^[0-9]{11,11}$/;

允许多种兼容，可以在正则里面自己添加，举个例子

var val = value

.split(/[\n|\r\n|\,|\，]/)        // |  或 关系

.map(el => el.trim())

.filter(el => el !== "");

 

reg = /^(?=.*?[A-Z])(?=.*?[0-9])[A-Z0-9]{10,10}$|^[0-9]{10,10}$/;  // |  或 关系

 

 

HTML:

<el-form :model="form" :rules="rules" ref="ruleForm" style="width:100%; padding-right:100px; ">

<el-form-item label="关键词: " prop="keywords" :label-width="formLabelWidth">

<el-input type="textarea" v-model="form.keywords" :rows="4" placeholder="多个关键字换行输入（1-500个）" />

</el-form-item>

<template>

<div class=" fontSizeBox1 fontSize1" v-model="fontSum1">已输入 {{fontSum1}} 个</div>

</template>

<el-form-item label="商品ASIN:" prop="skus" :label-width="formLabelWidth" style="margin-top:25px;">

<el-input type="textarea" v-model="form.skus" :rows="4" placeholder="多个关键字换行输入（1-500个）" />

</el-form-item>

<template>

<div class=" fontSizeBox2 fontSize2" v-model="fontSum2">已输入 {{fontSum2}} 个</div>

</template>

<el-form-item :label-width="formLabelWidth" style="margin-top:15px;">

<el-checkbox v-model="form.monitorFlag">是否添加监控</el-checkbox>

<el-date-picker :picker-options="pickerOptions1" :label-width="formLabelWidth" class="el-date-wrapper" style="width:100%" v-if='form.monitorFlag' v-model="form.monitorTimeAry" type="daterange" align="left" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">

</el-date-picker>

</el-form-item>

</el-form>

定义在data  return 里面的校验

 

rules: {

keywords: [

{ required: true, message: "请输入关键字", trigger: "blur" },

// { min: 1, max: 500, message: "最多只能输入500字符", trigger: "blur" }, //限定输入的个数

{ validator: validateKeyword, trigger: "change" }  //特别重要 ,自定义校验，就是这里定义的，可以自己加定义方法！！！！

],

skus: [

{ required: true, message: "请输入商品ASIN:", trigger: "blur" },

// { min: 1, max: 500, message: "最多只能输入500个字符", trigger: "blur" },

{ validator: validateSku, trigger: "change" }  //特别重要 ,自定义校验，就是这里定义的，可以自己加定义方法！！！！

]

},

自定义校验的规则，最重要！！！

 

// 自定义校验关键字

var validateKeyword = (rule, value, callback) => {

if (value == null || value == undefined) return;

var val = value

.split(/[\n|\r\n|\,|\，]/)

.map(el => el.trim())

.filter(el => el !== "");

if (!value) {

callback(new Error("输入不能为空"));

return;

}

this.keywordsArr = val;

let regEn = /[`~!@#$%^&*()_+<>?:"{}.\/;[\]]/gi;

let regCn = /[·！#￥（——）：；“”‘、|《。》？、【】[\]]/gi;

let keyworldLength = null;

if (regEn.test(value) || regCn.test(value)) {

callback(new Error("不能包含特殊字符"));

} else if (val.length > 500) {

callback(new Error("输入数量不能超过500个"));

} else {

callback();

}

};

// 自定义校验SKU

var validateSku = (rule, value, callback) => {

if (!value) {

callback(new Error("输入不能为空"));

return;

}

if (value == null || value == undefined) return;

let val = value

.split(/[\n|\r\n|\,|\，]/)

.map(el => el.trim())

.filter(el => el !== "");

this.skusArr = val;

let regEn = /[`~!@#$%^&*()_+<>?:"{}.\/;'[\]]/gi;

let regCn = /[·！#￥（——）：；“”‘、|《。》？、【】[\]]/gi;

let reg = /^(?=.*?[A-Z])(?=.*?[0-9])[A-Z0-9]{10,10}$|[0-9]{10,10}$/;

let changePlatformd = this.$store.state.selectPlatform.platformId;

let str = "ASIN须为10位数，只能包含纯数字或大写字母和数字组合";

if (changePlatformd == 2) {

reg = /^[0-9]{12,12}$/;

str = "请输入12位纯数字";

} else if (changePlatformd == 3) {

reg = /^[0-9]{11,11}$/;

str = "请输入11位纯数字";

}

if (!val.every(el => reg.test(el))) {

callback(new Error(str));

} else if (

val.some(el => regEn.test(el)) ||

val.some(el => regCn.test(el))

) {

callback(new Error("不能包含特殊字符"));

} else if (val.length > 500) {

callback(new Error("输入数量不能超过500个"));

} else {

callback();

}

};

提取重要的部分，放在头部，免得浪费大家的时间。。。。。~~~~~~·