duplicateCheck 表单字段重复校验通用JS

重复校验效果:输入图片说明

  • 编码排重使用示例

1.引入排重接口,代码如下:

  1. import { duplicateCheck } from '@/api/api'

2.找到编码必填校验规则的前端代码,代码如下:

  1. <a-input placeholder="请输入编码" v-decorator="['code', validatorRules.code ]"/>
  2. code: {
  3. rules: [
  4. { required: true, message: '请输入编码!' },
  5. {validator: this.validateCode}
  6. ]
  7. },

3.找到rules里validator对应的方法在哪里,然后使用第一步中引入的排重校验接口. 以用户online表单编码为示例,其中四个必传的参数有:

  1. {tableName:表名,fieldName:字段名,fieldVal:字段值,dataId:表的主键},

具体使用代码如下:

  1. validateCode(rule, value, callback){
  2. let pattern = /^[a-z|A-Z][a-z|A-Z|\d|_|-]{0,}$/;
  3. if(!pattern.test(value)){
  4. callback('编码必须以字母开头,可包含数字、下划线、横杠');
  5. } else {
  6. var params = {
  7. tableName: "onl_cgreport_head",
  8. fieldName: "code",
  9. fieldVal: value,
  10. dataId: this.model.id
  11. };
  12. duplicateCheck(params).then((res)=>{
  13. if(res.success){
  14. callback();
  15. }else{
  16. callback(res.message);
  17. }
  18. })
  19. }
  20. },