常用表单自定义正则验证

最新推荐文章于 2024-11-02 15:48:17 发布

谁家王先森快带走！

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量62

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_45158258/article/details/132990441

版权

本文详细描述了一个名为validate.js的库，用于JavaScript中的账号、密码等字段的验证规则，包括邮箱、手机号格式检查等，并在Vue组件中展示了如何应用这些规则。

摘要由CSDN通过智能技术生成

1.创建 validate.js


/* 验证账号 */
export function validateUsername(rule, value, callback) {
  if (value.length < 6 || value.length > 20) {
    return callback(new Error('用户名不得小于6个或大于20个字符!'))
  } else {
    callback()
  }
}

/* 验证密码 */
export function validatePassword(rule, value, callback) {
  if (value.length < 6) {
    return callback(new Error('密码不能小于6位'))
  } else {
    callback()
  }
}
 
/* 合法邮箱 */
export function validateEmail(rule, value, callback) {
  const emailReg = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/
  if (!value) {
    return callback(new Error('邮箱不能为空!!'))
  }
  setTimeout(() => {
    if (!emailReg.test(value)) {
      return callback(new Error('邮箱格式错误'))
    } else {
      callback()
    }
  }, 100)
}
 
/* 合法手机号 */
export function validatePhone(rule, value, callback) {
  const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
  if (!value) {
    return callback(new Error('手机号码不能为空!!'))
  }
  setTimeout(() => {
    if (!phoneReg.test(value)) {
      return callback(new Error('手机号码格式错误'))
    } else {
      callback()
    }
  }, 100)
}
 
/* 合法真实姓名 */
export function validateRealName(rule, value, callback) {
  const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
  if (!value) {
    return callback(new Error('真实姓名不能为空!!'))
  }
  setTimeout(() => {
    if (!realnameReg.test(value)) {
      return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
    } else {
      callback()
    }
  }, 100)
}
 
/* 合法身份证 */
export function validateIdNumber(rule, value, callback) {
  const idNumberReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
  if (!value) {
    return callback(new Error('身份证号码不能为空!!'))
  }
  setTimeout(() => {
    if (!idNumberReg.test(value)) {
      return callback(new Error('您的身份证号码格式错误!'))
    } else {
      callback()
    }
  }, 100)
}

/* 正整数校验 */
export function integerP(rule, value, callback) {
  if (value && !(/^[1-9]\d*$/).test(value)) {
    callback(new Error('只能填写正整数'))
  } else {
    callback()
  }
}

/* 负整数校验 */
export function integerN(rule, value, callback) {
  if (value && !(/^-[1-9]\d*$/).test(value)) {
    callback(new Error('只能填写负整数'))
  } else {
    callback()
  }
}

/* 中文字符校验 */
export function cnText(rule, value, callback) {
  if (value && (/[^\u4e00-\u9fa5]/).test(value)) {
    callback(new Error('只能填写中文字符'))
  } else {
    callback()
  }
}

/* 只能输入英文或者数字 */
export function enOrnunText (rule, value, callback) {
  if (value && !(/^[A-Za-z0-9]+$/).test(value)) {
    callback(new Error('只能填写英文或者数字'))
  } else {
    callback()
  }
}

/* 数字 ,两位 */
export function validateTwoNum (rule, value, callback) {
  let temp = /^[1-9]{2}$/;
  if (!temp.test(value)) {
    callback(new Error('请输入两位正整数！'));
  } else{
    callback();
  }
}

/* 校验电脑Mac地址 */
export function validateMac(rule, value, callback) {
  let temp = /[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}/;
  if (!temp.test(value)) {
    callback(new Error('请输入xx-xx-xx-xx-xx-xx形式的MAC地址！'));
  } else{
    callback();
  }
}

2.按需引入验证规则

<template>
  <div class="addUser">
      <!-- 添加用户表单 -->
      <el-form :model="addUser" :rules="addUserRules" ref="addUser" label-width="70px">
      
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUser.email" />
        </el-form-item>
        
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addUser.mobile" />
        </el-form-item>
        
      </el-form>
  </div>
</template>

<script>
// 按需引入规则验证
import { validatePhone, validateEmail } from '../../utils/validate'

export default {
  name: "addUser",
  data() {
    return {
      //添加用户
      addUser: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      addUserRules: {
        email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" },
          { validator: validateEmail, message: "请输入正确的邮箱地址", trigger: "blur" }],
        mobile: [ { required: true, message: "手机号码不能为空", trigger: "blur" },
          { validator: validatePhone, message: "请输入正确的手机号码", trigger: "blur" }]
      }
    };
  },
};
</script>

<style lang="less" scoped></style>