第一种：非必填不能为空，并且需要正则验证
第二种：必填，正则验证，不能只输入空格验证
第三种：必填，正则验证，不能输入空格(v-model.trim)
第四种：选了多选框后必填
第一种：非必填不能为空，并且需要正则验证
javascript
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
:rules="rules"
label-width="180px"
>
<el-form-item label="电话（座机）：" prop="tel">
<el-input v-model="ruleForm.tel"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
// 电话（座机）
var validateworkTel=(rule, value, callback) =>{
let regexp = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,8}$/;
if(value != null){
let valdata = value.split(',');
let isCorrect = true;
if (valdata.length) {
for (let i = 0; i < valdata.length; i++) {
if (regexp.test(valdata[i]) == false) {
isCorrect = false;
}
}
}
if (value == '') {
callback();
}else if (!isCorrect) {
callback(new Error('请输入正确的固定电话'));
} else {
callback()
}
}
callback();
}
return {
ruleForm: {
tel:"",
},
// 验证
rules: {
workTel:[
{ required: false, validator: validateworkTel, trigger: 'blur'},
]
},
}
}
}
</script>第二种：必填，正则验证，不能只输入空格验证
javascript
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
:rules="rules"
label-width="180px"
>
<el-form-item label="电话（座机）：" prop="mobile">
<el-input v-model="ruleForm.mobile"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
// 手机号
var validateMobile=(rule, value, callback) =>{
let regexp = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
let valdata = value.split(',');
let isCorrect = true;
if (valdata.length) {
for (let i = 0; i < valdata.length; i++) {
if (regexp.test(valdata[i]) == false) {
isCorrect = false;
}
}
}
if (value == '') {
return callback(new Error('请输入手机号'));
} else if (!isCorrect) {
callback(new Error('请输入正确的手机号'));
} else {
callback()
}
callback();
}
return {
ruleForm: {
mobile:"",
},
// 验证
rules: {
mobile:[
{ required: true, validator: validateMobile, trigger: 'blur' },
{ pattern: /\s*\S+?/, message: '请输入正确的手机号', trigger: 'blur' }
],
},
}
}
}
</script>第三种：必填，正则验证，不能输入空格(v-model.trim)
javascript
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
:rules="rules"
label-width="180px"
>
<el-form-item label="IP地址：" prop="contactIp">
<el-input v-model.trim="ruleForm.contactIp"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
var validateContactIp=(rule, value, callback) =>{
let regexp = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
let valdata = value.split(',');
let isCorrect = true;
if (valdata.length) {
for (let i = 0; i < valdata.length; i++) {
if (regexp.test(valdata[i]) == false) {
isCorrect = false;
}
}
}
if (value == '') {
return callback(new Error('请输入IP地址'));
} else if (!isCorrect) {
callback(new Error('请输入正确的IP地址'));
} else {
callback()
}
callback();
}
return {
ruleForm: {
contactIp:"",
},
// 验证
rules: {
contactIp:[
{ required: true, validator: validateContactIp, trigger: 'blur' },
],
}
}
}
}
</script>第四种：选了多选框后必填，
javascript
<template>
<div>
<el-form
class="abow_dialog"
:model="ruleForm"
ref="ruleForm"
:rules="rules"
label-width="180px"
>
<el-form-item label="基本配置：" prop="isTopChecked" class="clearfix">
<el-checkbox-group v-model="ruleForm.reminderChecked" class="fl" style="width:150px">
<el-checkbox label="站内提醒" name="reminderChecked"></el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="ruleForm.isTopChecked" class="fl" style="width:150px">
<el-checkbox label="是否置顶" name="isTopChecked" @change="isTopCheckedChange"></el-checkbox>
</el-checkbox-group>
<el-date-picker
v-if="isTopDataShow"
v-model="ruleForm.isTopDatavalue"
type="date"
time-arrow-control
format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
placeholder="置顶日期"
style="width: 20%;"
class="fl"
>
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
var isTopValidate=(rule, value, callback) =>{
if(value===true){
if(this.ruleForm.isTopDatavalue == "" || this.ruleForm.isTopDatavalue == null){
callback(new Error('请选择日期'));
}else{
callback();
}
}else{
callback();
}
}
return {
ruleForm: {
reminderChecked:true,
isTopChecked:false,
isTopDatavalue:"",
},
// 验证
rules: {
isTopChecked:[
{ required: false, validator: isTopValidate, trigger: "blur" }
]
}
}
}
}
</script>