Web Front-end
JS Tutorial
Detailed explanation on the use of iview custom verification keyword input box
Detailed explanation on the use of iview custom verification keyword input box
This time I will bring you a detailed explanation of the use of iview's custom verification keyword input box. What are the precautions for iview's custom verification keyword input box? Here is a practical case, let's take a look.
1. Verification requirements
Corresponding to the configured keyword input box, the verification requirements are as follows:
1. The total number of words cannot exceed 7,000;
2. Remove the configured keyword special symbols, and the number of keyword groups obtained cannot exceed 300; (such as: aaa&(bbb|ccc)|(!ddd|eee)), remove the special symbols, and there are 5 groups)
3. The length of a single keyword cannot exceed 20; (such as: aaaaa&(bbb|ccc)), if the length of aaaaa exceeds 20, it will prompt)
2. Solution
Add a prop attribute to the FormItem corresponding to the keyword input and use it as a verification field; note that the FormItem is Contained in Form;
Add rules verification in form form
Since iview can directly check the empty space and total length Define Verification Rules, so I will only write the other two here. The code is as follows:
//高级配置验证
validateAdvancedFormItem: {
name: [
{required: true, message: '任务名称不能为空', trigger: 'blur'},
{type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur'},
{validator: validNameExist, trigger: 'blur'}
],
groupId: [
{type: 'string', required: true, message: '请选择任务分组', trigger: 'change'}
],
keywords: [
{required: true, message: '关键词不能为空', trigger: 'blur'},
{type: 'string', max: 7000, message: '不能超过7000个字符', trigger: 'blur'},
{validator: validKeyWordsRule, trigger: 'blur'}
],
/* chooseSiteGroupList: [//todo 暂时注释掉网站分组
{ required: true, type: 'array', min: 1, message: '请选择网站分组', trigger: 'change' },
],*/
chooseInfoTypeList: [
{required: true, type: 'array', min: 1, message: '请选择信息类型', trigger: 'change'},
],
warnNum: [
{required: true, message: '请填写预警增量'},
],
warnUserList: [
{required: true, type: 'array', message: '请选择预警人员', validator: validatewarnUser, trigger: 'change'},
],
},Custom verification rule method:
//验证高级配置关键词 规则
const validKeyWordsRule = (rule, value, callback) => {
var isExceedTwitenty = this.getAdvancedKeyWords();
var isExceedThreeHundreand = this.getAdvancedKeyWords();
if(isExceedTwitenty == 1) {
callback(new Error('配置单个关键词长度不能超过20'))
} else if(isExceedThreeHundreand == 2) {
callback(new Error('配置关键词个数不能超过300'))
} else {
callback();
}
};
//处理关键词
getAdvancedKeyWords: function () {
var flag = -1;
if(this.dailyTaskItem.keywords != '' && this.dailyTaskItem.keywords.trim() != '') {
//判断单个配置的关键词长度是否大于20
var str = '';
for (var i = 0; i < this.dailyTaskItem.keywords.length; i++) {
str = str + this.dailyTaskItem.keywords.substr(i, 1).replace(/[\&|\||\!|\(|\)|\"]/, ' ');
}
var keywordArr = str.split(' ');
var resultArr = [];
for(var i in keywordArr) {
if(keywordArr[i] != '') {
resultArr.push(keywordArr[i])
if(keywordArr[i].trim().length > 20) {
flag = 1;
break
}
}
}
//.关键词一共300个
if(resultArr.length > 300) {
flag = 2;
}
}
return flag;
},I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!
Recommended reading:
Detailed explanation of the steps to globally introduce bass.scss into Vue
js deduplication and optimization of numerical arrays
The above is the detailed content of Detailed explanation on the use of iview custom verification keyword input box. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to adjust aperture on Xiaomi Mi 14 Ultra?
Mar 19, 2024 am 09:01 AM
Adjusting the aperture size has a crucial impact on the photo effect. Xiaomi Mi 14 Ultra provides unprecedented flexibility in camera aperture adjustment. In order to allow everyone to adjust the aperture smoothly and realize the free adjustment of the aperture size, the editor here brings you a detailed tutorial on how to set the aperture on Xiaomi Mi 14Ultra. How to adjust the aperture on Xiaomi Mi 14Ultra? Start the camera, switch to "Professional Mode", and select the main camera - W lens. Click on the aperture, open the aperture dial, A is automatic, select f/1.9 or f/4.0 as needed.
What is the highest graphics card that r5 5600x can drive? The latest performance of using 5600X with RX6800XT
Feb 25, 2024 am 10:34 AM
On October 29, AMD finally released a much-anticipated blockbuster product, the RX6000 series of gaming graphics cards based on the new RDNA2 architecture. This graphics card complements the previously launched Ryzen 5000 series processors based on the new ZEN3 architecture, forming a new double-A combination. This release not only eclipsed the competitor "Shuangying", but also had a major impact on the entire DIY hardware circle. Next, let’s use the combination of AMD Ryzen 5600X and RX6800XT in my hands as a test example to see how awesome AMD is today. Let’s talk about the CPU processor part first. The previous generation of AMD Ryzen 3000 series processors using ZEN2 architecture has actually been used.
How to set Chinese in Cheat Engine? How to set Chinese in ce modifier
Mar 18, 2024 pm 01:20 PM
Ce Modifier (CheatEngine) is a game modification tool dedicated to modifying and editing game memory. So how to set Chinese in CheatEngine? Next, the editor will tell you how to set Chinese in Ce Modifier. I hope it can Help friends in need. In the new software we download, it can be confusing to find that the interface is not in Chinese. Even though this software was not developed in China, there are ways to convert it to the Chinese version. This problem can be solved by simply applying the Chinese patch. After downloading and installing the CheatEngine (ce modifier) software, open the installation location and find the folder named languages, as shown in the figure below
How to update Honor MagicOS 8.0 on Honor 90 GT?
Mar 18, 2024 pm 06:46 PM
Honor 90GT is a cost-effective smartphone with excellent performance and excellent user experience. However, sometimes we may encounter some problems, such as how to update Honor MagicOS8.0 on Honor 90GT? This step may be different for different mobile phones and different models. So, let us discuss how to upgrade the system correctly. How to update Honor MagicOS 8.0 on Honor 90GT? According to news on February 28, Honor today pushed the MagicOS8.0 public beta update for its three mobile phones 90GT/100/100Pro. The package version number is 8.0.0.106 (C00E106R3P1) 1. Ensure your Honor The battery of the 90GT is fully charged;
Planet Mojo: Building a Web3 game metaverse from the auto-chess game Mojo Melee
Mar 14, 2024 pm 05:55 PM
Popular Metaverse game projects founded in the last crypto cycle are accelerating their expansion. On March 4, PlanetMojo, the Web3 game metaverse platform, announced a number of important developments in its game ecology, including the announcement of the upcoming parkour game GoGoMojo, the launch of the new season "Way of War" in the flagship auto-chess game MojoMelee, and the celebration of the new The first ETH series "WarBannerNFT" launched this season in cooperation with MagicEden. In addition, PlanetMojo also revealed that they plan to launch Android and iOS mobile versions of MojoMelee later this year. This project will be launched at the end of 2021. After nearly two years of hard work in the bear market, it will soon be completed.
DaVinci Resolve Studio now supports AV1 hardware encoding for AMD graphics cards
Mar 06, 2024 pm 10:04 PM
Recent news, lackMagic has launched the 18.5PublicBeta2 public beta update of the DaVinci Resolve Studio video editing software, bringing AV1 encoding support to AMD Radeon graphics cards. After updating to the latest version, AMD graphics card users will be able to take advantage of hardware acceleration for AV1 encoding in DaVinci Resolve Studio. Although the official does not specify the supported architectures or models, it is expected that all AMD graphics card users can try this feature. In 2018, AOMedia released a new video coding standard AV1 (AOMediaVideoCodec1.0). AV1 is produced by a number of
The operation process of edius custom screen layout
Mar 27, 2024 pm 06:50 PM
1. The picture below is the default screen layout of edius. The default EDIUS window layout is a horizontal layout. Therefore, in a single-monitor environment, many windows overlap and the preview window is in single-window mode. 2. You can enable [Dual Window Mode] through the [View] menu bar to make the preview window display the playback window and recording window at the same time. 3. You can restore the default screen layout through [View menu bar>Window Layout>General]. In addition, you can also customize the layout that suits you and save it as a commonly used screen layout: drag the window to a layout that suits you, then click [View > Window Layout > Save Current Layout > New], and in the pop-up [Save Current Layout] Layout] enter the layout name in the small window and click OK
Simplify file upload processing with Golang functions
May 02, 2024 pm 06:45 PM
Answer: Yes, Golang provides functions that simplify file upload processing. Details: The MultipartFile type provides access to file metadata and content. The FormFile function gets a specific file from the form request. The ParseForm and ParseMultipartForm functions are used to parse form data and multipart form data. Using these functions simplifies the file processing process and allows developers to focus on business logic.
