多表单校验：（手机号、数字、身份证、空值）校验规则与单表单部分校验

一般校验规则

一般用elementUI表单

1. 手机号校验

座机号：/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/
var checktel = (rule, value, callback) => {
    let mobileReg = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
    if (mobileReg.test(value)) {
    return callback();
    } else {
    return callback(new Error("请输入正确的手机号"));
    }
 }

2. 数字校验

//小数校验
规则： /^-?\d{1,10}(?:\.\d{1,4})?$/; //小数点左边最高10位，小数点右边最多4位
		var xs = (rule, value, callback) => {//包含小数的数字
            let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
            if (value === '') {
                callback(new Error('请输入内容'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入数字'));
            } else {
                callback();
            }
        };
        //整数校验
        var zs = (rule, value, callback) => {//正整数
            let reg = /^[+]{0,1}(\d+)$/g;
            if (value === '') {
                callback(new Error('请输入内容'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入一个正整数'));
            } else {
                callback();
            }
        };

3.身份证校验

// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
var idcard= (rule, value, callback) => {
    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (value === '') {
        callback(new Error('请输入内容'));
    } else if (!reg.test(value)) {
        callback(new Error('请输入正确统一社会信息代码或身份证号'));
    } else {
        callback();
    }
  }

4. 空值校验

直接在规则里面写

  project: [
          { required: true, message: '项目不能为空', trigger: 'blur' },

5. 校验方法

rules: {
        project: [
          { required: true, message: '项目不能为空', trigger: 'blur' },
        ],
        tel: [
          { required: true, validator:checktel , trigger: 'blur' },
        ],
        zjtr: [
          {required: true, validator: checkzjtr, trigger: 'blur'},        ], 

    },

6. 发现一个校验时候的bug，当我的数据在表单数据中的一个子对象中，我直接写在外层的校验规则使用无效，解决如下：
   
   
   今天遇到一个问题，任务中需要根据下拉框里的值变换输入的值，这样在进行校验的时候，有些值没有输入就会校验失败，提交不了，所有换了一种部分校验的方法
   提交保存的方法：

		let _this=this
		//校验第一个表单
         _this.$refs.wtInfo.validate((valid) => {
           if (valid) {
           //校验第二张表单，判断类型确定输入选项_this.$refs.zgInfo.validateField(''，'','','',);这种形式会执行多次，影响校验结果，所以这里对zgInfo表单里面的字段进行单独校验
             if(this.isCXXM==true){
               _this.$refs.FormData.validateField('name',(Error) => {
        		  if(!Error){
               ......
             }else if(_this.isHJSSMJ==true){
             .....
             }else if(_this.isHJZB==true){
               .....
             }else if(_this.isQT==true){
               .....
             }
             //校验第三个表单
             _this.$refs.zgysInfo.validate((valid) =>{
               if(valid){
               //校验完成，进行保存
                 let form= _this.FormData;
                 saveInfo(form).then(res => {
                     if (res.result == "Success") {
                     _this.$message({
                         type: 'success',
                         message: '保存成功',
                     })
                     } else {
                         _this.$message({
                         type: 'error',
                         message: res.message,
                     })
                     }
                 })
               }
             }) 
           }
       })