【VUE+Elemet 】最全最全正则验证 + 表单验证 + 注意事项

BMG_Princess
987 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 ​

正则验证

输入字母/数字/下划线：

{ pattern:/^\w+$/, message: '请输入字母/数字/下划线', trigger: 'blur' },

请输入中英文/数字/下划线：

{ pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '请输入中英文/数字/下划线', trigger: 'blur' },

请输入中文/英文： 

{
              pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
              message: '请输入中文/英文',
              trigger: 'blur'
            },

 规范金额：

pattern: /(^[\d]|^[1-9][\d]*)($|[.][\d]{0,2}$)/,

用户名不能全是数字: 

{ pattern:/[^\d]/g, message: '用户名不能全是数字', trigger: 'blur' },

请输入中文：

{ pattern:/^[\u4e00-\u9fa5]+$/, message: '请输入中文', trigger: 'blur' },

非中文：

/^[^\u4e00-\u9fa5]*$/

限制长度：

{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }

请输入数字： 

{ pattern:/^\d+$/, message: '请输入数字', trigger: 'blur' },

 正整数：

pattern: /^[1-9]\d*$/

请输入数字(可正负)

{ pattern:/^(-|+)?\d+(.\d+)?$/, message: '请输入数字(可正负)', trigger: 'blur' },

请输入数字/小数点: 

{
              pattern: /^\d+$|^\d*.\d+$/,
              message: '请输入数字/小数点',
              trigger: 'blur'
            },

请输入0-9999

data() {
      var validatew01014_Max = (rule, value, callback) => {
        var reg= /^(\d|[1-9]\d|9999)(.\d{1,2})?$/
          if(!reg.test(Number(value))) {
          callback(new Error('范围在0-9999'));
        }else {
          callback();
        }
      };
      return {
        form: {
          w01014_Max: "",
        },
        rules: {
          w01014_Max: [{
              required: true,
              message: '请输入直饮水电导率最大值',
              trigger: 'blur'
            },
            { pattern:/^\d+$|^\d*.\d+$/, message: '请输入数字/小数点', trigger: 'blur' },
            {
              required: true,
              validator: validatew01014_Max,
              trigger: 'blur'
            },
          ],
        },
      };
    },

大写，小写，数字，特殊字符，至少上面的三种,至少八位

{
   pattern: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/,
   message: '请输入大/小写字母+数字+特殊字符',
   trigger: 'blur'
 },

正则

小数点后只能有两位数(可为0) 

var reg= /^(-?\d+)(.\d{1,2})?$/
if(reg.test("12"))
{
alert("符合要求");
}

登录验证(包含字符验证和长度验证)：

      if (this.username == "") {
          this.dialog = "请输入用户名/手机号";
          return false;
        }
        var reg1= /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
          if(!reg1.test(this.username)) {
          this.dialog = "用户名/手机号请输入中英文/数字/下划线";
          return false;
        } 
        var reg2= /^.{1,50}$/
          if(!reg2.test(this.username)) {
          this.dialog = "用户名/手机号长度在 1 到 50 个字符";
          return false;
        } 
        if (this.password == "") {
          this.dialog = "请输入密码";
          return false;
        } 
        var reg3= /^[a-zA-Z0-9_]*$/
          if(!reg3.test(this.password)) {
          this.dialog = "密码请输入字母/数字/下划线";
          return false;
        }
         var reg4= /^.{6,24}$/
          if(!reg4.test(this.password)) {
          this.dialog = "密码长度在 6 到 24 个字符";
          return false;
        }

密码正则:

密码正则，以字母开头，长度在6~18之间，只能包含字母、数字和下划线  

let isTrue =^[a-zA-Z]\w{5,17}$;

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)

var pwd = /^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$/

强密码正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

let isTrue = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

身份证号码正则表达式：

第一代身份证只有15位数，第二代身份证有18位数，各位按照需求来选择表达式。

//第二代身份证号码正则

let isTrue = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

//第一代身份证正则表达式(15位)

let isTrue=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

QQ号码正则:

let isTrue = /^[1-9][0-9]{4,10}$/;

微信号码正则:

 

  1. //微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
  2. let isTrue = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

