Vue.js 实现常见表单验证功能

Vue.js 实现常见表单验证功能

// 校验手机号码
Vue.prototype.$validateMobile = function(rule, value, callback) {
  const regExp = /^1[3456789]\d{9}$/;
  if (!value) {
    callback(new Error('手机号码不能为空'));
  } else if (!regExp.test(value)) {
    callback(new Error('请输入正确的手机号码'));
  } else {
    callback();
  }
};

// 校验邮箱地址
Vue.prototype.$validateEmail = function(rule, value, callback) {
  const regExp = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
  if (!value) {
    callback(new Error('邮箱地址不能为空'));
  } else if (!regExp.test(value)) {
    callback(new Error('请输入正确的邮箱地址'));
  } else {
    callback();
  }
};

// 校验身份证号码
Vue.prototype.$validateIdCard = function(rule, value, callback) {
  const regExp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (!value) {
    callback(new Error('身份证号码不能为空'));
  } else if (!regExp.test(value)) {
    callback(new Error('请输入正确的身份证号码'));
  } else {
    callback();
  }
};

以上代码实现了常见的手机号码、邮箱地址和身份证号码的校验功能。在 Vue 应用中，可以通过 this.$validateMobile、this.$validateEmail 和 this.$validateIdCard 进行调用。