經常使用驗證前端彙總v0.2

1、文本框

1.經常使用的校驗規則

• 文本框的內容不能爲空、不能輸入空格：

第一步.加trim後綴，v-model.trim自動過濾用戶輸入的首尾空白字符
第二步.name: [
    { required: true, message: '名稱不能爲空' },
],
複製代碼

• 長度最大最小限制:

name: [
    {min: 10, max: 20, message: '長度應在10到20之間', trigger: 'blur' }
],
複製代碼

• 包含字母數字中文：(本身篩選，兩個之間能夠添加)

/[a-z]/ 包含小寫
/[0-9]/ 包含數字
/[A-Z]/ 包含大寫
/[\u4e00-\u9fa5]/ 包含中文

疊加示例：/[a-z0-9]/包含小寫和數字 
疊加示例：/[a-z]|[0-9]/ 包含小寫或數字
複製代碼

• 只包含字母數字：(本身篩選，兩個之間能夠添加)

/^[A-Z]*$/ 只有大寫
/^[a-z]*$/ 只有小寫
/^[0-9]*$/ 只有正數
/^[-0-9]*$/ 只有負數和正數
/^[\u4e00-\u9fa5]*$/ 只有中文

疊加示例：/^[A-Za-z]*$/ 只有大寫和小寫
疊加示例：/^[A-Z]*$|^[a-z]*$/ 只有大寫或小寫
複製代碼

• 包含有特殊字符(列出了常見的，須要什麼能夠本身加)

/[!@#$%^/\\()<>{}[\]]/
上面的正則表達式包含了特殊字符 !@#$%^/\\()<>{}[\]，若還想添加一個.，直接加入到其中便可，!@#$%^/\\()<>{}[\].
複製代碼

疊加示例：僅由小寫英文字母、數字及‘-’組成，且只能以小寫字母或數字結尾

/[a-z0-9-]*[a-z0-9]$/
複製代碼

疊加示例：以字母開頭，且只能包含英文字母、數字、下劃線

/^[a-zA-Z][a-zA-Z0-9_]*$/
複製代碼

疊加示例：以字母開頭，容許5-16字節，只能包含字母、數字和下劃線

// 修改4，15能夠修改位數
 /^[a-zA-Z]\w{4,15}$/
複製代碼

2.用戶名/文件名/工程名

經常使用規則： 不大於20個字符 ，包含中文英文數字下劃線
解決方案：

• 第一種方法： 使用指令 maxlength="20"來限制字符個數，watch變量來限制輸入

<el-form-item label="用戶名"
                          prop="username">
                <el-input v-model="ruleForm.username"
                          maxlength="20"
                          placeholder="只能輸入中文英文下劃線，不大於20個字符"
                          type="text"></el-input>
            </el-form-item>
複製代碼

watch: {
                    'ruleForm.username': {
                        handler(val) {
                            this.$nextTick(() => {
                                this.ruleForm.username = this.filterInput(val)
                            })
                        },
                        deep: true
                    }
                },
複製代碼

filterInput(val) {
            // 替換除漢字字母數字和指定的字符或特殊符號外的全部內容
            return val.replace(/[^a-zA-Z\d\u4e00-\u9fa5_]/g, '')
        },
複製代碼

• 第二種方法：用指令，如4.數值類型輸入

3.密碼

經常使用規則： 密碼位數6-20位
解決方案：

/^.{6,20}$/
複製代碼

4.數值類型輸入

經常使用規則： 只能輸入數字、'.'，最大值是100，最小值是0，保留2位小數
解決方案：

• 第一種方法：使用element自定義驗證
• 第二種方法：使用自定義指令v-number

// min是最小值，max是最大值，precision是小數點後面的位數
            <el-form-item label="價錢"
                          prop="price">
                <el-input
                    v-number="{ min: -10, max: 100, precision: 2 }"
                    v-model="ruleForm.price"></el-input>
            </el-form-item>
複製代碼

5. 郵箱

經常使用規則： 以字母或者數字開頭，可包含字符-_.，可含有三級域名
解決方案：

regular: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[.])+[A-Za-z\d]{2,4}$/ 
複製代碼

