JQuery Validate配合Ajax完成校验

一、需求描述:

在新增用户时,要求判断用户输入的身份证是否已存在,如果已存在便不能完成保存操作并显示提示信息。

二、准备工作:

为了快速完成功能先了解一点JQuery Validate的基本知识点,然后就看这个例子jQuery Validate 插件 - 与表单（Form）插件的交互（AJAX 提交）。

三、解决步骤:

1.先引入相应的js文件。(参考上面两个链接的内容)
2.具体代码:

表单:

  <div class="modal-body">
                <form class="form-horizontal" method="post"
                      action="${pageContext.request.contextPath }/user/saveUser" id="userForm">

                    <div class="form-group">
                        <label class="col-sm-4 control-label">身份证:<font style="color: red">*</font> </label>
                        <div class="col-sm-4">
                            <input path="userName" id="userName" name="userName"
                                   class="form-control isIdCardNo checkIdCardExist"
                                   onblur="this.value=this.value.trim()"/><%-- onchange="checkDuplicateUser()"/>--%>
                            <span id="IdCard" style="color: red"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">单位名称:<font style="color: red">*</font> </label>
                        <div class="col-sm-4">
                            <input path="userName" id="companyName" name="companyName" class="form-control"
                                   onblur="this.value=this.value.trim()"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">姓名:<font style="color: red">*</font></label>
                        <div class="col-sm-4">
                            <input path="name" id="name" name="name" class="form-control"
                                   onblur="this.value=this.value.trim()"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">状态:<font style="color: red">*</font></label>
                        <div class="col-sm-4">
                            <select path="state" id="state" class="form-control" name="state">
                                <option value="1" selected="true">正常</option>
                                <option value="2">注销</option>
                                <option value="3">冻结</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">用户类型:<font style="color: red">*</font></label>
                        <div class="col-sm-4">
                            <select path="isAdmin" id="isAdmin" class="form-control" name="isAdmin">
                                <option value="0" selected="true">普通用户</option>
                                <option value="1">管理员</option>
                                <option value="2">查阅人员</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-4">
                            <button class="btn btn-primary" type="submit">保存</button>
                            <a class="btn btn-white" href="${pageContext.request.contextPath }/user/userManage">返回</a>
                        </div>
                    </div>
                </form>
            </div>

js:

 $(document).ready(function () {
        // 身份证格式验证
        jQuery.validator.addMethod("isIdCardNo", function (value, element) {
            var flag = IdCardValidate(value);
            return this.optional(element) || IdCardValidate(value);
        }, "请正确输入您的身份证号码");

        // 身份证号码验证有无重复
        jQuery.validator.addMethod("checkIdCardExist", function (value, element) {
            var length = value.length;
            var isExist = checkIdCardExist();
            console.info(isExist);
            return this.optional(element) || isExist;
        }, "该身份证已注册");

        function checkIdCardExist() {
            var flag = false;
            $.ajax({
                url: "${pageContext.request.contextPath}/user/selectDuplicateUser?userName=" + $("#userName").val(),
                type: "GET",
                dataType: "json",
                async: false,
                cache: false,
                contentType: "application/json",
                success: function (data) {
                    if (!data.success) {
                        flag = false;
                    } else {
                        flag = true;
                    }
                },
            });
            return flag;
        }

        $("#userForm").validate({
            rules: {
                userName: {
                    required: true,
                    maxlength: 50
                },
                companyName: {
                    required: true,
                    maxlength: 50
                },
                name: {
                    required: true,
                    maxlength: 11
                },
                state: {
                    required: true,
                    maxlength: 50
                },
                isAdmin: {
                    required: true,
                    maxlength: 50
                }
            },
            messages: {
                userName: {
                    required: "必填",
                    maxlength: "不得超过50位"
                },
                companyName: {
                    required: "必填",
                    maxlength: "不得超过50位"
                },
                name: {
                    required: "必填",
                    maxlength: "不得超过11位"
                },
                state: {
                    required: "必填",
                    maxlength: "不得超过50位"
                },
                isAdmin: {
                    required: "必填",
                    maxlength: "不得超过50位"
                }
            }
        });
    });

四、注意事项

1.身份证Input框中的class一定 要写checkIdCardExist,isIdCardNo(即自定义的规则名)
2.如果要使用IdCardValidate(value)方法来校验身份证格式,一定要引入validate.expand.js文件。

五、运行结果

六、写在最后

做后台开发也要对前端的知识有一定的了解,,,除非有一位前端女朋友。。。哈^-^

But are we all lost stars.Trying to light up the dark.