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

最新推荐文章于 2023-01-15 20:24:46 发布
最新推荐文章于 2023-01-15 20:24:46 发布
阅读量661 收藏
点赞数
分类专栏： 前端

原址：点击打开链接

$.ajax() 验证时 只能//返回[valid:true/false]的json串才能被验证框架识别，然后提示message。

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

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

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

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    $(<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#UpdatePasswordForm'</span>).bootstrapValidator({
            feedbackIcons: {
                valid: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'glyphicon glyphicon-ok'</span>,
                invalid: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'glyphicon glyphicon-remove'</span>,
                validating: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'glyphicon glyphicon-refresh'</span>
            },
            fields: {
                Password: {
                    validators: {
                        notEmpty: {
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'请输入當前密码。'</span>
                        },
                        regexp: {
                            regexp: <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/^((?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,})$/</span>,
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'原密碼格式錯誤'</span>
                        }
                    }
                },
                NewPassword: {
                    validators: {
                        notEmpty: {
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'请输入新密码。'</span>
                        },
                        regexp: {
                            regexp: <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/^((?=.*[a-z])(?=.*[A-Z])(?=.*\W).{8,})$/</span>,
                           message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'密碼格式不符'</span>
                        }
                    }
                },
                ConfirmPassword: {
                    validators: {
                        notEmpty: {
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'请输入确认密码。'</span>
                        },
                        identical: {
                            field: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'NewPassword'</span>,
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'两次输入的密码不一致。'</span>
                        }
                    }
                }
            }<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//fields End</span>
        })
             .on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success.field.fv'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e, data)</span> {</span>
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (data.fv.getInvalidFields().length > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// There is invalid field</span>
                     data.fv.disableSubmitButtons(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>);
                 }
             })
             .on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success.form.bv'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e, data)</span> {</span>
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Prevent form submission</span>
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// e.preventDefault();</span>

                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// You can get the form instance</span>
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> $form = $(e.target);

                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// and the FormValidation instance</span>
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> fv = $form.data(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'formValidation'</span>);

                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Do whatever you want here ...</span>
                 RSAPassAndSubmit($(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#Password"</span>).val(),$(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#NewPassword"</span>).val(), $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ConfirmPassword"</span>).val(), <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@ViewData["</span>Exponent<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"]"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@ViewData["</span>modulus<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"]"</span>);
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Use the defaultSubmit() method if you want to submit the form</span>
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// See http://formvalidation.io/api/#default-submit</span>

             })

    })

    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">RSAPassAndSubmit</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(PasswordHiddenValue, NewPasswordHiddenValue, ConfirmPasswordHiddenValue, exponent, modulus)</span> {</span>
        setMaxDigits(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">130</span>);
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> key = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> RSAKeyPair(exponent, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>, modulus);
        $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#PasswordHiddenValue"</span>).val(encryptedString(key,PasswordHiddenValue));
      $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#NewPasswordHiddenValue"</span>).val(encryptedString(key,NewPasswordHiddenValue));
        $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ConfirmPasswordHiddenValue"</span>).val(encryptedString(key,ConfirmPasswordHiddenValue));
    }
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li></ul>

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

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

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

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success.field.fv'</span>, function(e, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">data</span>) {
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">data</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>fv<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>getInvalidFields()<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>length <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// There is invalid field</span>
                     <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">data</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>fv<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>disableSubmitButtons(<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>);
                }
             })
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>
  1. 先前的密码加密事件也是放在button上的，要知道有时候那个disable button事件并不好使，所以，所以输入密码了过后，一定会直接执行加密方法的，问题就多了。mvc中，后来放了三个hidden字段在form中，把加密的密码给hidden字段了，页面输入只供验证提示。

