正则表达式与Vue+elementUI校验规则定义的几种方式以及自定义校验规则

最新推荐文章于 2024-01-31 14:03:31 发布

王拾羽

最新推荐文章于 2024-01-31 14:03:31 发布

阅读量1.3k

点赞数 1

分类专栏：校验文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/bruno_mars_brother/article/details/109673719

版权

校验专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在前端开发中如何使用正则表达式进行身份证号、中文英文混合、手机号、座机号及复杂校验规则的定义与应用。通过组件的prop属性绑定校验规则，实现表单数据的合法性检查。同时展示了不同校验方式，包括简单的校验、自定义验证函数以及复合校验规则，并提供了清除校验状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正则表达式

1、身份证号：

/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/

2、只允许输入中文和英文

/^[\u4e00-\u9fa5a-zA-Z]+$/

3、手机号

/^1[3|4|5|7|8][0-9]\d{8}$/

4、至少包含数字与英文，长度6-20位

/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

5、座机

/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/

校验规则定义的几种方式；

统一在组件上使用prop进行绑定

<el-form-item label="法人代表" prop="legalName">
        <el-input
          size="small"
          placeholder="请输入法人代表"
          style="width: 240px"
          v-model.trim="editForm.legalName"
        ></el-input>
      </el-form-item>

1、简单的校验

legalName: [
          { required: true, message: "请输入法人代表", trigger: "change" },
          { min: 1, max: 20, message: "长度为1-20", trigger: "change" },
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
            message: "只允许输入中文和英文",
            trigger: "change",
          },
],

2、官方文档使用的校验规则定义方式

 // 饲养地址
 breedAddress: [
     {
       required: true,
       validator: (rules, value, cb) => {
          if (
             !this.changeForm.provinceCode ||
             !this.changeForm.cityCode ||
             !this.changeForm.areaCode ||
             !this.changeForm.address
             ) {
                return cb(new Error("饲养地址不能为空!"));
             } else if (this.changeForm.address.length > 40) {
                return cb(new Error("长度不得超过40"));
             }
              return cb();
         },
            trigger: "blur",
     },
],

3、适用于多种校验语法时建议使用以下方式

data(){ 
   // 经度
     var checklongitude = (rule, value, cb) => {
       const regA = /^\d+(?=\.{0,1}\d+$|$)/;
       const regB = /^\d+(\.\d{0,6})?$/;
       if (
          this.changeForm.longitude <= -180 ||
          this.changeForm.longitude >= 180
       ) {
          return cb(new Error("经度范围-180～180"));
       } else if (regA.test(value) || regB.test(value)) {
          cb();
       } else {
          return cb(new Error("请输入正确格式经度"));
       }
    };
  }
  return {
        changeFormRules: {
           longitude: [{ validator: checklongitude, trigger: "blur" }],
        }
   }
 }
 其中changeFormRules与longitude绑定的组件如下所示
  <el-form
     :model="changeForm"
     :rules="changeFormRules"
     ref="changeFormRef"
>
   <el-form-item label="经度:" prop="longitude">
         <el-input
            placeholder="请输入经度"
            v-model="changeForm.longitude"
         ></el-input>
   </el-form-item>
</el-form>

清除表单的校验规则

this.$refs.changeFormRef.clearValidate();

清除固定表单组件的校验规则

this.$refs.changeFormRef.fields.map((i) => {
     if (i.prop === "companyName") {
        i.clearValidate();
     }
});