6. 中國座機

經常使用規則： 三位區號-八位號碼 或者 四位區號-七位號碼
解決方案：

// 格式爲三位區號-八位號碼
regular: /^\d{3}-\d{8}$/  
// 格式爲四位區號-七位號碼
regular：/^\d{4}-\d{7}$/
// 格式爲三位區號-八位號碼或者四位區號-七位號碼
regular：/^\d{3}-\d{8}$|^\d{4}-\d{7}$/
複製代碼

7. 手機號碼

經常使用規則：

• 中國（0086）：11位數，1+3|4|5|6|7|8|9+9位任意數
• 中國香港（00852）： 8位數，5|8|9開頭+7位任意數
• 中國澳門（00853）： 8位數，6+7位任意數
• 中國臺灣（00886）： 10位數，09+8位任意數

解決方案：

中國：/^1[3456789]\d{9}$/  
中國香港： ^[5,8,9]\d{7}$
中國澳門：^[6]\d{7}$
中國臺灣：^[0][9]\d{8}$
複製代碼

8. 版本號

經常使用規則： 版本號僅由字母、數字及‘-’、‘_’、‘.’組成
解決方案：

regular: /^[\.\-\_0-9a-zA-Z]+$/
複製代碼

9. 字段名（數據庫裏的字段名）

經常使用規則： 字段名僅能含有小寫字母、數字和下劃線，需以小寫字母開頭，且長度爲1-30
解決方案：

/^[a-z][a-z0-9_]{0,29}$/
複製代碼

2、圖片(使用組件imgUpload)

經常使用規則：(對大小、對格式的限制，對尺寸較少限制)
大小：小於1MB
格式：jpg、png
推薦尺寸：255X192
解決方案： 格式的類型加入到acceptTypes。

let acceptTypes = [
                'image/jpeg',
                'image/png',
                'image/jpg'
            ];
            let isAcceptType = acceptTypes.includes(file.type);
            if (!isAcceptType) {
                _this.$message.warning('請上傳png或jpg格式的圖片');
                fun(false);
                return;
            }
            let fileMB = file.size / 1024 / 1024;
            if (fileMB <= 1) {
                fun(true);
            } else {
                this.$message.warning('請上傳低於1M的圖片');
                fun(false);
            }
複製代碼

限制分辨率：

let imgSrc = window.URL.createObjectURL(file);
            let img = new Image();
            img.src = imgSrc;
            img.onload = function() {
                // 在這裏就能夠獲取到圖片的寬度和高度
                if ((img.width > 170) || (img.height > 70)) {
                    _this.$message.warning('請上傳170 * 70分辨率之內的圖片');
                    fun(false);
                }
                fun(true);
            };
複製代碼

3、文本域textarea

經常使用規則： 不大於100字，不能只有空格
解決方案：

正則表達式： /\S/ 
用以判斷是否只有空格
複製代碼

<el-input
        type="textarea"
        placeholder="請輸入內容"
        v-model="textarea"
        maxlength="100"
        show-word-limit>
    </el-input>
複製代碼

show-word-limit用以展現對字符的限制，若maxlength="100"，下圖就會顯示30/100。
複製代碼

4、文件(使用組件basic-upload)

經常使用規則： 需給出上傳文件數量，文件類型，文件大小限制
解決方案：

將能夠上傳的文件類型添加至acceptTypes
let acceptTypes = ['application/pdf'];
let isAcceptType = acceptTypes.includes(file.type);
if (!isAcceptType) {
    this.$message.warning('請上傳pdf格式的文件');
}
若限制大小爲5M
let fileMB = file.size / 1024 / 1024;
if (fileMB >= 5) {
    this.$message.warning('請上傳小於5M的文件');
}
複製代碼