api-default-submit

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">.on(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'success.form.bv'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(e, data)</span> {</span>
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Prevent form submission</span>
                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// e.preventDefault();</span>

                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// You can get the form instance</span>
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> $form = $(e.target);

                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// and the FormValidation instance</span>
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> fv = $form.data(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'formValidation'</span>);

                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Do whatever you want here ...</span>
                 RSAPassAndSubmit($(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#Password"</span>).val(),$(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#NewPassword"</span>).val(), $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ConfirmPassword"</span>).val(), <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@ViewData["</span>Exponent<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"]"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@ViewData["</span>modulus<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"]"</span>);
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Use the defaultSubmit() method if you want to submit the form</span>
                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// See http://formvalidation.io/api/#default-submit</span>

             })
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>

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

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">Email: {
                    validators: {
                         notEmpty: {
                             message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'請填寫郵箱地址。'</span>
                         },
                         stringLength: {
                             min: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,
                             max: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">128</span>,
                             message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'郵箱地址過長。'</span>
                         },
                         regexp: {
                            regexp: <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/^(\w)+(\.\w+)*@@(\w)+((\.\w+)+)$/</span>,
                             message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'郵箱格式不正確'</span>
                         }
                         ,
                         remote: {
                           type: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"post"</span>,
                             url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'CheckEmailRegisted'</span>,
                             data: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(validator)</span> {</span>

                                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> {
                                     email: validator.getFieldElements(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Email'</span>).val()
                                 };
                             },
                             message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'此郵箱已註冊。'</span>,
                             delay: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2000</span>
                        }

                     }
                 },
                 RealName: {
                    validators: {
                         notEmpty: {
                             message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'請輸入真實姓名。'</span>
                         }
                     }
               },
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li></ul>

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

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> [HttpPost]
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> JsonResult <span class="hljs-title" style="box-sizing: border-box;">CheckEmailRegisted</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">string</span> Email)
        {
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!Regex.IsMatch(Email, EmailPattern, RegexOptions.IgnoreCase))
            {
                JsonResult json = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> JsonResult { Data = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> { valid = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span> } };
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> json;
              }
             <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!_userService.VerifyUserUnicity(Email, Email))
             {
                 JsonResult json = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> JsonResult { Data = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> { valid = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span> } };
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> json;
             }
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>
             {
                 JsonResult json = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> JsonResult { Data = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> { valid = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span> } };
                 <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> json;
        }

        }
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//返回值必须是[valid:true/false]的json串才能被验证框架识别，然后提示message。</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>

tip：api -using options

<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$(document).ready(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>() {
    $(form)
        .formValidation({
            fields: {
                email: {
                    validators: {
                        emailAddress: {
                            onError: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>(e, data) {
                                // Do something <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
                            },
                            onSuccess: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span>(e, data) {
                                // Do something <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
                            },
                            // <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> other validator options <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
                        }
                    }
                }
            }
        });
});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

bootsrapValidate自定义自己的规则

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

