zoukankan      html  css  js  c++  java
  • bootstrap validator填坑(刷新验证,后台验证传多个数据,自定义验证规则)

    之前做的页面,用的是bootstrap前端框架,里面的表单验证自然也就选择了bootstrap validator,现在有了一些新的验证规则,下面是最近新学到的,一是分享,二是方便以后自己查看

    有用过bootstrap validator的都知道,这个表单验证可以实现前端验证(长度,正则)和后端验证

    我看过大部分bootstrap validator关于密码与确认密码的验证示例,基本上都是如下实现(我只贴出js,对应html没必要贴出)

    验证了密码与确认密码不能为空,互相判断是否一致,都判断了是否和别的input的值相同,还对密码的内容进行了规范(至少包含一个字母);网上我目前查到的关于密码与确认密码是否相同的bootstrap validator验证都是这样写的,这样写的好处是,当密码与确认密码任何一方修改时,都会触发对方的identical验证,这一点很重要,如果你真的做过密码与确认密码的相同验证你就会明白为什么,但是这样会有一个问题:用户注册开始,输入密码还没输入确认密码呢,咔,提示个两次密码不一致,用户可能会心想:mdzz,我后面还没输入呢,能一样吗;而且当用户再输入完确认密码之后,虽然两个的idntical验证都刷新了,都通过了,样式也都是原来绿色,但是前面input的后面还是叉号,如图

    如果你先修改后面,再修改前面和他保持一直,后面的框也就会是叉号,虽然不影响功能,但是对于“观察仔细”的客户,这点是没法通过的,下面开始爬坑

    首先我想到的是验证时调用后台验证,把他们俩一起传到后台,然后通过多方查询,我找到了同时往后台传多个数据的方法

    这个方法确实把两个数据都传过去了,在后台可以进行判断确认密码是否为空,然后决定返回true或者false,但是无法实现两个输入框互动(举个例子,前面输入ABC123,后面输入ABC1231,这时候后面的验证结果是不通过,然后你在前面添加个1,前面的改为通过了,但是后面的不通过状态并不跟着改变)

    然后我找到了一个callback,自定义验证,就是自己定义验证规则

    相当于一小块天堂,这里满el表达式也能用,判断也能用,return返回的通过了就是true,没通过就是提示你设置的message内容,但是就算两个框都加上这种验证,依然无法实现联动,这里我又想到了刷新单个属性的表单验证

    这样可以实现基本需求。

  • 相关阅读:
    微信小程序 iPhone 11、iPhoneX 底部安全区域(底部小黑条)适配
    Servlet与vue-axios交互跨域问题之Access-Control-Allow-Origin' header contains multiple values '*, null', but only one is allowed.
    Windows10下PCL1.8.1以及Python-pcl1.81环境配置的掉发之路
    【问题记录】Navicat Premium连接mysql-8.0.17时出现2059
    mysql-8.0.17解压版安装步骤及MySQL服务无法启动问题的解决办法
    ENVI基本操作之彩色合成
    GeoServer与Udig发布矢量数据出现的问题1——预览数据一半显示正常一半重叠
    本地日志文件
    SQL语句(2)--- 函数
    SQL语句(1)--- SQL简介
  • 原文地址:https://www.cnblogs.com/hardwork1/p/8559151.html
Copyright © 2011-2022 走看看