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

 

posted @ 2018-06-09 15:03  月夜白狐  阅读(15403)  评论(0编辑  收藏  举报