jquery.validate的使用

浏览数：34 / 时间：2015年06月09日

在页面上面引用

<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);
                }
            });
    }
});