bootstrap表单验证插件 经验记录 与RSA加密事件配合修改

\继大概只有自己能懂的干货 注册表单密码RSA加密 再续写表单验证。

因为项目用的是bootstrap，所以就将就到底，直接用bootstrapvalidate 插件了。
两个插件文件引进来先，可以在官网下载
1. bootstrapValidator.min.css
2. bootstrapValidator.min.js

随便找个页面吧，修改密码的页面，只有三个密码框，但是数据都要加密。直接看代码就知道怎么用了，查查插件的api就知道怎么用了。

<script type="text/javascript">
    $(function () {
        $('#UpdatePasswordForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                Password: {
                    validators: {
                        notEmpty: {
                            message: '请输入當前密码。'
                        },
                        regexp: {
                            regexp: /^((?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,})$/,
                            message: '原密碼格式錯誤'
                        }
                    }
                },
                NewPassword: {
                    validators: {
                        notEmpty: {
                            message: '请输入新密码。'
                        },
                        regexp: {
                            regexp: /^((?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,})$/,
                           message: '密碼格式不符'
                        }
                    }
                },
                ConfirmPassword: {
                    validators: {
                        notEmpty: {
                            message: '请输入确认密码。'
                        },
                        identical: {
                            field: 'NewPassword',
                            message: '两次输入的密码不一致。'
                        }
                    }
                }
            }//fields End
        })
             .on('success.field.fv', function(e, data) {
                 if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                     data.fv.disableSubmitButtons(true);
                 }
             })
             .on('success.form.bv', function (e, data) {
                 // Prevent form submission
                // e.preventDefault();

                 // You can get the form instance
                 var $form = $(e.target);

                 // and the FormValidation instance
                 var fv = $form.data('formValidation');

                 // Do whatever you want here ...
                 RSAPassAndSubmit($("#Password").val(),$("#NewPassword").val(), $("#ConfirmPassword").val(), "@ViewData["Exponent"]", "@ViewData["modulus"]");
                 // Use the defaultSubmit() method if you want to submit the form
                 // See http://formvalidation.io/api/#default-submit

             })

    })

    function RSAPassAndSubmit(PasswordHiddenValue, NewPasswordHiddenValue, ConfirmPasswordHiddenValue, exponent, modulus) {
        setMaxDigits(130);
        var key = new RSAKeyPair(exponent, "", modulus);
        $("#PasswordHiddenValue").val(encryptedString(key,PasswordHiddenValue));
      $("#NewPasswordHiddenValue").val(encryptedString(key,NewPasswordHiddenValue));
        $("#ConfirmPasswordHiddenValue").val(encryptedString(key,ConfirmPasswordHiddenValue));
    }
</script>

说说遇到的一些问题，以及bootstrapValidator的一些常用技巧功能。

1. 是不是需要等所有的验证都结束了，才能点击提交button。所以疯狂的查啊查，找到了，貌似不太好使，但是不太影响系统安全了。

showing-one-message each time 只能说看了之后很无奈，只是隐藏操作，而不是阻止下一条验证。所以会有后面Email的的ajax操作，把规则验证放在后台也执行一遍，让注册提示消息不显示。

.on('success.field.fv', function(e, data) {
                 if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                     data.fv.disableSubmitButtons(true);
                }
             })

1. 先前的密码加密事件也是放在button上的，要知道有时候那个disable button事件并不好使，所以，所以输入密码了过后，一定会直接执行加密方法的，问题就多了。mvc中，后来放了三个hidden字段在form中，把加密的密码给hidden字段了，页面输入只供验证提示。

api-default-submit

.on('success.form.bv', function (e, data) {
                 // Prevent form submission
                // e.preventDefault();

                 // You can get the form instance
                 var $form = $(e.target);

                 // and the FormValidation instance
                 var fv = $form.data('formValidation');

                 // Do whatever you want here ...
                 RSAPassAndSubmit($("#Password").val(),$("#NewPassword").val(), $("#ConfirmPassword").val(), "@ViewData["Exponent"]", "@ViewData["modulus"]");
                 // Use the defaultSubmit() method if you want to submit the form
                 // See http://formvalidation.io/api/#default-submit

             })

3.支持ajax即使验证，Remote，验证邮箱是不是使用过。

Email: {
                    validators: {
                         notEmpty: {
                             message: '請填寫郵箱地址。'
                         },
                         stringLength: {
                             min: 1,
                             max: 128,
                             message: '郵箱地址過長。'
                         },
                         regexp: {
                            regexp: /^(\w)+(\.\w+)*@@(\w)+((\.\w+)+)$/,
                             message: '郵箱格式不正確'
                         }
                         ,
                         remote: {
                           type: "post",
                             url: 'CheckEmailRegisted',
                             data: function (validator) {

                                 return {
                                     email: validator.getFieldElements('Email').val()
                                 };
                             },
                             message: '此郵箱已註冊。',
                             delay: 2000
                        }

                     }
                 },
                 RealName: {
                    validators: {
                         notEmpty: {
                             message: '請輸入真實姓名。'
                         }
                     }
               },

后台处理Email是否注册也贴上来吧：

 [HttpPost]
        public JsonResult CheckEmailRegisted(string Email)
        {
            if (!Regex.IsMatch(Email, EmailPattern, RegexOptions.IgnoreCase))
            {
                JsonResult json = new JsonResult { Data = new { valid = true } };
                return json;
              }
             else  if (!_userService.VerifyUserUnicity(Email, Email))
             {
                 JsonResult json = new JsonResult { Data = new { valid = false } };
                 return json;
             }
            else
             {
                 JsonResult json = new JsonResult { Data = new { valid = true } };
                 return json;
        }

        }
        //返回值必须是[valid:true/false]的json串才能被验证框架识别，然后提示message。

tip：api -using options

$(document).ready(function() {
    $(form)
        .formValidation({
            fields: {
                email: {
                    validators: {
                        emailAddress: {
                            onError: function(e, data) {
                                // Do something ...
                            },
                            onSuccess: function(e, data) {
                                // Do something ...
                            },
                            // ... other validator options ...
                        }
                    }
                }
            }
        });
});

bootsrapValidate自定义自己的规则

官方提供的开发是http://formvalidation.io/developing/，但是有问题（感觉不是一个插件了…）
所以开始的地方自己查开发版的代码，找到了这种写法：
$.fn.bootstrapValidator.validators. [validatorname]=…

 $(document).ready(function () {
        //Ourselves Validator rule  for 原密碼和新密碼不能相同
         $.fn.bootstrapValidator.validators.ChangePasswordNOSame = {
            validate: function (validator, $field, options) {
                if ($("#Password").val() == $("#NewPassword").val()) {
                    return {
                        valid: false,    // or false
                        message: '新密碼和當前密碼不能相同'
                    }
                }
                return {
                    valid: true,       // or true
                    message: 'Other  message'
                }
            }
        };

        $('#UpdatePasswordForm').bootstrapValidator
        ({
        ...
        ,
                NewPassword: {
                    validators: {
                        notEmpty: {
                            message: '请输入新密码。'
                        },
                        regexp: {
                            regexp: /^((?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,})$/,
                            message: '密碼格式不符'
                        },
                        ChangePasswordNOSame: {
                        }
                    }
                },
                ...
//但是我发现message在自定义规则上写了之后，调用的时候不用写了。。（失误，直接return:true/flase,就可以在下面写message了）

感兴趣可以仔细看api ：http://formvalidation.io/examples/