在vue+element-ui框架input中添加英文/数字/中文/下划线正则约束

（1）一般的约束添加：找到你要约束的输入input框，比如下列代码：

<el-input
 onkeyup="this.value=this.value.replace(/[^\w_^\u4E00-\u9FA5]/g,'');"
 maxlength="8"
v-model="formData.perChg" 
placeholder="请输入联系人姓名">
</el-input>

在input标签中加入οnkeyup="this.value=this.value.replace(/[^\w_\u4E00-\u9FA5]/g,’’);"是约束语句，这里的正则表达式是只能输入中文、大小写字母、数字、下划线。 maxlength=“8”，表示所有字符加起来不能超过8个。

//小数约束123.2222222222
@input="formData.lat = formData.lat.replace(/[^\d\.\d$]/g, '')"
//长度约束
maxlength="6" 
//数字约束
onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"  maxlength="6" 
//中文英文数字下划线
onkeyup="this.value=this.value.replace(/[^\w_^\u4E00-\u9FA5]/g,'');"  maxlength="6" 

（2）固定电话及手机号约束添加：
第一步：找到input标签在其中加入如下代码：

 <el-form-item label="企业电话号码："  prop="phone">
   <el-input
      onkeyup="this.value=this.value.replace(/[^\d]/g,'');"
      maxlength="11"
      v-model="cusData.phone" placeholder="请输入企业电话号码"></el-input>
</el-form-item>

第二步：然后在return 中添加relus规则约束：

return {
 rules: {
        phone: [{ required: true, validator: checkTel, trigger: 'blur' }],
      },
}

第三步：在return {}同一级也就是data() {}中添加checkTel校验方法：（特别注意不要加在 methods: {}和 mounted() {}这个几个方法中）：

    const checkTel = (rule, value, callback) => {
      if (!value || !value.trim()) {
        return callback(new Error('请输入联系人电话'))
      }
      let landlinePtn = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/
      let mobilePtn = /^1[3|4|5|6|7|8|9][0-9]{9}$/
      setTimeout(() => {
        if (!mobilePtn.test(value) && !landlinePtn.test(value)) {
          callback(new Error('固话或手机号格式错误'))
        } else {
          callback()
        }
      }, 1000)
    }

第四步：在input标签外包裹一层el-form-item标签并且添加约束规则 prop=“phone”(注意这prop里面的phone要与rules和v-model里面xxx.phone命名一致)，最后标签显示如下即可：

 <el-form-item label="企业电话号码："  prop="phone">
   <el-input
      onkeyup="this.value=this.value.replace(/[^\d]/g,'');"
      maxlength="11"
      v-model="cusData.phone" placeholder="请输入企业电话号码"></el-input>
</el-form-item>

第五步：在el-form标签中加入:rules="rules"最终效果如下：

<el-form :rules="rules">
.
.
.
 <el-form-item label="企业电话号码："  prop="phone">
   <el-input
      onkeyup="this.value=this.value.replace(/[^\d]/g,'');"
      maxlength="11"
      v-model="cusData.phone" placeholder="请输入企业电话号码"></el-input>
</el-form-item>
.
.
.
</el-form >