javascript中使用正则表达式的一例 - 判断页码范围

之前长时间使用struts框架进行验证,一直是在validation.xml中配置正则表达式来实现的。只要配置了正确的正则表达式,剩下的过程全都不要关心,这一切全部是在server端由struts框架完成的,至于其中具体的验证过程却一直没有仔细的了解过,应该是利用了jdk中的regex相关的类。

 

最近有业务要求必须在页面无刷新的情况下完成验证。想了一下,在不考虑使用ajax的情况下,只有使用javascript来完成这个验证过程了。

 

在调查了javascript中正则表达式相关的几个method之后,决定使用RegExp类和string.match()来完成这个验证过程。

 

 

本次是要完成一个关于页码范围的验证。就是我们使用word文档进行打印的时候,页码的选择范围。在这个输入框中我们可以只选择想打印的page,可以输入具体的页码(如:3)也可以使用范围(如:3-5)。而且可以使用“,"来连接多个选项。

 

首先是声明一个全局检索的正则表达式对象pageNumRegExp。然后调用string的match()方法。这个方法返回一个数组,包含所有匹配的字符串。在不匹配的时候会返回null。所以使用的判断逻辑就是,如果返回结果不为null,并且数组长度为1,而且这个匹配的结果正好是要验证的字符串的话,就说明这个字符串是符合验证规则的。

 

以上这种方法是我现在能想到的最简洁的方式,有朋友有更好的方法的话,拜托留言交流一下,多谢!

 

