参考element-ui 表单验证思维写的 jq 表单验证

不逼逼上代码

例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script type="text/javascript" src="valid.js"></script>
    </head> 
    <body>
        <form class="forms">
            <input type="text" name="name"  />
            <input type="password" name="pwd"  />
            <input type="password" name="pwd2" />
            <div id="sub">提交</div>
        </form>
    </body>
    <script type="text/javascript">
        var reg = [{
            name:"name",
            type:"len",
            reg:"0,9",
            msg:"最多9个字母"
        },{
            name:"pwd",
            type:"reg",
            reg:"/^[a-z0-9]{6,10}/img",
            msg:"请输入6-10位的数字字母密码"
        },{
            name:"pwd2",
            type:"val",
            typeName:"pwd",
            msg:"两次密码不一样"
        }];
        var valid = new Validation(".forms","#sub",reg,true)    
//      valid.click(function (data){
//          console.log(data,"方法click") 
//      })
//      valid.change(function (data){
//          console.log(data,"方法change")
//      },false)
        valid.blur(function (data){
            console.log(data,"方法blur")
        })
    </script>
</html>



使用方法

//      验证规则对象
//      格式 {
//          name:input的name值,
//          type:(len长度 , reg正则表达式 , val某个输入框的值[需配合 typeName使用]),
//          reg:规则,typeName:type为val时设置 值为对应的name,
//          msg:放回的错误信息
//      }
        var reg = [{
            name:"name",
            type:"len",
            reg:"0,9",
            msg:"最多9个字母"
        }];
        
//      传入的参数  
//      1 form节点   id class 标签都可以
//      2 点击触发节点  
//      3 验证规则  
//      4 是否显示错误信息  true/false  默认false
        var valid = new Validation(".forms","#sub",reg,true)
            
//      方法 第一个为回调函数 第二个为配置  
//      返回数据格式  [{name: 验证的名字, result: 对应验证的结果, value: 验证的值, reg: 所生成的正则, msg: 错误提示返回}]

//      方法click 点击时进行验证  返回所有 错误对象
        valid.click(function (data){
            console.log(data,"方法click") 
        })
        
//      方法change 键盘抬起时验证 不会弹出错误信息  传入 true时 以数组的形式返回所有的验证结果   否则返回当前输入框验证对象 默认false
        valid.change(function (data){
            console.log(data,"方法change")
        },false)
        
//      方法blur 失去焦点时验证 不会弹出错误信息   返回错误信息
        valid.blur(function (data){
            console.log(data,"方法blur")
        })

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 【版权免责声明】 转自 南山岳麓书院,版权归原作者所有。如涉及作品版权问题,请与本人联系。 把平时看到或项目用到的...
    上吊的豆腐阅读 4,560评论 0 8
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,902评论 1 32
  • 海浪滔天的大海带给我们的是对生活的勇气和斗志,是向往,是憧憬,是激情! 临摹南蛮文子
    瞳瞳日中的微笑阅读 2,750评论 2 2
  • 第十五次课主要内容。焦点的两个基本核心:一点稳,二是每个人都是他自己问题的专家。稳是内心的真正平静,而不是憋住。...
    成长自已阅读 1,351评论 0 0
  • 不知不觉,身边的朋友孩子们都老大。 我却还是孑然一身,有时候不知道哪里出了问题,有时候又觉得哪里都有问题。 人有时...
    老了夫子阅读 2,828评论 0 0

友情链接更多精彩内容