基于Vue+Element的表单验证

小编在进行b2b项目时候用的框架是Vue+Element，在b2b中各种表单各种验证，原来js都是通过正则弹框的形式去提示用户，在Element中封装了很好用的表单验证提示，小编将它进一步封装：☞

首先在staic文件夹下简历了formValidator.js文件，内容如下：☞

// 手机号验证
var phone = (rule, value, callback) => {
  let regFormat = /^[1][3578][0-9]{9}$/; //正确手机号
  if (!value) {
    return callback(new Error('不能为空'));
  }
    if (!(regFormat.test(value))) {
      callback(new Error('请输入正确手机号'));
    } else {
      if (value < 18) {
        callback(new Error('必须大于18岁'));
      }else {
        callback();
      }
    }
};
//数字验证
var number = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('不能为空'));
  }
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字值'));
    } else {
      if (value < 18) {
        callback(new Error('必须大于18岁'));
      }else if(value >55){
        callback(new Error('必须小于55岁'));
      } else {
        callback();
      }
    }
};
//text不能为空
var text = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('不能为空'));
  }else{
    callback();
  }
};
//desc不能为空
var desc = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('不能为空'));
  }else{
    callback();
  }
};
//邮箱
var email = (rule, value, callback) => {
  let mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (!value) {
    return callback(new Error('不能为空'));
  }
  if(!(mal.test(value))) {
    callback(new Error('请输入正确邮箱'));
  }else{
    callback();
  }
};
//开始时间
var startTime = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请选择开始日期'));
  }else{
    callback();
  }
};
//开始时间
var endTime = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请选择结束日期'));
  }else{
    callback();
  }
};
//时间
var time = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请选择日期'));
  }else{
    callback();
  }
};
//多选框
var checkbox = (rule, value, callback) => {
  if (value.length<1) {
    return callback(new Error('请选择一个'));
  }else{
    callback();
  }
};
//单选框
var radio = (rule, value, callback) => {
  if (value.length<1) {
    return callback(new Error('请选择一个'));
  }else{
    callback();
  }
};
//下拉框
var select = (rule, value, callback) => {
  if (value.length<1) {
    return callback(new Error('请选择一个'));
  }else{
    callback();
  }
};

image.png image.png
image.png

在调用的时候☞例如：邮箱验证

 <el-form :model="ruleForm"  status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item prop="email" label="邮箱" >
        <el-input  v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

email: [{
validator: email//email的方法
}]

 data() {
      return {
        ruleForm: {
          email: ''
        },
        rules: {
          email: [{
            validator: email
          }]
        }
      }
    },

  submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

手机号验证

 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="手机号" prop="phone" >
        <el-input v-model.number="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

phone: [{
validator: phone
}]

 data() {
      return {
        ruleForm: {
          phone: ''
        },
        rules: {
          phone: [{
            validator: phone
          }]
        }
      }
    },

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

以此类推
文章摘自：https://github.com/jf-wang/Form-Validator