vue + element el-form 表单正则验证

  1. 手机号校验
	const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码~'))
      } {
        const phoneRegex = /^1[34578]\d{9}$/
        if (!phoneRegex.test(value)) {
          callback(new Error('手机号码格式不正确!'))
        } else {
          callback()
        }
      }
    }
  1. 邮箱校验
	const validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱~'))
        return
      }
      const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (!emailRegex.test(value)) {
        callback(new Error('邮箱格式不正确!'))
      } else {
        callback()
      }
    }
  1. 身份证校验
const checkIdCard = (rule, value, callback) => {
  const regEn = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!regEn.test(value)) {
    callback(new Error('请输入正确身份证'))
  } else {
    // 校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10
    // 下面分别分析出生日期和校验位
    let num = value.toUpperCase()
    let len, re
    len = num.length
    if (len === 15) {
      re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/)
      let arrSplit = num.match(re) // 检查生日日期是否正确
      let dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
      let bGoodDay
      bGoodDay = (dtmBirth.getYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))
      if (!bGoodDay) {
        callback(new Error('请输入正确身份证'))
      } else { // 将15位身份证转成18位 //校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10
        let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
        var nTemp = 0, i
        num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6)
        for (i = 0; i < 17; i++) {
          nTemp += num.substr(i, 1) * arrInt[i]
        }
        num += arrCh[nTemp % 11]
        callback()
      }
    }
    if (len === 18) {
      re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/)
      let arrSplit = num.match(re) // 检查生日日期是否正确
      let dtmBirth = new Date(arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
      let bGoodDay
      bGoodDay = (dtmBirth.getFullYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))
      if (!bGoodDay) {
        callback(new Error('请输入正确身份证'))
      } else { // 检验18位身份证的校验码是否正确。 //校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10
        let valnum
        let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
        var nTemp = 0, i
        for (i = 0; i < 17; i++) {
          nTemp += num.substr(i, 1) * arrInt[i]
        }
        valnum = arrCh[nTemp % 11]
        
        if (valnum !== num.substr(17, 1)) {
          callback(new Error('请输入正确身份证'))
        } else {
          callback()
        }
      }
    }
  }
}
  1. 车牌号校验
