使用自定义属性验证常用的表单格式

迷南。 2022-06-18 00:45 144阅读 0赞

**前言**  
实际开发中，往往要注重效率和代码的复用率。以下的Demo就通过html5的自定义属性来使用Jquery实现常用的数字格式自动验证。以后的开发中需要考虑更多的、更便捷的使用技巧，这样才能做到事半功倍。

**用法**  
在需要验证格式的Input元素中新增自定义属性 **data-hook** 为 **number** 或 **id-card** 就可以分别验证输入内容是否为手机号码或身份证号码。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Demo</title>
    </head>
    <body>
      <input type="number" data-hook="number">
      <br>
      <input type="number" data-hook="id-card">
    </body>
    <script src="jquery-1.9.0.min.js"></script>
    <script> $(function() { //验证手机号码 $('[data-hook="number"]').on('focus', function() { $(this).val(''); $('.number-input-notice').remove(); }); $('[data-hook="number"]').on('blur', function() { var val = $(this).val(); if(val) { if(!val.match(/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)) { $(this).after('<span class="number-input-notice">请填写正确的手机号码</span>'); } } }); //验证身份证 $('[data-hook="id-card"]').on('focus', function() { $(this).val(''); $('.id-card-input-notice').remove(); }); $('[data-hook="id-card"]').on('blur', function() { var val = $(this).val(); if(val) { if(!val.match(/^([0-9]{17})[X|x|0-9]{1}$/)) { $(this).after('<span class="id-card-input-notice">请填写正确的身份证号码</span>'); } } }); }); </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap：bootstrapValidator表单自定义验证

1、Bootstrap：Form 表单在WEB开发过程中，经常遇到需要做表单提交，良好的提示增加用户体验感。在Bootstrap UI使用表单验证，构建登录界面。2、Bo...

青旅半醒/ 2024年04月20日 12:20/ 0 赞/ 89 阅读

相关 Django 表单验证之自定义表单验证器

本文基于[Django 表单验证][Django] 一文，补充完善表单验证器之自定义表单验证器具体步骤总结如下: 第一：在formValidation.py 文件中，添加

桃扇骨/ 2023年10月10日 13:12/ 0 赞/ 34 阅读

相关 element ui 自定义表单验证

element ui 表单验证 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="de

╰+哭是因爲堅強的太久メ/ 2022年09月10日 12:24/ 0 赞/ 238 阅读

相关使用自定义属性验证常用的表单格式

前言实际开发中，往往要注重效率和代码的复用率。以下的Demo就通过html5的自定义属性来使用Jquery实现常用的数字格式自动验证。以后的开发中需要考虑更多的、更便捷的

迷南。/ 2022年06月18日 00:45/ 0 赞/ 145 阅读

相关 AngularJs 自定义表单验证

一、AngularJs中的表单验证，仅提供了一些前台格式验证，如果想通过后台验证，则需要自定义处理自定义指定使用ajax后台验证示例： <style>

迈不过友情╰/ 2022年06月12日 05:57/ 0 赞/ 311 阅读

相关表单自定义验证setCustomValidity

对于默认的表单验证，有时候不是很友好，所以我们可以使用自定义表单验证，如下所示： <!DOCTYPE html> <html lang="en">

冷不防/ 2022年06月12日 02:16/ 0 赞/ 309 阅读

相关 shiro表单的验证自定义FormAuthenticationFilter

验证码思路；shiro使用FormAuthenticationFilter进行表单认证，验证校验的功能应该加在FormAuthenticationFilter中，在认证

淩亂°似流年/ 2022年06月12日 01:48/ 0 赞/ 289 阅读

相关 yii2自定义表单使用验证码

首先在控制器定义方法actions： public function actions() { return [

我不是女神ヾ/ 2022年06月12日 00:54/ 0 赞/ 255 阅读

相关表单验证插件 validate （基本表单验证，自定义验证规则）

步骤： (1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中 (2) 编写js代码对表单进行验证表单验证格式： $("\form

灰太狼/ 2022年04月10日 01:53/ 0 赞/ 424 阅读

相关 iview - 自定义表单验证

自定义表单验证代码 export default { data () { const validateImage = (rule,

电玩女神/ 2021年09月30日 03:14/ 0 赞/ 484 阅读