jquery.validate的使用

在页面上面引用

<script  type="text/JavaScript" src="js/jQuery.js"></script>

<script  type="text/JavaScript" src="js/jquery.form.js"></script>

<script  type="text/JavaScript" src="js/jquery.validate.js"></script>

<script  type="text/JavaScript" src="validator/jquery.metadata.js"></script>

<script  type="text/JavaScript" src="js/localization/messages_cn.js"></script>

页面html代码

<form id='form1'>

    <fieldset>

        <legend>jquery.validate+jquery.form</legend>

        <p>

            <label for='cusername'>

                姓名</label><em>*</em>

            <input id='cusername' name='username' class="{required:true,minlength:5}" size='25' />

        </p>

        <p>

            <label for='cemail'>

                电子邮件</label><em>*</em>

            <input id='cemail' name='email' class="{required:true,email:true}" size='25' />

        </p>

        <p>

            <input class='submit' type='submit' value='提交'>

        </p>

    </fieldset>

    </form>

执行js代码

$().ready( function() {

     $(function() {

            //表单验证JS

            $("#form1").validate({

                //出错时添加的标签

                errorElement: "span",

                success: function(label) {

                    //正确时的样式

                    label.text(" ").addClass("success");

                }

            });

        });

    

});

在html的代码中input的class属性为{required:true,email:true}意思是在

js/localization/messages_cn.js里面有说明,代码如下

jQuery.extend(jQuery.validator.messages, {

        required: "必填字段",

        remote: "请修正该字段",

        email: "请输入正确格式的电子邮件",

        url: "请输入合法的网址",

        date: "请输入合法的日期",

        dateISO: "请输入合法的日期 (ISO).",

        number: "请输入合法的数字",

        digits: "只能输入整数",

        creditcard: "请输入合法的信用卡号",

        equalTo: "请再次输入相同的值",

        accept: "请输入拥有合法后缀名的字符串",

        maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),

        minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),

        rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),

        range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

        max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

        min: jQuery.validator.format("请输入一个最小为 {0} 的值")

});

 如果需要将提交方式改成ajax提交

<form id='form1'>

    <fieldset>

        <legend>jquery.validate+jquery.form</legend>

        <p>

            <label for='cusername'>

                姓名</label><em>*</em>

            <input id='cusername' name='username' class="{required:true,minlength:5}" size='25' />

        </p>

        <p>

            <label for='cemail'>

                电子邮件</label><em>*</em>

            <input id='cemail' name='email' class="{required:true,email:true}" size='25' />

        </p>

        <p>

            <input type='button' id='btnSubmit' value='提交'>

        </p>

    </fieldset>

    </form>

js代码是

$("#btnSubmit").click(function () {

    var param = $("#form1").serialize();//序列化

    if ($("#form1").valid()) {//通过验证才进入ajax

        $.ajax(

            {

                url: "xxx.ashx",

                type: "get",

                data: param,

                dataType: "json",

                success: function(data) {

                    alert(data);

                }

            });

    }

});