el-input输入框只能输入中文，英文，邮箱，手机号

标签：el 输入框 zA value callback trigger blur input 输入

1.设置限制只能输入中文
校验中文的正则：/^[\u4e00-\u9fa5]+$/

rules: {
  chineseName: [
    { required: true, message: "请输入中文名", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
          callback(new Error("请输入中文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

2.设置限制只能输入英文字母 不区分大小写
校验英文的正则：/[a-zA-z]$/

rules: {
  name: [
    { required: true, message: "请输入英文名", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/[a-zA-z]$/.test(value) == false) {
          callback(new Error("请输入英文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

3.设置限制只能输入邮箱
校验邮箱的正则：/^([a-zA-Z0-9]+[||.]?)[a-zA-Z0-9]+@([a-zA-Z0-9]+[||.]?)[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/

rules: {
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {
          callback(new Error("请输入邮箱"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

4.设置限制只能输入手机号
校验手机号的正则：/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i

rules: {
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {
          callback(new Error("请输入手机号"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

转载链接：http://events.jianshu.io/p/88ce11ceadc6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

标签：el,输入框,zA,value,callback,trigger,blur,input,输入
From： https://www.cnblogs.com/alannero/p/17005349.html