vue表单:输入身份证号码则自动获取对应的年龄和性别,,若不输入身份证号则自己填写年龄和性别

<el-input  :ref="item.meta.system_id"  v-model="temp[item.meta.valueKey]"  clearable  oninput="if(value.length>18)value=value.slice(0,18)"  :disabled="item.meta.disabled"  :placeholder="item.meta.placeholder ? item.meta.placeholder : ‘请输入‘"  @blur="onBlurCard"/>
// 电话输入框失去焦点即表示该输入框输入了值且通过正则表达式是个合法是身份证号码onBlurCard() {  const val = this.temp[‘idCardNo‘].length // 获取电话号码长度  const iden = this.temp[‘idCardNo‘] // 获取电话号码输入框的值  let sex = null  const myDate = new Date()  const month = myDate.getMonth() + 1  const day = myDate.getDate()  let age = 0

  if (val === 18) {    age = myDate.getFullYear() - iden.substring(6, 10) - 1    sex = iden.substring(16, 17)    if (iden.substring(10, 12) < month || iden.substring(10, 12) === month && iden.substring(12, 14) <= day) age++  }  if (val === 15) {    age = myDate.getFullYear() - iden.substring(6, 8) - 1901    sex = iden.substring(13, 14)    if (iden.substring(8, 10) < month || iden.substring(8, 10) === month && iden.substring(10, 12) <= day) age++  }

  if (sex % 2 === 0) { sex = 2 } else { sex = 1 } // sex的值需要根据情况而定,,这里协议的值为:
studentSex: new Map([ // 学生性别  [2, ‘女‘],  [1, ‘男‘],  [3, ‘未知‘]]),
  this.temp[‘studentSex‘] = sex  // 设置表单中性别的值  this.temp[‘studentAge‘] = age // 设置表单中年龄字段的值}

原文地址:https://www.cnblogs.com/LindaBlog/p/12213088.html

时间: 2024-08-28 13:54:32

vue表单:输入身份证号码则自动获取对应的年龄和性别,,若不输入身份证号则自己填写年龄和性别的相关文章

[转载]WebBrowser控件表单(form)的自动填写和提交

话说有了WebBrowser类,终于不用自己手动封装SHDocVw的AxWebBrowser这个ActiveX控件了.这个类如果仅仅作为一个和IE一模一样浏览器,那就太没意思了(还不如直接用IE呢).那么,无论我们是想做一个"定制版IE",还是希望利用HTML来做用户界面(指WinApp而非WebApp.许多单机软件,包括Windows的帮助支持中心,都是HTML做的),都少不了Windows Form和包含在WebBrowser中的Web页面的交互.本文将通过几个实际的例子,初步介绍

vue表单验证,vee-Validate

1.下载安装 npm install vee-validate --save 2.main.js 添加 //vue表单验证插件 import VeeValidate,{Validator} from 'vee-Validate'; //没有配置过的错误提示默认使用英文显示的, //如果想要用中文显示需要我们手动配置一下 import zh from 'vee-validate/dist/locale/zh_CN';   Validator.localize('zh', zh); //blur 失

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

vue 表单提交

在vue中,有一个$el 属性. 该属性在created 的阶段还是不可用的,直到 mounted 之后,我们才能获取到 $el 属性. $el是vue实例中 el 属性标识的dom元素. ------------------------------------ vue表单提交,有时候需要提交 文件数据,这时候需要用到 formDate,代码如下 1 let formData = new FormData($(this.$el).find(".import-form")[0]); //

Vue表单

gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson11 一 vue表单 实在是太简单了,直接来个例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue表单</title> <meta name="viewport" content=

vue 表单校验(二)

vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐,因而一直在研究中 表单校验分类 前后端校验 前端校验 后端校验 这种目前一般是结合起来使用,很少单纯前端校验,或者单纯后端校验的 前端检验 数据录入时校验 数据回显时校验 动态创建时校验 数据是否必填时校验 接下来所谈论的校验都是基于前端进行校验,若是后天校验,只是统一校验规则而已,这样前后便可以统

vue表单校验(三)

vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 通过表单提交时,触发校验,未通过的表单会添加is-error,之后滚动到对应的错误位置即可 页面视图 实现逻辑 触发条件 在提交时,若是未通过则开始进行判断,由于是依赖于is-error的class类名,因而需要等form表单错误的元素添加完is-error类名后再进行判断 submitForm1

vue表单控件绑定+自定义组件

vue表单控件绑定 v-model 在表单控件元素上创建双向数据绑定 文本框双向绑定 多选框演示 下拉列表演示 vue自定义组件 组件放在components目录下 组件基本要素:props  $emit 通过import导入自定义组件 制作一个倒计时组件: 1.在conponents目录下,新建一个time.vue 方法写在mouted声明周期函数内,代码如下: 然后在index.vue中使用组件: 我之前组件命名为time,可能与默认什么冲突了,然后报错不让用,所以改名成cyytime 但是

客户端表单提交数据方式与服务器获取数据

表单提交数据的两种方式 表单form的提交有两种方式,一种是get的方法,通过超级链接后面的参数提交过来,一种是post ,通过Form表单提交过来. post方式: <form id="form1" name="form1" method="post" action="login.aspx"> <table width="501" border="0" align=&