"身份证号码"组件:<idcard> —— 快应用组件库H-UI

最新推荐文章于 2023-11-09 08:49:24 发布
最新推荐文章于 2023-11-09 08:49:24 发布
阅读量3.3k 收藏
点赞数
分类专栏： 表单组件
Copyright 2020 h-ui.mobi
本文链接：https://blog.csdn.net/weixin_41324043/article/details/105333140
版权

获得焦点时的状态：

空值时自动校验：

不符合格式要求时自动校验：

输入格式正确时：

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard1" params="{{params}}"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard2" params="{{params}}" form-horizontal="true"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard3" params="{{params}}" no-border="true" ></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard4" params="{{params}}" title="none"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard5" params="{{params}}" placeholder="none"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>

用于设置个性化输入提示语。

<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard6" params="{{params}}" tip="格式如，422322199001011010"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard7" params="{{params}}" align-right="true"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard8" params="{{params}}" maxlength="18"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>



<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard9" params="{{params}}" valid="has-success"></idcard>
            <idcard id="idcard10" params="{{params}}" valid="has-warning"></idcard>
            <idcard id="idcard11" params="{{params}}" valid="has-error"></idcard>
            <idcard id="idcard9_2" params="{{params}}" valid="has-success" valid-icon="none"></idcard>
            <idcard id="idcard10_2" params="{{params}}" valid="has-warning" valid-icon="none"></idcard>
            <idcard id="idcard11_2" params="{{params}}" valid="has-error" valid-icon="none"></idcard>
            <idcard id="idcard12" params="{{params}}" valid="has-success" form-horizontal="true"></idcard>
            <idcard id="idcard13" params="{{params}}" valid="has-warning" form-horizontal="true"></idcard>
            <idcard id="idcard14" params="{{params}}" valid="has-error" form-horizontal="true"></idcard>
            <idcard id="idcard12_2" params="{{params}}" valid="has-success" form-horizontal="true" valid-icon="none"></idcard>
            <idcard id="idcard13_2" params="{{params}}" valid="has-warning" form-horizontal="true" valid-icon="none"></idcard>
            <idcard id="idcard14_2" params="{{params}}" valid="has-error" form-horizontal="true" valid-icon="none"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard15" params="{{params}}" valid="has-error" form-error="该身份证号码已存在！" value="422322199001011010"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard16" params="{{params}}" not-blank="false"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard17" params="{{params}}" value="422322199012261010" disabled="true"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard18" params="{{params}}" not-blank="false" valid="none" valid-icon="none"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            params: {}
        }
    }
</script>


<import name="form" src="../Common/ui/h-ui/form/c_form"></import>
<import name="idcard" src="../Common/ui/h-ui/form/c_idcard"></import>
<template>
    <div class="container">
        <form>
            <idcard id="idcard19" params="{{params}}"></idcard>
        </form>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    import prompt from '@system.prompt'

    export default {
        private: {
            params: {}
        },
        onInit() {
            this.$on('idcard19_dispatchEvt',this.dispatchEvt)
        },
        dispatchEvt(evt) {
            // 弹窗显示详细说明
            prompt.showToast({
                message: evt.detail.value,
                duration: 1,
                gravity: 'top'
            })
        }
    }
</script>
扫码体验

-w254