特殊字符检测正则:

   let isTrue= /["'<>%;)(&+]+-!！@#$~/;

域名正则:

let isTrue=[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?;

车牌号码正则:

let isTrue = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;

包含中文正则:


let isTrue = /[\u4E00-\u9FA5]/;

//这个可以用于验证用户的真实姓名。

护照正则:

let isTrue=/^(P\d{7}|G\d{7,8}|TH\d{7,8}|S\d{7,8}|A\d{7,8}|L\d{7,8}|\d{9}|D\d+|1[4,5]\d{7})$/;

固定电话正则：

let isTrue=((\d{3,4})|\d{3,4}-|\s)?\d{8};

IP地址正则:

let isTrue=\d+.\d+.\d+.\d+;

邮政编码正则:

let isTrue=[1-9]{1}(\d+){5};

经纬度正则


//经度正则

let isTrue=/^(-|+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3}).\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180.0{0,6}|180)$/;

//纬度正则

let isTrue=/^(-|+)?([0-8]?\d{1}.\d{0,6}|90.0{0,6}|[0-8]?\d{1}|90)$/;

禁止输入空格

v-model.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

判断字符串长度区分中英文

写法一 

let nameLong = this.nameValue.replace(/[\u0391-\uFFE5]/g, 'aa').length
if (nameLong > 10) {
  this.$toasts("不超过10个字符")
  return false
}

写法二

export default {
    data() {
        let validcodeName=(rule,value,callback)=>{
            //替换双字节汉字，为aa,限制输入框长度；
            if(value.replace(/[^\x00-\xff]/g, "aa").length>=24){
                callback(new Error('长度在1到12汉字'))
            }else{
                callback()
            }
 
        };
        return {
            popFormRules: {
                Name:[{
                    type: 'string',
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur,change'
                }, {
                    validator:validcodeName,
                    trigger: 'blur'
                }],
            }
        }
    }
},

 js输入1到120的整数文

eg = /^[0-9]\d?$|^1[01]\d$|^120$/;
console.log(reg.test(0));  //true

js 1-50

/^\S{1,50}$/

表单验证 

请注意

此数字验证有四个坑

1、注意写法：v-model.number="form.phone"

2、js给数字验证长度与其他不同，必须使用正则：{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }

3、数字的值其实是int型，注意回显的转换，及传参的转换！（如果回显不转换的话，会一直报错！）

数字验证另一种写法（正则）：

1、{ pattern:/^(-|+)?\d+(.\d+)?$/, message: '请输入数字(可正负)', trigger: 'blur' },

element清空表单(全局)：

1、this.$refs.form.resetFields();

demo

<el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="用户名：" prop="username">
          <el-input placeholder="请输入用户名" v-model="form.username" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item label="角色名称：" prop="role">
          <el-select v-model="form.role" style="width:300px;">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号/账号：" prop="phone">
          <el-input v-model.number="form.phone" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item v-if="isAdd" label="密码：" prop="pass">
          <el-input v-model="form.pass" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="emall">
          <el-input v-model="form.emall" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item label="请选择组织：" prop="organization">
         <el-select v-model="form.organization" style="width:300px;">
            <el-option v-for="item in organizations" :key="item.orgId" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onCancle">取 消</el-button>
          <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
        </el-form-item>
      </el-form>


form: {
          username: "",
          name: "",
          role: "",
          phone: "",
          pass: "",
          emall: "",
          organization: "",
        },
        rules: {
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          name: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          role: [{
              required: true,
              message: '请选择角色名称',
              trigger: 'change'
            }
          ],
           phone:[
      { required: true, message: '手机号/账号不能为空',trigger: 'blur'},
      { type: 'number', message: '手机号/账号必须为数字',trigger: 'blur'},
      { pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ],
           pass: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 24,
              message: '长度在 6 到 24 个字符',
              trigger: 'blur'
            }
          ],
           emall: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
            {
              min: 6,
              max: 50,
              message: '长度在 6 到 50 个字符',
              trigger: 'blur'
            }
          ],
          organization: [{
              required: true,
              message: '请选择所属组织',
              trigger: 'change'
            }
          ],
        },


//添加/修改
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.isAdd) {
          this.addPeopleLink();
        } else {
          this.changePeopleLink();
        }
          } else {
            return false;
          }
        });
      },

邮箱

<el-form-item label="邮箱：" prop="email">
          <el-input v-model.trim="form.email" style="width:300px;"></el-input>
</el-form-item>

    

var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }


email: [{
            validator: checkEmail,
            trigger: 'blur'
          }],

扩展功能

  • 回车事件   @keyup.enter="submit" 

​

avatar
文章
阅读
粉丝