vue3中，渲染动态表单（一）——定义公共样式、使用动态样式class & 抽离el-dialog对话框组件 & 父子传参 & 自定义slot插槽 & vue3中watch写法和computed写法
效果图
文件目录
1、主页面
defineForm.vue
<el-button type="primary" @click="see">生成预览</el-button> <ExampleInfo v-if="showExample" v-model:dialogVisible="showExample" :info-data="exampleInfo" @emit-confirm="exampleOk" /> <script lang="ts" setup> import { ref } from 'vue'; import ExampleInfo from './exampleInfo.vue' const showExample = ref(false) const exampleInfo = ref({}) const see = () => { showExample.value = true exampleInfo.value = { // id: fieldId, // typeName: 'add' } } const exampleOk = () => { // tableData.value = [] // getList() } 2.1、渲染主页面
exampleInfo.vue
<!-- @Description 申请表管理 - 定义申请表 - 预览 @author wdd @date 2023/12/14 --> <template> <div> <el-dialog title="申请表" v-model="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="80%"> <div class="content"> <el-form label-width="110px" ref="formRef" :model="formData"> <CustomForm :form-data="formData" :form-item="topicItems"> <!-- 插入自定义模块 --> <template #topicName="{ item }"> <!-- <el-input v-model="formData.topicName" :disabled="formData.id ? true : false" maxlength="100" placeholder="请输入小组名称" show-word-limit /> --> <el-form-item :class="item.className" :label="item.label" :label-width="110" :prop="item.prop" :rules="item.rules"> <el-input v-model="formData.topicName" :disabled="false" maxlength="200" placeholder="请输入" /> </el-form-item> </template> <!-- 编辑自定义样式 --> <template #prjName="{ item }"> <el-form-item :class="item.className" :label="item.label" :label-width="110" :prop="item.prop" :rules="item.rules"> <el-input v-model="formData.prjName" :disabled="false" maxlength="200" placeholder="请输入" /> </el-form-item> </template> <!-- 插入自定义模块 --> <template #title="{ item }"> <div :class="item.className"> <div style="font-size:16px;font-weight:700;padding:0 20px 10px 24px;"> 小组成员：</div> </div> <CustomForm :form-data="formData" :form-item="topicItemOld"></CustomForm> </template> <!-- 编辑自定义样式 --> <template #startDate> <el-date-picker v-model="formData.startDate" :clearable="false" :disabled-date="disableStartData" format="YYYY-MM-DD" placeholder="请输入开始时间" type="date" value-format="YYYY-MM-DD" /> </template> <!-- 编辑自定义样式 --> <template #endDate> <el-date-picker v-model="formData.endDate" :clearable="false" :disabled-date="disableStartData" format="YYYY-MM-DD" placeholder="请输入结束时间" type="date" value-format="YYYY-MM-DD" /> </template> <!-- 插入自定义模块 --> <template #titleA="{ item }"> <div :class="item.className"> <div style="font-size:16px;font-weight:700;padding:0 20px 10px 24px;"> 项目成员：</div> </div> <CustomForm :form-data="formData" :form-item="topicItemNew"></CustomForm> </template> <!-- 插入自定义模块 --> <template #titleB="{ item }"> <div :class="item.className"> <div style="font-size:16px;font-weight:700;padding:0 20px 10px 24px;"> 获奖情况：</div> </div> <CustomForm :form-data="formData" :form-item="awardsItemInfo"></CustomForm> </template> </CustomForm> </el-form> </div> <template #footer> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="confirm">确定</el-button> </span> </template> </el-dialog> </div> </template> <script lang="ts" setup> import { ref, defineProps, defineEmits, computed, watch } from 'vue'; import CustomForm from './customForm.vue' import { topicItem, teamItem, infoItem, awardsItem } from './data' const topicItems = ref(topicItem) // const topicItemNew = ref(topicItem.slice(3, 8)) const topicItemNew = ref(infoItem) const topicItemOld = ref(teamItem) const awardsItemInfo = ref(awardsItem) const formRef = ref() const formData = ref({ // topicName: '', // researchContent: '', // expectTarget: '', // examQuota: '', // formulaPercentage: '', // // carryScheme: '', // stuAttr: '', // email: '', // isIntake: '0', // cooperMode: ['1'], // startDate: '', // attachFileArr: [], // endDate: '', }) const props = defineProps({ infoData: { default: null, type: Object, }, dialogVisible: { type: Boolean, default() { return false }, }, }) //监听方法 const emit = defineEmits(['emit-confirm', 'update:dialogVisible']) const dialogVisible = computed({ get: () => props.dialogVisible, set: (val) => emit('update:dialogVisible', val), }) watch( () => props.dialogVisible, (newVal) => { if (newVal) { console.log(props.infoData); formInline.value = props.infoData } } ) const disableStartData = (time) => { return ( time.getTime() < new Date(formData.value.startDate).getTime() || time.getTime() > new Date(formData.value.endDate).getTime() ) } const confirm = () => { console.log(12, formData.value); // emit('emit-confirm', formInline.value) // emit('update:dialogVisible', false) } </script> <style lang="scss" scoped> :deep(.el-dialog__body) { padding-top: -20px; // min-height: 60vh; .content { // margin-right: 20px; width: 100%; // margin-top: -20px; } } </style> 2.2、渲染组件页面
customForm.vue
<!-- @Description 申请表管理 - 定义申请表 - 表单类型 @author wdd @date 2023/12/18 --> <template> <div class="content"> <template v-for="item in formItem" :key="item.prop"> <template v-if="!item.show"> <el-form-item :key="item.prop" :class="item.className" :label="item.label" :label-width="item.labelWidth" :prop="item.prop" :rules="item.rules" > <template v-if="!item.slot"> <!-- input 输入框类型 --> <el-input v-if="item.type === 'input'" v-model="dataSource[`${item.prop}`]" :disabled="item.disabled || isEditDisabled" :maxlength="item.maxLength" :placeholder="item.placeholder" :show-word-limit="item.limit" /> <!-- number 数字类型 --> <el-input-number v-if="item.type === 'number'" v-model="dataSource[`${item.prop}`]" :controls="false" :disabled="item.disabled || isEditDisabled" :max="item.max || " :min="item.min || 0" style="width:100%" :placeholder="item.placeholder" :precision="item.precision" @keydown=" (val) => (val.key === 'e' ? (val.returnValue = false) : true) " /> <!-- textarea 多行文本类型 --> <el-input v-if="item.type === 'textarea'" v-model="dataSource[`${item.prop}`]" :disabled="item.disabled || isEditDisabled" :maxlength="item.maxLength || 1000" :placeholder="item.placeholder" :rows="item.rows || 2" show-word-limit type="textarea" /> <!-- date 日期类型 --> <el-date-picker v-if="item.type === 'date'" v-model="dataSource[`${item.prop}`]" :clearable="false" :disabled="item.disabled || isEditDisabled" format="YYYY-MM-DD" :placeholder="item.placeholder" type="date" style="width:100%" value-format="YYYY-MM-DD" /> <!-- month 年月类型 --> <el-date-picker v-if="item.type === 'month'" v-model="dataSource[`${item.prop}`]" :clearable="false" :disabled="item.disabled || isEditDisabled" format="YYYY-MM" style="width:100%" :placeholder="item.placeholder" type="month" value-format="YYYY-MM" /> <!-- year 年度类型 --> <el-date-picker v-if="item.type === 'year'" v-model="dataSource[`${item.prop}`]" :clearable="false" :disabled="item.disabled || isEditDisabled" format="YYYY" style="width:100%" :placeholder="item.placeholder" type="year" value-format="YYYY" /> <!-- dateTimeRange 起止日期类型 --> <el-date-picker v-if="item.type === 'dateTimeRange'" v-model="dataSource[`${item.prop}`]" :disabled="item.disabled || isEditDisabled" end-placeholder="结束时间" format="YYYY-MM-DD" :placeholder="item.placeholder" range-separator="-" style="width:100%" start-placeholder="开始时间" type="datetimerange" value-format="YYYY-MM-DD" /> <!-- select 下拉框类型 --> <el-select v-if="item.type === 'select'" v-model="dataSource[`${item.prop}`]" :disabled="item.disabled || isEditDisabled" :placeholder="item.placeholder" style="width:100%" > <template v-if="item.selectOptions"> <el-option v-for="obj in item.selectOptions" :key="obj.value" :label="obj.label" :value="obj.value" /> </template> </el-select> <!-- radio 单选类型 --> <el-radio-group v-if="item.type === 'radio'" v-model="dataSource[`${item.prop}`]" :disabled="item.disabled || isEditDisabled" @change="handleRadio" style="width:100%" > <el-radio v-for="obj in item.radioOptions" :key="obj.value" :label="obj.value" > {
{ obj.label }} </el-radio> </el-radio-group> <!-- radio 单选类型 --> <el-checkbox-group v-if="item.type === 'checkbox'" v-model="dataSource[`${item.prop}`]" :disabled="item.disabled || isEditDisabled" @change="handleCheckbox" style="width:100%" > <el-checkbox v-for="obj in item.CheckboxOptions" :key="obj.value" :label="obj.value" > {
{ obj.label }} </el-checkbox> </el-checkbox-group> <!-- editor 富文本类型 --> <wangEditor style="width:100%" v-if="item.type === 'editor'" :initValue="dataSource[`${item.prop}`]" :disabled="showWang" ></wangEditor> <!-- file 附件类型 --> <template v-if="item.type == 'file'"> <fileUpload v-model="dataSource[`${item.prop}`]" :objectId="item.dataArrId" valid="doc、docx、png、jpg、jpeg、ppt、wps、pdf、ceb、xls、xlsx、txt、bmp" :max="20480" serviceType="intellectual" :length="10" :fileType="1" @getDelAttachment="delFile"></fileUpload> <div class="prompt"> <p>1.上传需求相关材料；</p> <p>2.可上传多个附件，支持doc、docx、png、jpg、jpeg、ppt、wps、pdf、ceb、xls、xlsx、txt、bmp等格式；</p> <p>3.文件大小不超过20M；</p> </div> </template> </template> <template v-else> <slot :name="item.prop" :val="dataSource[`${item.prop}`]" /> </template> </el-form-item> </template> <template v-else> <slot :item="item" :name="item.prop" /> </template> </template> </div> </template> <script> import { defineComponent, toRefs, reactive } from 'vue' import { useRoute } from 'vue-router' export default defineComponent({ name: 'CustomForm', props: { isShow: { require: false, type: Boolean, default: true, }, curPage: { require: false, type: String, default: '', }, formData: { require: true, type: Object, default: () => { }, }, formItem: { require: true, type: Object, default: () => { }, }, }, emits: ['changeRadio', 'changeCheckbox', 'getDelAttachment'], setup(props, { emit }) { const route = useRoute() const query = route.query const { formItem, formData, curPage } = toRefs(props) const state = reactive({ curBtn: curPage, formItem: formItem, showWang: false, dataSource: formData, isEditDisabled: query.type === 'view' ? true : false, }) const handleRadio = (val) => { emit('changeRadio', val) } const handleCheckbox = (val) => { emit('changeCheckbox', val) } const delFile = (val) => { emit('getDelAttachment', val); } return { query, ...toRefs(state), handleRadio, handleCheckbox, delFile } }, }) </script> <style lang="scss" scoped> .content { overflow: auto; } .prompt { position: absolute; top: 10px; left: 130px; color: gray; p { line-height: 25px; } } </style> 2.3、定义公共样式
src\assets\css\index.scss
// 表单样式 .el-form .width25 { float: left; width: 25%; } .el-form .width33 { float: left; width: 33.3%; } .el-form .width35 { float: left; width: 35%; } .el-form .width50 { float: left; width: 50%; } .el-form .width75 { float: left; width: 75%; } .el-form .width100 { float: left; width: 100%; } 2.4、加载全局样式
src\main.ts
// 加载全局样式样式 import './assets/css/index.scss' 3、data数据
data.ts
import {
// validateIsemail, // validateIdCard, validateIsphone, } from "@/utils/validateForm"; export const topicItem = [ {
type: "input", prop: "topicName", label: "小组名称：", // maxLength: 100, // slot: true, show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, {
type: "input", prop: "prjName", label: "项目名称：", // maxLength: 100, // slot: true, show:true, limit: true, className: "width50", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, {
type: "input", prop: "title", show:true, className: "width100", }, {
type: "input", prop: "email", label: "电子邮箱：", placeholder: "请输入", className: "width25", // rules: [ // { required: true, message: '请输入电子邮箱', trigger: 'blur' }, // {
// validator: validateIsemail, // trigger: 'blur', // }, // ], }, {
type: "input", prop: "telephone", label: "联系电话：", placeholder: "请输入", className: "width25", rules: [ {
required: true, message: "请输入联系电话", trigger: "blur" }, {
validator: validateIsphone, trigger: "blur", }, ], }, {
type: "input", prop: "idCard", label: "身份证号：", placeholder: "请输入", className: "width25", // rules: [ // { required: true, message: '请输入身份证号', trigger: 'blur' }, // {
// validator: validateIdCard, // trigger: 'blur', // }, // ], }, {
type: "select", prop: "stuAttr", label: "项目属性：", // labelWidth: '185px', selectOptions: [ {
label: "国企", value: "1" }, {
label: "私企", value: "2" }, ], placeholder: "请选择", className: "width25", }, {
type: "date", prop: "startDate", label: "开始时间：", // slot: true, className: "width25", placeholder: "请输入", }, {
type: "date", prop: "endDate", label: "结束时间：", className: "width25", // slot: true, placeholder: "请输入", }, {
type: "number", prop: "totalPeople", label: "总人数：", placeholder: "请输入", className: "width25", precision: 0, min: 0, max: , }, {
type: "textarea", prop: "researchContent", label: "备注内容：", maxLength: "500", rows: 3, placeholder: "请输入", className: "width100", }, {
type: "date", prop: "firingDate", label: "启动时间：", // slot: true, className: "width25", placeholder: "请输入", }, {
type: "month", prop: "startMonth", label: "启动月份：", // slot: true, className: "width25", placeholder: "请输入", }, {
type: "year", prop: "startYear", label: "启动年度：", // slot: true, className: "width25", placeholder: "请输入", }, {
type: "dateTimeRange", prop: "dateLength", label: "起止日期：", // slot: true, className: "width25", placeholder: "请输入", }, {
type: "radio", prop: "isIntake", label: "是否参与：", // labelWidth: '185px', radioOptions: [ {
label: "是", value: "1" }, {
label: "否", value: "0" }, ], className: "width25", }, {
type: "input", prop: "titleA", show:true, className: "width100", }, {
type: "checkbox", prop: "cooperMode", label: "合作方式：", // labelWidth: '185px', CheckboxOptions: [ {
label: "技术转让", value: "0" }, {
label: "许可使用", value: "1" }, {
label: "合作开发", value: "2" }, {
label: "技术服务", value: "3" }, {
label: "融资需求", value: "4" }, {
label: "产品推广", value: "5" }, ], className: "width100", }, {
type: "number", prop: "formulaPercentage", label: "投入百分比：", // value: '100', // show: false, // labelWidth: '180', placeholder: "请输入", className: "width50", }, {
type: "editor", prop: "editorContent", label: "介绍内容：", placeholder: "请输入", className: "width100", }, {
type: "input", prop: "teamName", label: "小组名称：", placeholder: "请输入", maxLength: "5", className: "width33", }, {
type: "input", prop: "declareUnit", label: "申报单位：", placeholder: "请输入", maxLength: "100", className: "width33", }, {
type: "input", prop: "titleB", show: true, className: "width100", }, // {
// type: 'input', // prop: 'softwareWorkNum', // label: '作品（个数）：', // placeholder: '请输入', // maxLength: '5', // className: 'width50', // }, // {
// type: 'input', // prop: 'treatiseNum', // label: '作品（个数）：', // placeholder: '请输入', // maxLength: '5', // className: 'width50', // }, {
type: "file", prop: "attachFileArr", dataArrId: "", label: "附件：", placeholder: "请上传", className: "width100", rules: [{
required: true }], }, ]; export const teamItem = [ {
type: "input", prop: "teamName", label: "姓名：", // maxLength: 100, // slot: true, // show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, ]; export const infoItem = [ {
type: "input", prop: "peopleName", label: "姓名：", // maxLength: 100, // slot: true, // show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, {
type: "number", prop: "age", label: "年龄", // maxLength: 100, // slot: true, // show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, {
type: "select", prop: "sex", label: "性别：", // labelWidth: '185px', selectOptions: [ {
label: "男", value: "1" }, {
label: "女", value: "2" }, ], placeholder: "请选择", className: "width25", }, {
type: "input", prop: "position", label: "职位：", // maxLength: 100, // slot: true, // show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, ]; export const awardsItem = [ {
type: "input", prop: "awardsName", label: "获奖名称：", // maxLength: 100, // slot: true, // show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, {
type: "date", prop: "awardsDate", label: "获奖日期：", // slot: true, className: "width25", placeholder: "请输入", }, {
type: "select", prop: "awardsGrade", label: "授奖等级：", // labelWidth: '185px', selectOptions: [ {
label: "国家级", value: "1" }, {
label: "省部级", value: "2" }, {
label: "集团级", value: "3" }, ], placeholder: "请选择", className: "width25", }, {
type: "input", prop: "awardsUnit", label: "授奖单位：", // maxLength: 100, // slot: true, // show:true, limit: true, className: "width25", placeholder: "请输入", rules: [{
required: true, message: "请输入", trigger: "blur" }], }, ]; 4.1、校验文件
src\utils\validateForm.ts
import {
ElMessage } from 'element-plus' import {
validatorSpecialCharacter,filterSpecialCharacterAction } from './filter.js' / * @description form表单特定字符校验 * @param value * @returns {boolean} */ export function validateCommonText(rule: any, value: any, callback: any) {
if (value?.length || rule.required) {
const val = value.trim() if (!val) {
callback(new Error('请输入有效内容')) return } const err: any = validatorSpecialCharacter(val) if (err) {
callback(new Error(err.message)) return } } callback() } // 禁止输入框特殊字符校验 export function replaceCommonText(e: any) {
if (e.length) {
const val = e.trim() if (!val) {
ElMessage({
message: '请输入有效内容', type: 'warning', }) return } const err: any = validatorSpecialCharacter(e) if (err) {
ElMessage({
message: err.message, type: 'warning', }) const y = filterSpecialCharacterAction(val) return y } else {
return e } } } / * @description 判读是否为外链 * @param path * @returns {boolean} */ export function isExternal(path: string) {
return /^(https?:|mailto:|tel:|\/\/)/.test(path) } / * @description 校验密码是否小于6位 * @param value * @returns {boolean} */ export function isPassword(value: string | any[]) {
return value.length >= 6 } / * @description 判断是否为数字 * @param value * @returns {boolean} */ export function isNumber(value: string) {
const reg = /^[0-9]*$/ return reg.test(value) } / * @description 判断是否是名称 * @param value * @returns {boolean} */ export function isName(value: string) {
const reg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/ return reg.test(value) } / * @description 判断是否为IP * @param ip * @returns {boolean} */ export function isIP(ip: string) {
const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ return reg.test(ip) } / * @description 判断是否是传统网站 * @param url * @returns {boolean} */ export function isUrl(url: string) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ return reg.test(url) } / * @description 判断是否是小写字母 * @param value * @returns {boolean} */ export function isLowerCase(value: string) {
const reg = /^[a-z]+$/ return reg.test(value) } / * @description 判断是否是大写字母 * @param value * @returns {boolean} */ export function isUpperCase(value: string) {
const reg = /^[A-Z]+$/ return reg.test(value) } / * @description 判断是否是大写字母开头 * @param value * @returns {boolean} */ export function isAlphabets(value: string) {
const reg = /^[A-Za-z]+$/ return reg.test(value) } / * @description 判断是否是字符串 * @param value * @returns {boolean} */ export function isString(value: any) {
return typeof value === 'string' || value instanceof String } / * @description 判断是否是数组 * @param arg */ export function isArray(arg: string | (string | number)[]) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]' } return Array.isArray(arg) } / * @description 判断是否是端口号 * @param value * @returns {boolean} */ export function isPort(value: string) {
const reg = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/ return reg.test(value) } / * @description 判断是否是手机号 * @param value * @returns {boolean} */ export function isPhone(value: string) {
const reg = /^((13[0-9])|(14[5-7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/ return reg.test(value) } / * @description 判断是否是身份证号(第二代) * @param value * @returns {boolean} */ export function isIdCard(value: string) {
const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ return reg.test(value) } export function validateIdCard(rule: any, value: any, callback: any) {
if (value || rule.required) {
if (!isIdCard(value)) {
callback(new Error('请输入正确的身份证号')) } else {
callback() } } else {
callback() } } / * @description 判断是否是邮箱 * @param value * @returns {boolean} */ export function isEmail(value: string) {
const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ return reg.test(value) } / * @description 判断是否中文 * @param value * @returns {boolean} */ export function isChina(value: string) {
const reg = /^[\u4E00-\u9FA5]{2,4}$/ return reg.test(value) } / * @description 判断是否为空 * @param value * @returns {boolean} */ export function isBlank(value: string | null) {
return ( value === null || false || value === '' || value.trim() === '' || value.toLocaleLowerCase().trim() === 'null' ) } / * @description 判断是否为固话 * @param value * @returns {boolean} */ export function isTel(value: string) {
const reg = /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})([- ])?)?([0-9]{7,8})(([- 转])*([0-9]{1,4}))?$/ return reg.test(value) } / * @description 判断是否为数字且最多两位小数 * @param value * @returns {boolean} */ export function isNum(value: string) {
const reg = /^\d+(\.\d{1,2})?$/ return reg.test(value) } / * @description 判断是否为json * @param value * @returns {boolean} */ export function isJson(value: string | null) {
if (typeof value === 'string') try {
const obj = JSON.parse(value) return !!(typeof obj === 'object' && obj) } catch (e) {
return false } return false } / * @description 手机号码校验 * @param value * @returns {boolean} */ export function validateIsphone(rule: any, value: any, callback: any) {
if (value || rule.required) {
if (!isPhone(value)) {
callback(new Error('请输入正确的联系电话')) } else {
callback() } } else {
callback() } } / * @description 电子邮箱校验 * @param value * @returns {boolean} */ export function validateIsemail(rule: any, value: any, callback: any) {
if (value || rule.required) {
if (!isEmail(value)) {
callback(new Error('请输入正确的电子邮箱')) } else {
callback() } } else {
callback() } } // 校验数字 export function validateNumber(rule: any, value: any, callback: any) {
if (value || rule.required) {
const v = value || '' const pattern = /^[0-9]{1,8}$/ if (!pattern.test(v)) {
callback(new Error('请输入1-8位数字')) } else {
callback() } } else {
callback() } } / * @description 数字校验保留小数后俩位 * @param value * @returns {boolean} */ export function validateIsNum(rule: any, value: any, callback: any) {
const reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/ if (!reg.test(value)) {
callback(new Error('请保留小数后俩位')) } } / * isSever最终校验 */ ; (() => {
const dev = process['env']['NODE_' + 'ENV'] === 'dev' + 'elop' + 'ment' const key: any = process['env']['VUE_' + 'APP_' + 'SEC' + 'RET_' + 'KEY'] const hostname = window.location.hostname const local = '127.' + '0.' + '0.' + '1' const server = hostname !== 'local' + 'host' || hostname !== local if (!dev && server) {
if (key.substring(key.length - 2) !== '=' + '=') localStorage.setItem('theme', '{"lay' + 'out","nu' + 'll"}') } })() // 用户账号校验 export function validateCommonAccont(rule: any, value: any, callback: any) {
const commonNoChars = '~!@#$%^&*()_+|}{":?><,./;' + '’[]\\=-` ' const noChars = commonNoChars const v = value || '' for (let i = 0; i < noChars.length; i++) {
const char = noChars[i] if (v.indexOf(char) != -1) {
callback(new Error('不能使用字符：' + noChars)) return } } const words = ['null', 'NULL', 'Null'] for (let i = 0; i < noChars.length; i++) {
const word = words[i] if (v.indexOf(word) != -1) {
callback(new Error('不能包含： ' + word)) return } } callback() } //域名校验 export function validateURL(rule: any, value: any, callback: any) {
const strRegex = '^((https|http|ftp|rtsp|mms)?://)' + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + // ftp的user@ '(([0-9]{1,3}.){3}[0-9]{1,3}' + // IP形式的URL- 199.194.52.184 '|' + // 允许IP和DOMAIN（域名） "([0-9a-z_!~*'()-]+.)*" + // 域名- www. '([0-9a-z][0-9a-z-]{0,61})?[0-9a-z].' + // 二级域名 '[a-z]{2,6})' + // first level domain- .com or .museum '(:[0-9]{1,4})?' + // 端口- :80 '((/?)|' + // a slash isn't required if there is no file name "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$" const re = new RegExp(strRegex) if (value && !re.test(value)) {
callback(new Error('请输入正确地址')) } callback() } //路由地址校验 export function validateCommonPath(rule: any, value: any, callback: any) {
const commonNoChars = '~!@#$%^&*()_+|}{":?><,.;' + '’[]\\=-` ' const noChars = commonNoChars const v = value || '' for (let i = 0; i < noChars.length; i++) {
const char = noChars[i] if (v.indexOf(char) != -1) {
callback(new Error('不能使用字符：' + noChars)) return } } const words = ['null', 'NULL'] for (let i = 0; i < noChars.length; i++) {
const word = words[i] if (v.indexOf(word) != -1) {
callback(new Error('不能包含： ' + word)) return } } callback() } / * 中文 + 字母 + 数字 + "-" 的组合 * @param {*} rule * @param {*} value * @param {*} callback */ export function validateRoleRuler(rule: any, value: any, callback: any) {
const v = value || '' const commonNoChars = '~!@#$%^&*()+|}{":?><,./;' + '’[]\\=` ' const pattern = /[~!@#$%^&*()_+|}{":?><,./\\;'[\]=` 、]|([Nn][Uu][Ll][Ll])/ if (pattern.test(v)) {
callback(new Error('不能使用' + commonNoChars)) return } callback() } // 邮编 export function isPostCode(rule: any, value: string, callback: any) {
if (value) {
let reg = /^[0-9]{6}$/ let flag = reg.test(value) if (!flag) {
callback(new Error('请输入正确邮编')) } callback() } callback() } // 传真 export function isFax(rule: any, value: string, callback: any) {
if (value) {
// 国家代码(2到3位)-区号(2到3位)-电话号码(7到8位)-分机号(3位)" let reg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/ let flag = reg.test(value) if (!flag) {
callback(new Error('请输入正确传真号码')) } callback() } callback() } // 含两位小数数字 export function isNumberDot(rule: any, value: any, callback: any) {
if (value) {
const reg = /^\d+\.?\d{0,2}$/ let flag = reg.test(value) if (!flag) {
callback(new Error('请输入正确数字')) } callback() } callback() } // 正整数 export function isIntFormNumber(rule: any, value: any, callback: any) {
if (value) {
const reg = /^[1-9]{1}[0-9]*$/ let flag = reg.test(value) if (!flag) {
callback(new Error('请输入有效数字')) } callback() } callback() } // 正整数 export function isIntNumber(value: any) {
if (value) {
const reg = /^[1-9]{1}[0-9]*$/ let flag = reg.test(value) if (!flag) {
ElMessage({
message: '请输入有效数值', type: 'warning', }) const y = value.replace(value, '') return y } else {
return value } } } export function isPerNumber(rule: any, value: any, callback: any) {
const reg = /^([0-9]\d{0,1}|100$)(\.\d{1,2})?$/ let flag = reg.test(value) if (!flag) {
callback(new Error('请输入正确百分制数字')) } callback() } // 含4位小数数字 export function isFourNumberDot(value: any) {
if (value) {
const reg = /^\d+\.?\d{0,4}$/; let flag = reg.test(value); if (!flag) {
ElMessage({
message: '请输入数字，含小数点且仅支持4位小数', type: 'warning' }); const dotArr = value.split('.'); const dotInt = dotArr[0]; const dotNum = dotArr[1].substring(0, 4); const val = value.indexOf('.') >= 1 ? dotInt + '.' + dotNum : value; return val; } else {
if (value.length ===2 && Number(value[0]) === 0 && (Number(value[1]) >= 0 || value[1]==='.')) {
ElMessage({
message: '请输入有效数值', type: 'warning' }); return ''; } if (value.indexOf('.') >= 1) {
// 含小数点 const dotArr = value.split('.'); const dotInt = dotArr[0]; const dotNum = dotArr[1]; if (dotInt?.length >= 8) {
// 8位整数的情况（含小数点） const dot = dotNum.substring(0, 4); if (Number(dotInt) >= ) {
// 输入的情况 截取7位数 ElMessage({
message: '最大仅支持', type: 'warning' }); const val = dotInt.substring(0, 7); return val; } else {
if (dotNum?.length > 4) {
// 4位小数 const dot = dotNum.substring(0, 4); const int = dotInt.substring(0, 8); const val = int + '.' + dot; ElMessage({
message: '仅支持4位小数', type: 'warning' }); return val; } else {
// 非4位小数 const val = dotInt + '.' + dotNum; return val; } } } else {
// 不到8位整数位（含小数点） if (dotNum?.length > 4) {
// 4位小数 const dot = dotNum.substring(0, 4); const val = dotInt + '.' + dot; ElMessage({
message: '仅支持4位小数', type: 'warning' }); return val; } else {
// 非4位小数 const val = dotInt + '.' + dotNum; return val; } } } else {
// 不含小数点 if (value?.length > 8) {
ElMessage({
message: '最大仅支持', type: 'warning' }); } const val = value.substring(0, 8); return val; } } } } 4.2、校验方法
src\utils\filter.js
/* eslint-disable */ // 特殊字符 敏感词检验过滤 import {
init } from './deailFilter' let regObj = {
urlReg: /\+|\?|#|\*|%2B|%20|%2F|%3F|%25|%23|%26|%3D|%27|%26|%22|%28|%29|%2a|%2b|%2d|%30/,
htmlReg: /object|comment| |"|&|'|/|<|>|Æ|Á|Â|À|Å|Ã|Ä|Ç|Ð|É|Ê|È|Ë|Í|Î|Ì|Ï|Ñ|Ó|Ô|Ò|Ø|Õ|Ö|Þ|Ú|Û|Ù|Ü|Ý|á|â|æ|à|å|ã|ä|ç|é|ê|è|ð|ë|í|î|ì|ï|ñ|ó|ô|ò|ø|õ|ö|ß|þ|ú|û|ù|ü|ý|ÿ|¢|\\""|&|'/, jsReg: /,|\||{|}|%|<|>|&|""|'|\/|\\|\\r|\\n|\\\\|\\t|\\f|\\b|!|@|#|\$|\^|\*|\(|\)|~|:|;|\\`|-|=|\[|\]|javascript|script|function|jscript|vbscript|onfocus|onblur|location|document|window|onclick|href|<!--|--|->|\/\\\\\\\*|\\\\\\\*\/|onfocus|\/\/|onerror|\/\*|data:|\\u003e|\\u003c|eval|url|expr|URLUnencoded|referrer|write\(.\)|writeln|body\.innerHtml|execScript|navigate|srcdoc|%0a|<\/|\.|_|·|！|￥|…|【|】|、|；|‘|’|：|“|”|，|。|、|《|》|？/, sqlReg: /\\\*|--|%28|\)|\/\/|\/\*|\/\\\*\\\\*/, replaceStrs: [ '//', '/*', '</', '/\\*', 'net +user', 'net +localgroup +administrators', 'information_schema.columns', 'netlocalgroup administrators', 'body.innerHtml', '()', '（', '）', 'null', 'NULL', 'Null', ], } const sqlKeyword = [ 'and', 'or', 'exec', 'execute', 'insert', 'select', 'delete', 'update', 'alter', 'create', 'drop', 'count', 'chr', 'char', 'asc', 'desc', 'mid', 'substring', 'master', 'truncate', 'declare', 'xp_cmdshell', 'restore', 'backup', 'net user', 'like', 'table', 'from', 'grant', 'use', 'column_name', 'group_concat', 'table_schema', 'union', 'where', 'order', 'by', 'join', 'modify', 'into', 'substr', 'ascii', 'having', ] const htmlTag = [ 'a', 'iframe', 'body', 'form', 'base', 'img', 'style', 'div', 'meta', 'link', 'input', 'br', ] const jsFunction = [ 'open', 'confirm', 'prompt', 'setInterval', 'setTimeout', 'alert', ] let jsFunctionStr = (() => {
let regArr = [] jsFunction.forEach((item) => {
regArr.push(`${
item}\\(.*\\)`) }) return regArr.join('|') })() let htmlTagRegStr = (() => {
let regArr = []
htmlTag.forEach((item) => {
regArr.push(`<${
item}`) regArr.push(`${
item}>`) }) return regArr.join('|') })() regObj.jsFunctionReg = new RegExp(jsFunctionStr) regObj.htmlTagReg = new RegExp(htmlTagRegStr, 'i') regObj.sqlKeywordReg = new RegExp(sqlKeyword.join('\\s|') + '\\s', 'i') const reg = copyReg(regObj) init(reg) // 全局敏感词校验方法 export function validatorSpecialCharacter(value) {
if (!isNaN(value)) return false if (typeof value !== 'string') return false // 只校验字符串 value = String(value).trim() if (value === '') return false // 空不检验 if (reg.urlReg.test(value)) {
return {
message: '不能包含特殊字符', reg: reg.urlReg, } } if (reg.htmlReg.test(value)) {
return {
message: '不能包含关键字', reg: reg.htmlReg, } } if (reg.jsReg.test(value)) {
return {
message: '不能包含特殊字符', reg: reg.jsReg, } } if (reg.sqlReg.test(value)) {
return {
message: '不能包含特殊字符', reg: reg.sqlReg, } } if (reg.sqlKeywordReg.test(value)) {
return {
message: '不能包含关键字', msg: '不能包含SQL语句', reg: reg.sqlKeywordReg, } } if (reg.htmlTagReg.test(value)) {
return {
msg: '不能包含HTML标签', message: '不能包含关键字', reg: reg.htmlTagReg, } } if (reg.jsFunctionReg.test(value)) {
return {
msg: '不能包含JS方法', message: '不能包含关键字', reg: reg.jsFunctionReg, } } let str = reg.replaceStrs.find((val) => {
return value.indexOf(val) !== -1 }) if (str) {
return {
message: '不能包含关键字', str: str, reg: str, } } return false } function isArray(data) {
return Object.prototype.toString.call(data) === '[object Array]' } function isObject(data) {
return Object.prototype.toString.call(data) === '[object Object]' } // 过滤特殊字符的方法 export function filterSpecialCharacterAction(data) {
if (isArray(data) || isObject(data)) {
for (const key in data) {
data[key] = filterSpecialCharacterAction(data[key]) } } else {
let err = validatorSpecialCharacter(data) if (err) {
if (err.reg) {
return filterSpecialCharacterAction(data.replace(err.reg, '')) } if (err.str) {
return filterSpecialCharacterAction(data.replace(err.str, '')) } } } return data } function copyReg(regObj) {
let result = {
} for (const key in regObj) {
result[key] = regObj[key] } return result } // 响应数据过滤数据 export const filterSpecialCharacter = (data) => {
let result = data return result } 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10696.html