第一种：非必填不能为空，并且需要正则验证
第二种：必填，正则验证，不能只输入空格验证
第三种：必填，正则验证，不能输入空格(v-model.trim)
第四种：选了多选框后必填
第一种：非必填不能为空，并且需要正则验证
<template><div><el-formclass="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>
第二种：必填，正则验证，不能只输入空格验证
<template><div><el-formclass="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)
<template><div><el-formclass="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>
第四种：选了多选框后必填，
<template><div><el-formclass="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-pickerv-if="isTopDataShow"v-model="ruleForm.isTopDatavalue"type="date"time-arrow-controlformat="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>