const checkPlateNum = (rule, value, callback) => {
  if (value && value !== '') {
    let regEn = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$)/
    if (!regEn.test(value)) {
      callback(new Error('请输入正确车牌号'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
  1. 数字校验

const checkNumber = (rule, value, callback) => {
  if (value && value !== ''){
    const regEn = /^(\-|\+)?\d+(\.\d)?$/
    if (!regEn.test(value)) {
      callback(new Error('请输入数字'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}
  1. 正整数校验
const  checkNumber = (rule, value, callback) => {
  const regEn = /^[1-9]\d*$/
  if (!regEn.test(value)) {
    callback(new Error('正整数'))
  } else {
    callback()
  }
  1. 密码校验
const  validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请设置正确格式的密码'))
        } else if(value.length < 6){
          callback(new Error('密码长度最小6位'))
        }else{
          callback()
        }
      }
  1. url 校验
const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入url ~'))
      } {
       const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
        if (!urlregex.test(value)) {
          callback(new Error('url格式不正确!'))
        } else {
          callback()
        }
      }
    }
  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Vue3 Element Plus 提供了丰富的表单验证功能,可以通过设置表单项的规则来实现验证。具体步骤如下: 1. 在表单项中设置规则,例如: ``` <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> ``` 其中,prop 属性指定了该表单项的唯一标识符,用于后续的验证。 2. 在表单中设置验证规则,例如: ``` <el-form :model="form" :rules="rules"> <!-- 表单项省略 --> </el-form> ``` 其中,rules 属性指定了一个对象,该对象的属性名与表单项的 prop 属性对应,属性值为一个数组,表示该表单项的验证规则。 3. 定义验证规则,例如: ``` data() { return { form: { username: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } } } ``` 其中,每个验证规则是一个对象,包含以下属性: - required:是否必填 - message:验证失败时的提示信息 - trigger:触发验证的事件,例如 blur 表示失去焦点时触发 - min:最小长度 - max:最大长度 以上就是 Vue3 Element Plus 表单验证的基本使用方法。需要注意的是,验证规则可以自定义,例如使用正则表达式进行验证。另外,表单验证还可以通过编程方式进行,例如在提交表单时手动调用验证方法。 ### 回答2: Vue3是Vue.js框架的最新版本,与之搭配的Element Plus是一套基于Vue3的UI组件库。表单验证是Web开发中一个非常重要的功能,Element Plus提供了强大的表单验证功能,可以帮助开发者轻松地实现表单的数据校验。 首先,在使用Element Plus进行表单验证之前,需要安装Element Plus并引入相应的组件。可以通过以下命令来安装Element Plus: ``` npm install element-plus --save ``` 安装完成后,在Vue3组件中可以直接引入Element Plus提供的组件: ``` import { ElForm, ElFormItem, ElInput } from 'element-plus'; ``` 其中,ElForm是用于包裹整个表单的组件,ElFormItem是表单中的每个表单项,ElInput是一个基础的文本输入框。 在引入相应的组件之后,就可以开始进行表单验证的设置了。Element Plus提供了多种验证规则,包括必填项、最大长度、最小长度、正则表达式等。以下是一个基本的表单验证示例: ``` <template> <el-form :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm()">提交</el-button> </el-form-item> </el-form> </template> <script> import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, data() { return { form: { name: '', email: '', }, rules: { name: [ { required: true, message: '姓名不能为空', trigger: 'blur' } ], email: [ { required: true, message: '邮箱不能为空', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] } ], }, }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { alert('验证通过'); } else { alert('验证失败'); return false; } }); }, }, }; </script> ``` 在上述示例中,通过将表单数据与验证规则绑定,实现了表单验证的功能。其中,prop属性用于指定每个表单项在form数据中的属性名,用于与验证规则进行绑定。required表示必填项,message为验证失败时的提示信息,trigger表示触发验证的方式,blur表示失去焦点时触发验证,change表示值改变时触发验证。 上述示例中,`this.$refs.form.validate`方法用于触发表单验证,如果验证通过则执行`if (valid)`代码块中的代码,否则执行`else`代码块中的代码。 总之,Element Plus提供了强大的表单验证功能,可以方便地实现表单数据校验。开发者可以根据实际需求设置不同的验证规则,从而提高表单数据的正确性和完整性,提升Web应用程序的用户体验。 ### 回答3: Vue3 Element Plus 是一种基于 Vue3 开发的 UI 库,具有更高的性能和更好的扩展性。表单验证Vue3 Element Plus 中非常重要的功能,可以用于确保用户输入的数据有效和正确。 Vue3 Element Plus 表单验证的基本原理是利用 Vue3 的响应式系统监控表单中输入内容的变化,通过设置条件进行判断和验证输入内容是否合法,最终反馈验证结果,通常会在表单输入框的下面显示错误提示信息。 Vue3 Element Plus 表单验证功能提供了多种验证方式,包括必填验证、长度验证、邮箱验证、URL 验证、手机号验证正则验证等等。用户在使用时可以根据具体的需求选择合适的验证方式,也可以自定义一些验证规则来满足特殊要求。 Vue3 Element Plus 表单验证的使用步骤如下: 1. 在 HTML 页面中引入 Vue3 和 Element Plus 的库文件。 2. 在 Vue3 组件中引入 Element Plus 的表单组件,并设置表单数据和验证规则。 3. 绑定表单数据到页面,例如使用 v-model 绑定到输入框中。 4. 在需要验证的输入框中设置验证规则,例如使用 rules 数组设置表单验证规则。 5. 在表单提交时进行验证,如果验证失败则阻止提交操作,并将错误信息反馈给用户。 Vue3 Element Plus 表单验证非常简单易用,对于开发者来说可以极大的减少代码量,提高开发效率。同时,它还提供了丰富的错误提示和交互方式,可以让用户清晰地知道输入错误的原因并及时进行更正。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值