jQuery验证使用

首先要加载jquery.js与jquery.validate.js两个文件。

<script type="text/javascript" src="js/jquery.ui.1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

然后可以写验证规则，与错误提示语，也可以写自定义的验证函数。

这里的验证一般针对于html表单中的各种控件。根据它们的名字进行验证。

<script type="text/javascript"> 
    //自定义函数验证日期大小
    $.validator.addMethod("greaterThan", function(value, element, params) { 
        if (!/Invalid|NaN/.test(new Date(value))) { 
            return new Date(value) >= new Date($(params).val()); 
        } 
        return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); 
    },'Must be greater than {0}.');
    $(document).ready(function() { 
        //一些验证规则
        $("#form1").validate({ 
            rules: { 
                //标题不能为空
                title: "required",// simple rule, converted to {required:true} 
                //描述不能为空
                DESCRIPTION: "required",
                //开始日期不能为空
                start_date: "required",
                //有两种验证，一种是不能为空，一种是调用自定义函数，结束时间必须大于等于开始时间
                end_date: {
                    required: true,
                    greaterThan: "#start_date"
                },
                //州id必须大于1
                state_id:{
                    min:1  
                },
                //email 必须正确，并且不能为空
                email: {// compound rule 
                    required: true, 
                    email: true 
                }, 
                url: { 
                    url: true 
                }, 
                comment: { 
                    required: true 
                } 
            }, 
            messages: { 
                title: "The title field  is required.",
                start_date: "Start date is required.",
                state_id:"Please select the proper state",
                //针对必须与结束日期大于开始日期的两种提示语
                end_date: {
                    required: "End date is required.",
                    greaterThan: "End date must be greater than Start date."
                },
                DESCRIPTION: "Description is required."
            } 
        }); 
    }); 
</script>   

然后可以修改一下错误提示的样式。

<style type="text/css"> 
    label.error { 
        position: relative;
        left: 285px;
        top:-125px;
        width: 205px; 
        display: inline; 
        color: red; 
        white-space:nowrap;
        font-size:12px;
        font-family:Arial;
    } 
    .error {
        color: #FFFFFF;
        font-family: Arial;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 0px;
        margin-top: 0px;
        text-align: left;
    } 
</style> 

 

做了上述的工作之后，如果表单提交了，jQuery 就会对数据进行相应的验证工作，并将错误提示显示在界面上。

更多验证知识，还要结合实例进行摸索，学习。