基础篇(四):element表单验证规则和常用的正则表达式

11位手机号

data(){
	// 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        // 合法的手机号码
        return cb()
      }
      cb(new Error('您手机号码有误!'))
    } 
}

11位手机号码和座机号码(方法一:适合写在公共文件,或者多个表单皆需调用)

data(){
	   var checkMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入联系电话'));
      } else {
        let regPone = null;
        let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则
        let tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/; //座机
        if (value.charAt(0) == 0) {    // charAt查找第一个字符方法,用来判断输入的是座机还是手机号
          regPone = tel;
        } else {
          regPone = mobile;
        }
        if (!regPone.test(value)) {
          return callback(
            new Error("请填写联系方式")
          );
        }
        callback();
      }
    };
}

邮箱验证

data(){
	// 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('您的邮箱格式有误!'))
    }
}

使用规则方法(举例电话的)

html中:

<el-form
	ref="form"
	:model="form"
	:rules="rules"
>
	<el-form-item 
		label="联系方式"
		prop="Phone">
		<el-input
			v-model="form.phone"
			placeholder="请输入联系方式"
		>
	</el-form-item>
</el-form>

script中:

rules:{
	 phone: [
          { required: true, message: "请输入负责人电话", trigger: "blur" },
          { validator: checkMobile, trigger: 'blur' }
        ],
}

11位手机号码和座机号码(方法二:直接写入,一个表单验证)

phone: [
          { required: true, message: "请输入公司电话", trigger: "blur" },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: 'blur' }
        ],

将后端传的超长数字(>16位)以字符串形式保存。(避免拿到后尾数化为0)

首先,我们先要知道,js中当数字精确到15位(16个数字)的时候,后面的数字会自动化为0;如:
后端给我们的是 123456789123456789 我们拿到后却是 123456789123456700。

这是为啥呢?
这是因为,Java语言中的Long类型是64位,Js语言并没有long类型,我们的是number类型。(number类型有个最小值/最大值(安全值),即正负2的53次方。当大于2的53次方 不超过16位数时候,虽然不会化为0,但是计算时候也会出错。当然只是单纯拿取,不涉及计算就还是可以的

解决:
我们在拿的时候就转为数字,再进行保存应用就好啦,但是我们用普通的toString之类的是不行的,以下是使用正则来解决的途径:

  // 后端传的:
  data:{
        "fromId":123456789123456789,
  	    "type":"伶俐"
        }
  //前端拿到直接转
  let newResponseString = data.replace(
        /\"fromId\":(\d+)/,
        '"fromId": "$1"',
      )

  //打印
  console.log(newResponseString) 
    打印结果:
        {
        "fromId":"123456789123456789",
  	    "type":"伶俐"
        }