vue+vant只能输入数字、字母验证(身份证号码验证)

前端开发中经常会遇见表单验证,接下来我们说一说表单验证怎么实现的,本文章主要基于elementUI+vue框架,当然中间的验证JS都可使用。


前言

本章主要写手机号验证、邮箱验证、身份证验证以及实现动态必填项,感兴趣就继续向下看吧


一、新建文件

1.手机号验证

1.1 追求简单请在输入框中写上下方圈出的属性,表示只能输入数字。
在这里插入图片描述

1.2 接下来就是规范输入的电话格式,此处使用了正则表达式(elementUI表单的验证使用prop来指定验证的规则):。

//需要在return里面写上验证规则
//required:指定输入框是否必填(true\false)   
//validator:指定自定义的验证规则
//trigger:指定何时执行验证规则(blur\change)
//详情可参考官网:https://element.eleme.io/#/zh-CN/component/form
rules: {
	 mobile: [ { required: false, validator: checkPhone, trigger: "blur" }],
}

1.3 指定了验证规则现在就来写具体的验证规则,使用正则验证:

//在data中写入以下方法:
        var checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
            setTimeout(() => {
                if (value) {
                    if (phoneReg.test(value)) {
                        callback();
                    } else {
                        callback(new Error("电话号码格式不正确"));
                    }
                } else {
                    callback();
                }
            }, 100);
        };

2.判断身份证号码

一般身份证为15或18位,或者17位+X/x,所以这里有两种方法,任里选择,代码如下(示例):

//第一种
//数字+字母+15、18
export function certificateNumber(string, type) {
  if (string) {
    if (/^[A-Za-z0-9]+$/.test(string) && (string.length == 15 || string.length == 18)) {
      return
    } else {
      return Toast('证件号码不合规!')
    }
  }
}
//第二种
// 身份证号码的验证
export function checkIdNum(rule, value, callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    if (!reg.test(value)) {
      return Toast('证件号码格式有误')
    }
  }
}

3.验证邮箱格式

邮箱一般是数字/英文 + @ +后缀,例如:wangxing@qq.com(这里省略了1.1 、1.2,原理相同,修改prop和指定的验证方法名就行了,这里就不一一赘述 ):


  var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('请输入邮箱'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }

4.动态设置表单必填与否

有些时候我们会遇到同一个输入框在不同状态下可能是必填,也可能不是必填,所以要动态得改变必填属性,这里以密码为例,新增时密码为必填,修改时密码为非必填,flag需要在data里面定义,新增时为true,修改时为false,话不多说,上代码:

//html
  <el-form label-width="120px"
               :model="resetForm"
               :rules="rules"
               ref="resetForm">
    <el-form-item label="密码"
                      maxlength="20"
                      prop="password"
                      :required="isRequired">
          <el-input v-model="resetForm.password"
                    type="password"
                    clearable
                    placeholder="请输入密码"></el-input>
        </el-form-item>
   </el-form>

//data里面得
  var checkPassword = (rule, value, callback) => {
      if (this.isRequired) {
        if (value) {
          callback()
        } else {
          callback(new Error('请输入密码'))
        }
      } else {
        callback()
      }
    }
     rules: {
        password: [{ validator: checkPassword }],
      },
    //监听flag得变化改变必填与否
      computed: {
    isRequired() {
      return this.flag
    }
  },

对应的我在index.js文件最后还要输入,代码如下:

export default {
  checkId: [{ required: false, validator: checkIdNum, trigger: 'blur' }],
  chenckPolicyName: [{ required: false, validator: policyNumber, trigger: 'blur' }],
  chenckCerNumber: [{ required: false, validator: certificateNumber, trigger: 'blur' }],
}

2.页面中的使用

代码如下(示例):

<template>
<div>
 <van-cell-group class="form">
        <van-field v-model="number"
                   maxlength="18"
                   label="身份证号码"
                   :rules="rulesUtils.chenckPolicyName"
                   placeholder="身份证号码"
                   clearable />
   </van-cell-group >
</div>
import rules from '@/util/index'
export default {
  data() {
    return {
      rulesUtils: rules,
      }

总结

1.定义方法并设置验证规则 2.引入文件并定义字段 3.使用规则
Vue2和Vant2都提供了一些常用的表单验证方法,可以轻松地实现表单提交前的验证。以下是一个简单的示例,展示如何使用Vue2和Vant2来实现表单提交前的验证: 1. 在Vue组件中定义表单数据和验证规则: ``` data() { return { formData: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名长度为3-10个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' } ] } } } ``` 2. 在Vue模板中绑定表单数据和验证规则,并使用Vant2组件渲染表单元素: ``` <van-form v-model="formData" :rules="rules" > <van-field v-model="formData.username" name="username" label="用户名" placeholder="请输入用户名" autocomplete="off" clearable /> <van-field v-model="formData.password" name="password" label="密码" placeholder="请输入密码" type="password" autocomplete="off" clearable /> </van-form> ``` 3. 在Vue组件中定义表单提交方法,并在该方法中调用Vant2的`validate`方法进行表单验证: ``` methods: { onSubmit() { this.$refs.form.validate(valid => { if (valid) { // 表单验证通过,执行表单提交操作 // ... } else { // 表单验证不通过,给出提示信息 Toast('请填写正确的信息') } }) } } ``` 以上就是一个简单的Vue2 + Vant2表单提交验证的示例。需要注意的是,Vant2的`<van-form>`组件和`<van-field>`组件都提供了大量的属性和事件,可以根据实际需求进行灵活配置和使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值