BootStarp表单验证--＞修改密码校验

1、对所需文件进行下载引用

使用BootStarp中的表单验证插件实现修改密码时的相关校验。

首先可以去cdn中下载验证插件所需要的css文件和js文件。

下载后在有jquery和bootstrap的页面里引入。

2、对表单进行对应设置

将验证内容放置到form表单中

给需要进行验证的地方添加属性，将input的父级div添加form-group，input本身添加上name属性。

3、添加js文件

 //编辑密码表单校验
 $("#editPwdForm").bootstrapValidator({
     message: '表单校验',
     feedbackIcons: {
         valid: 'bi bi-check-lg',
         invalid: 'bi bi-x-lg',
         validating: 'bi bi-arrow-repeat'
     },
     fields: {
         oldPwd: {
             message: "原始密码校验",
             validators: {
                 notEmpty: {
                     message: '原始密码不能为空'
                 },
                 remote: {  
                     type: "post",
                     url: '../../Handlers/UserInfosHandler.ashx',
                     message: '原始密码不正确，请重新输入',
                     delay: 500,//刷新时间
                     data: function (validator) {//validator相当于一个验证方法
                         return {
                             oldPwd: $("#oldPwd").val(),
                             type: "valid"
                         };
                     }

                 }
             }
         },
         newPwd: {
             validators: {
                 notEmpty: {
                     message: '新密码不能为空'
                 }
             }
         },
         okPwd: {
             validators: {
                 notEmpty: {
                     message: '确认密码不能为空'
                 },
                 identical: {
                     field: 'newPwd',
                     message: '两次密码不一致'
                 }
             }
         }
     }

 });

注意：验证原始密码是否一致后台需要返回json格式的：{valid:true/false}

type="button"时，利用动态添加点击事件提交验证

$("#btnAgree").click(function(){
    $("#ExamBankTypeForm").bootstrapValidator('validate');//提交验证
    if ($("#ExamBankTypeForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
     //验证成功代码
     }
});    

4、验证控件添加样式（解决验证图标不显示）

.has-error .form-control{
    border: 1px solid red;
    color:red;
}

.has-success .form-control{
    border: 2px solid rgb(19,135,82);
    color:rgb(19,135,82);
}

i.form-control-feedback {
    position: absolute;
    top: 7px;
    right: 10px;
}

.help-block {
    color: red;
}

将图标移至文本框正中，上面样式已经写了将样式定位到框中，只需要给每个input添加一个div，然后设置class即可。

最终样式