jQuery validate自定义-白红宇

jQuery validate自定义

阅读量：4129 次

发布时间：2019-05-25

本文共 2856 字，大约阅读时间需要 9 分钟。

jQuery Validate的表单验证功能倒是强大，但是和我现在做的还是有些区别。

除了要把验证元素放置到form标签里外，我自己有提交的按钮，这样就不能使用submit了。这时，我们使用Validate提供的valid方法，返回值是true和false，表单没有通过验证，也是提交不了的。

            <form id="fProfile"  method="post" action="">
                <div class="content">
                    <table>
                        <tr>
                            <td class="field-name field-required">用户名</td>
                            <td>
                                <input type="text" id="txtLoginName" name="txtLoginName" class="disabled" />
                            </td>
                        </tr>
                        <tr>
                            <td class="field-name field-required">昵称</td>
                            <td>
                                <input type="text" id="txtNickName" name="txtNickName" class="required userName"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="field-name field-required">电子邮件</td>
                            <td>
                                <input type="text" id="txtEmail" name="txtEmail" class="required email"/>   
                            </td>
                        </tr>
                        <tr>
                            <td class="field-name">生日</td>
                            <td>
                                <input type="text" id="txtBirthDate" name="txtBirthDate"/>   
                            </td>
                        </tr>
                        <tr>
                            <td class="field-name">联系电话</td>
                            <td>
                                <input type="text" id="txtContactPhone" name="txtContactPhone" class="isPhone"/>   
                            </td>
                        </tr>
                        <tr>
                            <td class="field-name">工作电话</td>
                            <td>
                                <input type="text" id="txtWorkPhone" name="txtWorkPhone" class="isPhone"/>   
                            </td>
                        </tr>
                        <tr>
                            <td class="field-name">手机号码</td>
                            <td>
                                <input type="text" id="txtMobileNo" name="txtMobileNo" class="isMobile"/>   
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="button-pane">
                    <button id="btnUpdateProfile">保存</button>
                    <button>取消</button>
                </div>
            </form>

验证脚本：

// 验证个人资料修改表单 
    $("#fProfile").validate({ 
        rules: { 
            txtNickName: { 
                maxlength: 64
            }
            , txtContactPhone: { 
                maxlength: 32
            }
            , txtWorkPhone: { 
                maxlength: 32
            }
            , txtMobileNo: { 
                maxlength: 32
            }
        }
        , messages: { 
            txtNickName: { 
                maxlength: lmslang.v_NickName_maxlen
            }
            , txtContactPhone: { 
                maxlength: lmslang.v_ContactPhone_maxlen
            }
            , txtWorkPhone: { 
                maxlength: lmslang.v_WorkPhone_maxlen
            }
            , txtMobileNo: { 
                maxlength: lmslang.v_Mobile_maxlen
            }
        }
    });
    $("#btnUpdateProfile").click(function() { 
        var b = $("#fProfile").valid();
if (b) { 
            editProfile();
        } else { 
            showError(lmslang.formValidate_Error);
        }
    });