element-ui表单验证（自定义验证规则）

                                               

 需求：
必填：账号 姓名 学号 专业 班级
正则：账号和学号均为 4-9位的字母和数字的组合，联系方式为number，邮箱为email，身份证

      
        
          
        
        
          
        
        
          
        
        
            
              
            
        
        
            
              
            
        
        
          
        
        
          
        
        
          
        
      
      

        取 消
        确 定
      
    

data () {
// 添加学生账号的正则
let validcodeName=(rule,value,callback)=>{
    let reg=/[0-9a-zA-Z]{4,9}/
    if(!reg.test(value)){callback(new Error('账号必须是由4-9位数字和字母组合'))
    }else{
        callback()
    }
};
let validCode=(rule,value,callback)=>{
    let reg=/[0-9a-zA-Z]{4,9}/
    if(!reg.test(value)){callback(new Error('学号必须是由4-9位数字和字母组合'))
    }else{
        callback()
    }
};
let validMobile=(rule,value,callback)=>{
    if(value==''||value==undefined){
        callback()
    }else{
        let reg=/[0-9]{11}/
        if(!reg.test(value)){callback(new Error('格式不对'))}else{
            callback()
        }
    }
};
let validID=(rule,value,callback)=>{
    if(value==''||value==undefined){
        callback()
    }else{
        let reg=/^[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]$/
        if(!reg.test(value)){callback(new Error('身份证号码不正确'))}
    }
    
};
return {
  addRules:{
    codeName:[
        {required:true,message:'请输入账号',trigger:'blur'},
        {validator:validcodeName,trigger:'blur'}
    ],
    name:[
        {required:true,message:'请输入姓名',trigger:'blur'}
    ],
    code:[
        {required:true,message:'请输入学号',trigger:'blur'},
        {validator:validCode,trigger:'blur'}
    ],
    major_name:[
        {required:true,message:'请选择专业',trigger:'change'},
    ],
    class_name:[
        {required:true,message:'请选择班级',trigger:'change'},
    ],
    mobile:[
        {validator:validMobile,trigger:'blur'}
    ],
    email:[
        {type:'email',message:'格式不对',trigger:'blur'}
    ],
    id_card:[
        {validator:validID,trigger:'blur'}
    ]

  },//添加学生的正则