<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> $(document).ready(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> () {
        //Ourselves Validator rule  <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> 原密碼和新密碼不能相同
         $.fn.bootstrapValidator.validators.ChangePasswordNOSame = {
            validate: <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> (validator, $field, options) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> ($(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#Password"</span>).val() == $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#NewPassword"</span>).val()) {
                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> {
                        valid: false,    // or false
                        message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'新密碼和當前密碼不能相同'</span>
                    }
                }
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> {
                    valid: true,       // or true
                    message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'Other  message'</span>
                }
            }
        };

        $(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'#UpdatePasswordForm'</span>).bootstrapValidator
        ({
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
        ,
                NewPassword: {
                    validators: {
                        notEmpty: {
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'请输入新密码。'</span>
                        },
                        regexp: {
                            regexp: /^((?=.*[a-z])(?=.*[A-Z])(?=.*\W).{<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8</span>,})$/,
                            message: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'密碼格式不符'</span>
                        },
                        ChangePasswordNOSame: {
                        }
                    }
                },
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
//但是我发现message在自定义规则上写了之后，调用的时候不用写了。。（失误，直接<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>:true/flase,就可以在下面写message了）</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li></ul>

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


阳泉
关注
专栏目录
005字符串(完)
m0_46427273的博客
03-13 269
概述、抽象数据类型、存储结构、朴素匹配算法、KMP模式匹配算法、改进KMP模式匹配算法
form表单密码加密传输
热门推荐
Army的专栏
01-31 3万+
在使用用户名密码进行登录时，有时候为了安全需要把密码加密进行传输。 登录 /js/aes.js"> function submitForm(){ var theForm = document.forms[0]; if(theForm.j_username.value !='' && theForm.j_password.value !=''){ if(parent!=null
RSA前端JS加密js库
10-23
rsa加密的js依赖，包括必须的三个js包。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
JS前端 MD5加密
Sunshine_Moon的博客
05-30 2431
Bootstrap官网获得md5 js地址 点击这里 &lt;!--MD5加密--&gt; &lt;script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"&gt;&lt;/script&gt; 使用方法 md5(pwd)
SpringBoot+2次MD5登录密码加密+MyBatisPlus+Thymeleaf+Bootstrap简单实现登录功能，一文轻松搞定！
SYJ的博客
01-15 1673
本文通过SpringBoot+2次MD5登录密码加密+MyBatisPlus+Thymeleaf+bootstrap简单实现登录功能。
Hplus表单验证与错误处理：用户友好的表单交互
Hplus表单验证与错误处理的重要性 ## 1.1 引言：表单验证与错误处理的作用 在Web开发中，表单是用户与网站进行交互的重要方式之一，通过表单用户可以提交数据、进行操作等。然而，随着用户数量的增加和安全威胁的...
前端（ElementUI）后端（Spring Cloud Eureka、Gateway、OAuth2、JWTtoken、RSA）
04-03
1、登录，密码使用RSA加密，重写DaoAuthenticationProvider解密验证，server-authentication => CustomAuthenticationProvider 2、退出登录，token刷新，页面无操作超时自动退出并跳转至登录页 3、图片的上传和显示...
基于python的信息加密解密网站源码数据库.zip
最新发布
08-31
在信息加密解密的网站中，用户身份验证是必不可少的，确保只有经过验证的用户才能访问和操作加密/解密服务。 7. **Web安全**: 网站需要遵循最佳的安全实践，如使用HTTPS协议进行安全的HTTP通信，防止SQL注入和XSS...
模拟登陆新版正方教务管理系统
爱你の大表哥的博客
08-20 2万+
引入 与很多高校一样，西安皇家邮电大学一直钟爱于正方教务管理系统。 前一段时间爬了学校的旧版的教务系统，旧版主页 想了解更多请点击这里：爬取学校教务系统获取学生信息 不知道学校是不是把装空调的拿去买新教务系统了，新教务系统主页 可以看出，学校用的仍然是正方教务系统，不过版本升级了，新教务系统是用Java写的后台，前端用了Bootstrap框架。与旧系统相比，界面美观大方，易用性也...
加密解密,前端加密,后端解密
09-14
加密解密,前端加密,后端解密,CryptoJS,AESEncryptUtil.java DESEncryptUtil.java Base64EncodeUtil.java MD5Util.java
前端登录密码加密传输
weixin_30722589的博客
07-25 2861
在HTTPS还没有普及的时候，前端采用HTTP协议，登录用户名和密码在不做任何控制的情况下是明文传输的，大量的网站都需要登录，大量的人使用同样的用户名和密码。 目的：防止登录密码名文传输（仅仅只是防止明文传输，加密效果取决于key，而key对于前台是透明的） 方式：前端页面用js加密前端登录密码，采用AES对称加密 一、前端JS加密库crypto-js 因为懒，所以直接引入整个加密库，可以...
bootstrapValidator重复验证会出现无法验证，undefined
KirK_的专栏
04-25 1461
解决办法：保证 $("#waterAnalyzeInput #waterAnalyzeform").bootstrapValidator({…})每次加载页面都可以被加载
bootstrapvalidator 密码验证 以及清除验证
小鑫lay的博客
07-22 7993
   在项目中写了一个修改密码的功能，使用了bootstrapvalidator 来进行文本框的验证。 首先在修改密码的jsp页面上加载validator的css和js   路径存放可以自己选择合适的位置。  &lt;link rel="stylesheet" href="./static/validator/css/bootstrapValidator.css" /&gt; &lt;s...
常见的用户密码加密方式以及破解方法
携程技术
10-19 2万+
【作者】张辉，就职于携程技术中心信息安全部，负责安全产品的设计与研发。作为互联网公司的信息安全从业人员经常要处理撞库扫号事件，产生撞库扫号的根本原因是一些企业发生了信息泄露事件，且这些泄露数据未加密或者加密方式比较弱，导致黑客可以还原出原始的用户密码。目前已经曝光的信息泄露事件至少上百起，其中包括多家一线互联网公司，泄露总数据超过10亿条。要完全防止信息泄露是非常困难的事情，除了防止黑客外，还要防...
spring-cloud Finchley.SR1 配置config加解密错误
gao454917848的专栏
08-31 2226
最近升级了spring cloud版本，遇到非常多的坑。其中在spring-config-server配置加解密时，用keystore方式生成 配置如下： encrypt.key-store.location=classpath:miniserver.ks encrypt.key-store.alias=minikey encrypt.key-store.secret=123456 encr...
我的java web登录RSA加密
yys79的专栏
11-26 2万+
之前一直没关注过web应用登录密码加密的问题，这两天用appscan扫描应用，最严重的问题就是这个了，提示我明文发送密码。这个的确很不安全，以前也大概想过，但是没有具体研究过，都不了了之，这次借这个机会，终于搞定了这个问题。 首先，有不少帖子说在客户端用js对密码进行md5摘要，然后提交给登录处理的url。这种做法无非是自欺欺人，就算别人抓包抓不到你原始密码，用这个md5后的密码一样可以模拟登录...
BootstrapValidator：Bootstrap表单验证插件实战与教程
BootstrapValidator是一款基于Bootstrap的实用表单验证插件，它极大地简化了前端开发者在创建动态表单时的验证流程。该插件允许开发者通过简洁的配置轻松实现客户端表单验证，提升用户体验并确保数据的准确性。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值