jQuery Validate验证框架详解，提交前验证

现在都用h5表单进行验证了，以下方式仅做回忆

https://www.runoob.com/jquery/jquery-plugin-validate.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>jQuery Validate验证框架详解</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
        <script type="text/javascript">
        $(function(){
            var validate = $("#myform").validate({
                               
                rules:{
                    myname:{
                        required:true
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    }                    
                },
                messages:{
                    myname:{
                        required:"必填"
                    },
                    email:{
                        required:"必填",
                        email:"E-Mail格式不正确"
                    },
                    password:{
                        required: "不能为空",
                        rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
                    },
                    confirm_password:{
                        equalTo:"两次密码输入不一致"
                    }                                    
                }，

　　　　　　　　　　debug: true, //调试模式取消submit的默认提交功能   
                //errorClass: "label.error", //默认为错误的样式类为：error   
                focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
                onkeyup: false,   
                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                    alert("提交表单");   
                    form.submit();   //提交表单   
                },   

}); }); </script> </head>

html:

<body>
        <form id="myform" method="post" action="">
            <p>
                <label for="myname">用户名：</label>
                <!-- id和name最好同时写上 -->
                <input id="myname" name="myname" />
            </p>
            <p>
                <label for="email">E-Mail：</label>
                <input id="email" name="email" />
            </p>
            <p>
                <label for="password">登陆密码：</label>
                <input id="password" name="password" type="password" />
            </p>
            <p>
                <label for="confirm_password">确认密码：</label>
                <input id="confirm_password" name="confirm_password" type="password" />
            </p>
            <p>
                <input class="submit" type="submit" value="立即注册" />
            </p>
        </form>
    </body>
</html>

 自定义验证：

$.validator.addMethod(
            "zidingyi",                                             //验证方法名称
            function(value, element, param){                         //验证规则
                var reg=new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/);
                if(!reg.test(value)){
                    return false;
                }
                return true;
            },
            '请填写正确的身份证号'//验证提示信息
    );

调用方法：

//input验证
    $("#form-article-add").validate({
        rules: {
            p_name: {
                required: true,
            },
            jm_name: {
                required: true,
            },
            real_name:{
                required:true,
                maxlength:12,
            },
            grade:{
                required:true,
            },
            id_card:{
                zidingyi1:true,
                required:true,
            },

 

自己开发功能：

$(function(){
    //input验证
    $("#form-article-add").validate({
        rules:{
            sort:{
                required:true,
                min:1,
                max:999,
                digits:true,
            },
            num:{
                required:true,
                min:1,
                max:999,
                digits:true,
            },
            price:{
                required:true,
                decimalpoint:true,
            },
            reference:{
                required:true,
                min:1,
                max:99999
            },
            starttime:{
                required:true,
                date:true,
            },
            endtime:{
                required:true,
                date:true,
            },
        },
        messages: {
        },
        onkeyup:true,
        debug:true,                //debug模式，开启时submitHandler出错也不会跳转页面    
        /*保存并提交时执行的事件*/
        submitHandler:function(){
          
            var ti=document.getElementById('input_img');
            /*if (!ti.files || !ti.files[0]) {
                return layer.msg('必须选择详情图');
            }*/
            if (!ti.files || !ti.files[0]) {
                if(filetype) {
                    ti.files = filetype;
                    if(!ti.files) {
                        return layer.msg('必须选择详情图');
                    }
                }else{
                    return layer.msg('必须选择详情图');
                }
            }

            var tii=document.getElementById('input_hxi');
            /*if (!ti.files || !ti.files[0]) {
                return layer.msg('必须选择历史小图');
            }*/
            if (!tii.files || !tii.files[0]) {
                if(historyimg) {
                    tii.files = historyimg;
                    if(!tii.files) {
                        return layer.msg('必须选择历史小图');
                    }
                }else{
                    return layer.msg('必须选择历史小图');
                }
            }

            //判断基准为小数后两位
            var referenceid=document.getElementById("reference").value;
            var reg = /^\d+(\.\d{1,2})?$/;
            var isfloat = reg.test(referenceid);//console.log(isfloat);
            if (referenceid%1 !== 0 && !isfloat){
                $("#reference").focus();
                return layer.msg('小数后面只能写两位');
            }

            var titles=document.getElementById('title').value;
            if(/[~!@#$^&*()=|{}':;',\[\].<>/?~！@#￥……&*（）——+|{}【】‘；：”“'。，、？]/.test(titles))
            {
                return layer.msg('标题不能含有非法字符');
            }
            if (titles.length>15) {
                return layer.msg('标题必须小于15个字符');
            }
            var pd=false;
            layer.confirm('确认添加业绩活动?',function() {
                if (pd) {
                    return;
                }
                pd = true;
                layer.load(0,{
                    shade:[0.5,'#fff'],
                    zindex:1
                });
                var formData = new FormData();
                formData.append("file0",$("#input_img")[0].files[0]);
                formData.append("file1",$("#input_hxi")[0].files[0]);
                formData.append("public_key",'<?php echo C('imgparam')['public_key']; ?>');
                formData.append("type",6);
                $.ajax({
                    url: '<?php echo C('web_server_url_admin'); ?>',
                    data:formData,
                    processData:false,
                    contentType:false,
                    type: 'POST',
                    dataType: "JSON",
                    success: function (data) {
                      alert();
                    },
                    error: function () {
                        layer.msg('图片上传连接失败，请检查您的网络连接',function(){layer.closeAll();})
                    },
                });
            });
        }
        
    });
});