Element UI 统一社会信用代码校验

Element UI 统一社会信用代码校验

统一社会信用代码是中国企业的唯一标识，由18位字符组成，包含数字和大写字母。在Element UI表单中，可以使用自定义校验规则来验证这个字段。

校验规则实现

1. 基本校验规则

// 统一社会信用代码校验函数
function validateSocialCreditCode(rule, value, callback) {
  if (!value) {
    return callback(new Error('请输入统一社会信用代码'));
  }
  
  // 正则表达式校验基本格式
  const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
  if (!reg.test(value)) {
    return callback(new Error('统一社会信用代码格式不正确'));
  }
  
  // 校验码验证（更严格的校验）
  if (!checkSocialCreditCode(value)) {
    return callback(new Error('统一社会信用代码校验失败'));
  }
  
  callback();
}

// 校验码计算函数
function checkSocialCreditCode(code) {
  if (code.length !== 18) return false;
  
  const weights = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28];
  const str = '0123456789ABCDEFGHJKLMNPQRTUWXY';
  let sum = 0;
  
  for (let i = 0; i < 17; i++) {
    const c = code.charAt(i);
    const index = str.indexOf(c);
    if (index === -1) return false;
    sum += index * weights[i];
  }
  
  const checkCodeIndex = (31 - (sum % 31)) % 31;
  return code.charAt(17) === str.charAt(checkCodeIndex);
}

2. 在Element UI表单中使用

rules: {
  socialCreditCode: [
    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
    { validator: validateSocialCreditCode, trigger: 'blur' }
  ]
}

3. 完整组件示例

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="统一社会信用代码" prop="socialCreditCode">
      <el-input v-model="form.socialCreditCode" placeholder="请输入统一社会信用代码"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        socialCreditCode: ''
      },
      rules: {
        socialCreditCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
          { validator: this.validateSocialCreditCode, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateSocialCreditCode(rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入统一社会信用代码'));
      }
      
      const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
      if (!reg.test(value)) {
        return callback(new Error('统一社会信用代码格式不正确'));
      }
      
      if (!this.checkSocialCreditCode(value)) {
        return callback(new Error('统一社会信用代码校验失败'));
      }
      
      callback();
    },
    
    checkSocialCreditCode(code) {
      if (code.length !== 18) return false;
      
      const weights = [1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28];
      const str = '0123456789ABCDEFGHJKLMNPQRTUWXY';
      let sum = 0;
      
      for (let i = 0; i < 17; i++) {
        const c = code.charAt(i);
        const index = str.indexOf(c);
        if (index === -1) return false;
        sum += index * weights[i];
      }
      
      const checkCodeIndex = (31 - (sum % 31)) % 31;
      return code.charAt(17) === str.charAt(checkCodeIndex);
    }
  }
};
</script>

注意事项

1. 统一社会信用代码由18位字符组成，包含数字和大写字母（不包括I、O、Z、S、V等易混淆字母）
2. 前两位代表登记管理部门代码
3. 第3-8位是登记管理机关行政区划码
4. 第9-17位是组织机构代码
5. 第18位是校验码
6. 实际项目中，可以结合后端校验提高准确性

这种校验方式既保证了前端的基本格式检查，又通过校验码算法提高了校验的准确性。