<template> <el-dialog :visible.sync="dialogVisible" :title="`${title[operateType]}范围子规则`" width="500" :close-on-click-modal="false" > <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="base-ruleForm" label-position="top" size="mini" :disabled="operateType == 'detail'" > <el-form-item label="规则名称" prop="nameCn"> <el-input v-model="ruleForm.nameCn"></el-input> </el-form-item> <el-form-item label="描述" prop="description"> <el-input v-model="ruleForm.description" type="textarea" rows="3" show-word-limit maxlength="200" ></el-input> </el-form-item> </el-form> <el-form :model="customRuleForm" :rules="customRules" :inline="true" ref="customRuleFormRef" label-width="100px" class="custom-ruleForm" label-position="top" size="mini" :disabled="operateType == 'detail'" > <el-form-item label="发送人类型" prop="fromTypeList"> <el-select v-model="customRuleForm.fromTypeList" multiple @change="dealSelectAll('fromTypeList')" > <el-option v-for="opt in filterOptions.FromTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="接收人类型" prop="toTypeList"> <el-select v-model="customRuleForm.toTypeList" multiple @change="dealSelectAll('toTypeList')" > <el-option v-for="opt in filterOptions.ToTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="消息类型" prop="msgTypeList"> <el-select v-model="customRuleForm.msgTypeList" multiple> <el-option v-for="opt in filterOptions.MsgTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="聊天类型" prop="chatTypeList"> <el-select v-model="customRuleForm.chatTypeList" multiple @change="changeChatTypeList(false)" > <el-option v-for="opt in filterOptions.ChatTypeEnum" :key="opt.code" :label="opt.info" :value="opt.code" > </el-option> </el-select> </el-form-item> <el-form-item label="群聊群主" prop="roomOwnerIdList"> <el-select v-model="customRuleForm.roomOwnerIdList" multiple> <el-option v-for="opt in filterOptions.RoomOwnerIdListEnum" :key="opt.ownerId" :label="opt.ownerName" :value="opt.ownerId" > </el-option> </el-select> </el-form-item> <el-form-item label="群主员工所属部门" prop="roomOwnerDeptList"> <el-select v-model="customRuleForm.roomOwnerDeptList" multiple> <el-option v-for="opt in filterOptions.RoomOwnerDeptListEnum" :key="opt.id" :label="opt.name" :value="opt.id" > </el-option> </el-select> </el-form-item> <el-form-item label="群聊列表" prop="roomIdList"> <el-select v-model="customRuleForm.roomIdList" multiple @change="changeRoomId(false)" > <el-option v-for="opt in filterOptions.RoomIdListEnum" :key="opt.roomId" :label="opt.roomName" :value="opt.roomId" > </el-option> </el-select> </el-form-item> <el-form-item label="群聊成员白名单" prop="roomExcludeList"> <el-select v-model="customRuleForm.roomExcludeList" multiple> <el-option v-for="opt in filterOptions.roomExcludeListEnum" :key="opt.qwUserId" :label="opt.name" :value="opt.qwUserId" > </el-option> </el-select> </el-form-item> <el-form-item label="群聊关注成员" prop="roomFocueList"> <el-select v-model="customRuleForm.roomFocueList" multiple> <el-option v-for="opt in filterOptions.roomExcludeListEnum" :key="opt.qwUserId" :label="opt.name" :value="opt.qwUserId" > </el-option> </el-select> </el-form-item> <el-form-item label="员工" prop="employeeList"> <private-cloud-member-select-new style="width: 100%" ref="privateCloudMemberUse" placeholder="请选择员工" :defaultCheckedKey="defalutValue.employeeList" mode="member" @selectedMembers="choseEmployeeList" /> </el-form-item> <el-form-item label="部门" prop="deptList"> <private-cloud-member-select-new style="width: 100%" ref="privateCloudDeptUse" mode="group" placeholder="请选择部门" :defaultCheckedKey="defalutValue.deptList" @selectedGroups="choseDeptList" /> </el-form-item> <el-form-item label="是否启用白名单" prop="enableWhite"> <el-switch v-model="customRuleForm.enableWhite" :active-value="1" :inactive-value="0" > </el-switch> </el-form-item> <el-form-item label="正则表达式" prop="textRegex" style="width: 100%"> <vue-json-editor v-model="customRuleForm.textRegex" style="width: 100%" mode="code" lang="zh" ></vue-json-editor> </el-form-item> </el-form> <div class="el-form-item el-form--label-top" style="margin-bottom: 0"> <label for="" class="el-form-item__label">扩展信息</label> <div class="el-form-item__content extra-info"> <vue-json-editor ref="jsonRef" v-model="ext" style="width: 100%" mode="code" lang="zh" ></vue-json-editor> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="save" :disabled="operateType == 'detail'" > 确定 </el-button> </div> </el-dialog> </template> <script> import vueJsonEditor from 'vue-json-editor' import archivesApi from '@/api/archive/index' import dayjs from 'dayjs' import InfiniteScrollSelect from './infiniteScrollSelect.vue' import { get } from 'lodash' export default { components: { vueJsonEditor, InfiniteScrollSelect, }, props: { type: String, }, data() { return { dialogVisible: false, ruleForm: { nameCn: '', description: '', }, rules: { nameCn: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }, ], }, formConfig: [], customRuleForm: { fromTypeList: null, toTypeList: null, msgTypeList: null, chatTypeList: null, roomOwnerIdList: null, roomOwnerDeptList: null, roomIdList: null, roomExcludeList: null, roomFocueList: null, employeeList: null, deptList: null, enableWhite: 0, textRegex: {}, }, filterOptions: {}, customRules: {}, ext: {}, hasJsonErrorFlag: false, defalutValue: { employeeList: [], deptList: [], }, isEdit: false, operateType: null, editIndex: null, groupData: [], title: { add: '添加', edit: '编辑', detail: '查看', }, } }, watch: { dialogVisible(newVal) { if (!newVal) { this.resetFiled() } }, }, mounted() {}, methods: { // 获取筛选项 async getFilter(filter, ruleType, row = null, index) { this.operateType = ruleType this.isEdit = ruleType === 'edit' ? true : false if (this.isEdit) { this.editIndex = index } this.filterOptions = { ...filter } await this.getRoomList(true) await this.getOwnerDeptList() if (ruleType === 'add' && row) { this.$set(this.ruleForm, 'nameCn', row.nameCn) } else if (row) { this.$set(this.ruleForm, 'nameCn', row.nameCn) this.$set(this.ruleForm, 'description', row.description) this.customRuleForm = { ...row } this.customRuleForm.textRegex = JSON.parse(row.textRegex) if (row.ext) { this.ext = JSON.parse(row.ext) } this.defalutValue.employeeList = row.employeeListIds?.map( (item) => `_${item}` || [] ) this.defalutValue.deptList = row.deptList ? [...row.deptList] : [] await this.changeChatTypeList(true) await this.changeRoomId(true) } }, dealSelectAll(type) { if (this.customRuleForm[type]?.includes(0)) { this.customRuleForm[type] = [0] } }, async getRoomList1(query, page, size) { console.log('选项', query, page, size) let roomRes await archivesApi .getRoomList({ query, page, size }) .then((res) => { roomRes = res }) .catch(() => {}) return roomRes }, async fetchItemById(id) { console.log('通过id获取选项', id) }, // 获取群主列表或者群聊列表 async getRoomList(isEditInit) { console.log() await archivesApi .getRoomList({}) .then((res) => { if (res.data.success) { const data = res.data.data this.groupData = [...data] this.changeChatTypeList(isEditInit) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) }, // 选择群聊类型时 changeChatTypeList(isEditInit = false) { console.log('群聊类型isEditInit', isEditInit) if (this.customRuleForm.chatTypeList?.includes(0)) { this.$set(this.customRuleForm, 'chatTypeList', [0]) } if ( this.customRuleForm.chatTypeList.includes(0) || this.customRuleForm.chatTypeList == null ) { this.filterOptions.RoomOwnerIdListEnum = this.groupData.reduce( (acc, item) => { if (!acc.some((i) => i.ownerId === item.ownerId)) { acc.push(item) } return acc }, [] ) this.filterOptions.RoomIdListEnum = this.groupData.reduce( (acc, item) => { if (!acc.some((i) => i.roomId === item.roomId)) { acc.push(item) } return acc }, [] ) } else { this.filterOptions.RoomOwnerIdListEnum = this.groupData .filter((item) => this.customRuleForm.chatTypeList?.includes(item.chatType) ) .reduce((acc, item) => { if (!acc.some((i) => i.ownerId === item.ownerId)) { acc.push(item) } return acc }, []) this.filterOptions.RoomIdListEnum = this.groupData .filter((item) => this.customRuleForm.chatTypeList?.includes(item.chatType) ) .reduce((acc, item) => { if (!acc.some((i) => i.roomId === item.roomId)) { acc.push(item) } return acc }, []) } if (!isEditInit) { this.customRuleForm.roomOwnerIdList = [] this.customRuleForm.roomIdList = [] this.customRuleForm.roomExcludeList = [] this.customRuleForm.roomFocueList = [] } }, // 选择群列表 async changeRoomId(isEditInit = false) { if (this.customRuleForm.roomIdList?.length) { const params = { roomIds: this.customRuleForm.roomIdList, } await archivesApi .getRoomMemberList(params) .then((res) => { if (res.data.success) { const data = res.data.data this.$set(this.filterOptions, 'roomExcludeListEnum', data) this.filterOptions.roomExcludeListEnum = this.filterOptions.roomExcludeListEnum.reduce((acc, item) => { if (!acc.some((i) => i.qwUserId === item.qwUserId)) { acc.push(item) } return acc }, []) } else { this.filterOptions.roomExcludeListEnum = [] this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) console.log('群列表isEditInit', isEditInit) if (!isEditInit) { this.customRuleForm.roomExcludeList = [] this.customRuleForm.roomFocueList = [] } } else { this.filterOptions.roomExcludeListEnum = [] } }, // 获取群主部门 async getOwnerDeptList() { await archivesApi .getOwnerDeptList({}) .then((res) => { console.log('res', res) if (res.data.success) { const data = res.data.data this.$set(this.filterOptions, 'RoomOwnerDeptListEnum', data) } else { this.$message.error(res.data.msg || '获取失败') } }) .catch(() => {}) }, save() { let isPass = true this.$refs.ruleFormRef.validate((valid) => { if (!valid) { isPass = false } }) this.$refs.customRuleFormRef.validate((valid) => { if (!valid) { isPass = false } }) console.log('筛选项验证通过', this.ext) if (this.$refs.jsonRef.error) { isPass = false this.$message.error('扩展信息JSON格式错误') return } if (!isPass) { return } const params = { ...this.customRuleForm, ...this.ruleForm, textRegex: JSON.stringify(this.customRuleForm.textRegex), ext: JSON.stringify(this.ext), } if (this.isEdit) { params.gmtModified = dayjs().format('YYYY-MM-DD HH:mm:ss') this.$emit('freshData', params, this.type, this.editIndex) } else { params.gmtCreate = dayjs().format('YYYY-MM-DD HH:mm:ss') this.$emit('freshData', params, this.type) } this.resetFiled() this.dialogVisible = false console.log(isPass, 'isPass') }, // 选择员工 choseEmployeeList(val) { const { empList = [] } = val || {} let checkedKey = [] let checkedEmployee = [] let checkedEmployeeIds = [] if (empList && empList.length) { // 回显使用成员id checkedKey = checkedKey.concat(empList.map((x) => `_${x.id}`)) checkedEmployee = checkedEmployee.concat(empList.map((x) => x.qwUserId)) checkedEmployeeIds = checkedEmployeeIds.concat(empList.map((x) => x.id)) } this.defalutValue.employeeList = checkedKey this.customRuleForm.employeeList = checkedEmployee this.customRuleForm.employeeListIds = checkedEmployeeIds }, // 选择部门 choseDeptList(val) { const { deptList = [] } = val || {} let checkedKey = [] // 员工回显 if (deptList && deptList.length) { checkedKey = deptList.map((x) => x.nodeId) } this.defalutValue.deptList = checkedKey this.customRuleForm.deptList = checkedKey }, resetFiled() { this.ruleForm = { nameCn: '', description: '', } this.customRuleForm = { fromTypeList: null, toTypeList: null, msgTypeList: null, chatTypeList: null, roomOwnerIdList: null, roomOwnerDeptList: null, roomIdList: null, roomExcludeList: null, roomFocueList: null, employeeList: null, deptList: null, enableWhite: 0, textRegex: {}, employeeListIds: null, } this.defalutValue = { employeeList: [], deptList: [], } this.$refs.privateCloudMemberUse.reset() this.$refs.privateCloudDeptUse.reset() this.$refs.ruleFormRef.resetFields() this.$refs.customRuleFormRef.resetFields() this.ext = {} }, }, } </script> <style lang="scss" scoped> ::v-deep .el-form-item__label { line-height: 1; } .dialog-footer { display: flex; justify-content: flex-end; } .extra-info { display: flex; margin-bottom: 10px; .delete-icon { margin-left: 10px; } } ::v-deep .el-dialog { height: auto; margin-top: 8vh; .el-dialog__body { height: 60vh; overflow: auto; } } .custom-ruleForm { .el-form-item { width: 30%; .el-select { width: 100%; } } } ::v-deep a.jsoneditor-poweredBy { display: none; } </style> 将群聊群主和群主员工所属部门下拉框改为下拉滚动加载,编辑时通过id回显
最新发布
10-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值