validate表单验证-单独验证

　　　　今天编写一个表单验证程序，我来说一下今天遇到的坑：程序不是通过submit按钮提交验证的，是在自己写的一个方法中提交的，出现了表单无法验证的情况。然后我就了解了一下jquery validate的验证方法。

　　　　jquery validate表单验证方式有三个：

　　　　1、直接通过submit方式提交，提交时自动验证（常用的方法，不懂得可以查看菜鸟教程-validate使用）

　　　　2、如果不是submit提交，比如在jquery中的某个事件中，调用提交表单事件的情况，在此时，1中的情况就不适用了（可能出现表单不验证的方法），这也是我遇到的问题

　　　　　　这就需要自己先编写一个表单验证程序，验证通过后，再提交表单。

　　　　 //编写的表单验证程序　
　　　　 function validateForm() {
            return $("#cashForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    phone: {
                        required: true,
                        pattern: /^0?(13[0-9]|15[012356789]|18[012346789]|14[57]|17[678]|170[059]|14[57]|166|19[89])[0-9]{8}$/
                    },
                    carId: {
                        required: true,
                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
                    },
                    number: {
                        required: true,
                        remote: {
                            url: "${base}/business/cash/check_card",
                            cache: false
                        }
                    }
                },
                messages: {
                    phone: {
                        pattern: "${message("common.validate.pattern")}"
                    },
                    number: {
                        remote: "${message("common.validate.pattern")}"
                    }
                }
            }).form();
        }

　　　　提交表单事件：（以下函数是验证码验证通过后，触发的表单验证，红色加粗部分，大家写的时候可以直接用此部分）

　　　　 $(document).ready(function(){
            var $cashForm = $("#cashForm");

            //获取验证码按钮绑定点击事件
            $(".verIfi-btn").on("click",verification);

            $("#sms_check").click(function () {
                var smsCaptcha = $("input[name='smsCaptcha']").val();
                var smsCaptchaId = $("input[name='smsCaptchaId']").val();
                $.ajax({
                    url: "${base}/business/cash/sms_check",
                    type: "GET",
                    data:{
                        smsCaptchaId: smsCaptchaId,
                        smsCaptcha: smsCaptcha
                    },
                    dataType: "json",
                    cache: false,
                    success: function(message) {
                        if (message.check){
                            if(validateForm()){
                                $cashForm.submit();
                            }
                        }
                    }
                });
            });
        });

　　　　3、验证一个单独的表单元素（校验规则写在空间中的时候使用）

　　　　例如：

<textarea id="ccomment" name="comment" maxlength="200" required></textarea>

　　　　验证方法：

    function validateForm() {
       $("#commentForm").validate().element($("#ccomment"));
    }
    
    function doSubmit(){  
       //do other things  
       //验证通过后提交  
       if(validateForm()){  
       　　$("#commentForm").submit()  
       }  
    }

　　　　参考：http://layznet.iteye.com/blog/1168811

validate表单验证-单独验证

猜你喜欢