快应用H-UI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
weui 日期选择器- 生日自选或根据身份证号动态获取生日
04-14
weui 日期选择器- 生日自选或根据身份证号动态获取生日 默认点选 生日 为当前日期 输入身份证号码后blur，生日文本框自动获取生日，并且点击弹出生日已选中
UniApp身份证拍照组件
qq_44131445的博客
09-28 188
【代码】【无标题】
个人信息-VUE模板 UNIAPP模板 布局、样式、JS分离
04-21
头像 姓名 吴福林 身份证 请填写身份证号 手机号码 13982056253 科室岗位 外科&gt;主任医生 个人信息-VUE模板-UNIAPP模板 VUE模板 UNIAPP模板 布局、样式、JS分离
JS前端实现身份证号码合法性校验（校验码校验）
m0_55333789的博客
11-09 1918
JS前端实现身份证号码合法性校验（校验码校验）
身份证号码验证,超严格
dibeichan3033的博客
05-19 293
//身份证省的编码 var vcity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 4...
Chinese-idCard:这是中文身份证验证码生成器
05-17
获取身份证信息 安装: npm install chinese-idcard-generator verify:校验身份证合法性，返回boolean值 var card = require('chinese-idcard-generator'); /** * param:chinese-idcard-generator(string) * return ...
身份证分析器插件jQuery-IDCard.js
06-01
jQuery身份证分析器插件jQuery-IDCard.js分析身份证基本信息，返回分析值
ML_IDCard_Segmentation-TF-Keras:机器学习项目以识别图像上的身份证
05-23
ML_IDCard_Segmentation（Tensorflow / Keras） 机器学习项目，用于识别图像上的身份证。 目标 该项目的目的是识别照片上的身份证，使用语义分割将其剪裁并转换透视图，以便获得身份证的正视图。 可选地，可以在...
idcard-iranian:诊断您的身份证是真还是假（对于伊朗人）===诊断身份证号码的正确性
05-13
idcard-伊朗人 诊断您的身份证（idenify）是对还是错白色java脚本（对于伊朗）===使用其算法和JavaScript语言诊断国民卡号的正确性
js实现身份证号码验证的简单实例
12-10
以下是根据身份证号码编码规则，使用JS对其进行有效性验证代码 IdCard-Validate.js代码如下: 代码如下:/** * 身份证15位编码规则：dddddd yymmdd xx p * dddddd：地区码 * yymmdd: 出生年月日 * xx: 顺序类编码，...
IDCARD身份证编号规则验证
12-26
中国居民身份证编号规则验证及升级二代号码源码（不含合法性验证）
id card
08-03
NULL 博文链接：https://jerry-zzl.iteye.com/blog/1138169
JAVA实现IDcard身份证自动识别
weixin_44016938的博客
08-17 1万+
调用百度api实现身份证信息读取
正则表达式案例
weixin_42342065的博客
08-19 1万+
//字符串替换 let str = ‘2.2.2’ let restr = str.replace(/./g,’’) // --&gt;222 replace全部替换字符串里的符号，要加 \ ,重点 // input输入框只能输入数字，最多2位小数的 oninput事件触发 value.replace(/^\D*(\d*(?:.\d{0,2})?).*$/g, ‘$1’) phone ： “regex”:/^([(]{1}[0-9]{2,6}[)])?([0-9]{3,20})((x|ext|extensi
身份证验证
zhougengxu2009的博客
01-06 2万+
public static int getAge(String idCardNo) { Date birthday = getBirthday(idCardNo); if (birthday == null) return 0; Calendar now = Calendar.getInstance(); Calendar bir = Calendar.getInstance...
JAVA代码验证身份证信息
似水流年
06-27 1286
<br />/*********************************** 身份证验证开始 ****************************************/ /** * 身份证号码验证 * 1、号码的结构 * 公民身份号码是特征组合码，由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为：六位数字地址码， * 八位数字出生日期码，三位数字顺序码和一位数字校验码。 * 2、地
IDcard 验证代码----新身份证合法性验证
热门推荐
angeryman的专栏
06-12 3万+
18位身份证标准在国家质量技术监督局于1999年7月1日实施的GB11643-1999《公民身份号码》中做了明确的规定。 GB11643-1999《公民身份号码》为GB11643-1989《社会保障号码》的修订版，其中指出将原标准名称“社会保障号码”更名为“公民身份号码”，另外GB11643-1999《公民身份号码》从实施之日起代替GB11643-1989。 GB11643-1999《公民身份号码》主要内容如下： 一、范围 该标准规定了公民身份号码的编码对象、号码的结构和表现形式，使每个编码
18位 身份证号 的 组成 部分
norang的博客
08-15 1万+
1、身份证号码组成结构 　　中国居民身份证号码有18位,是由17位数字本体码与1位校验码组合而成。从左至右分别为：数字地址码(6位身份证归属地号码)、居身出生日期(8位)、顺序码(3位)、校验码(由统一公式算出：1位) 　　 　　2、数字地址码–身份归属地(前6位) 　　该编码按GB/T2260的规定执行编制，是居民常住户口所在县(市、旗、区)的行政区划代码。 　　 　　3、数字出生日期(第7位至14位) 　　该编码按GB/T7408的规定执行,表示居民身份证对象出生年月日，该码由年月日连续数字组成，中间无
Vue-Uni-App小程序实现身份证识别
qq_43485097的博客
12-24 7048
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
js 身份证校验: 需要满足15-18位身份证校验规则
最新发布
03-30
JavaScript身份证校验可以通过正则表达式来实现。以下是一个简单的示例代码： ```javascript function validateIDCard(idCard) { ...在实际应用中，你可能需要进一步验证身份证号码的地区、生日等信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值