经常使用验证前端汇总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的文件');
}
复制代码